Select Page

Category: Accessibility

How do you figure?

How do you figure?

Posted by | Feb 1, 2019 | , , , , , |

Scott O’Hara digs into the and elements. Gotta love a good ol’ HTML deep dive. I use these on just about every blog post here on CSS-Tricks, and as I’ve suspected, I’ve basically been doing it wrong forever. My original thinking was that a figcaption was just as good as the alt attribute. I generally use it to describe the image. The Starry Night, a famous painting by Vincent van Gogh I intentionally left off the alt text, because the figcaption is saying what I would want to say in the alt text and I thought duplicating it would...

Read More
Reader Mode: The Button to Beat

Reader Mode: The Button to Beat

Posted by | Jan 7, 2019 | , |

As a young nerd, I loved to immerse myself in digital worlds, learning the ins and outs of the rules someone else had created for me (intentionally or not). But the older and crankier I get, the more I find myself losing patience when navigating these “delightful” experiences. This fascination was great for my eventual career as a designer, but unfortunately, it was also like teaching someone kerning—once you learn how to quantify a bad user experience, you can’t go back. These days, I’m an impatient grump who doesn’t want to take work home. I just want to get...

Read More

Too Much Accessibility

Posted by | Dec 3, 2018 | , , |

I like to blog little veins of thought as I see them. We recently linked to an article by Facundo Corradini calling out a tweet of ours where we used an where we probably should have used an . Bruce Lawson checks if screen readers are the victims of these semantic mistakes… Whenever I read “some browsers” or “some screenreaders”, I always ask “but which ones?”, as did Ilya Streltsyn, who asked me “what is the current state of the text-level semantics in HTML reality?” Léonie Watson to the rescue! Over Twitter, Watters wrote Most are capable of reporting these things on demand, but do not as standard. So you don’t hear the text/font characteristics being announced as you read, but you can query a character/word etc. to discover its characteristics. This is based on the visual presentation of the text though, rather than through any recognition of the elements themselves Which I suppose is to say that if you’re really fretting about screen readers misinterpreting the nuanced usage of your semantic emphasis… you can relax on that one. Bruce’s article led me toward Steve Faulkner’s article “Screen Readers lack emphasis” from 2008. Using the semantic elements strong and em does not convey any useful information to users of JAWS or Window Eyes under typical browsing conditions. While it is good to know this, it is not a reason...

Read More

Keyboard-Only Focus Styles

Posted by | Nov 14, 2018 | , , , |

Like Eric Bailey says, if it’s interactive, it needs a focus style. Perhaps your best bet? Don’t remove the dang outlines that focusable elements have by default. If you’re going to rock a button { outline: 0; }, for example, then you’d better do a button:focus { /* something else very obvious visually */ }. I handled a ticket just today where a missing focus style was harming a user who relies on visual focus styles to navigate the web. But those focus styles are most useful when tabbing or otherwise navigating with a keyboard, and less so when they are triggered by a mouse click. Now we’ve got :focus-visible! Nelo writes: TLDR; :focus-visible is the keyboard-only version of :focus. Also, the W3C proposal mentions that :focus-visible should be preferred over :focus except on elements that expect a keyboard input (e.g. text field, contenteditable). (Also see his article for a good demo on why mouse clicking and focus styles can be at odds, beyond a general dislike of fuzzy blue outlines.) Browser support for :focus-visible is pretty rough: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Opera Firefox IE Edge Safari No No 4* No No No Mobile / Tablet iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox...

Read More

Unbuttoning Buttons

Posted by | Oct 8, 2018 | , , , |

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you’re looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it’s extremely likely you’ll be styling buttons anyway. Scott O’Hara has taken a look as well. I think the solution offered to use a is a little bizarre since you need bring your own keyboard handling with is non-trivial and requires JavaScript. But there are a couple of interesting other CSS explorations, neither of which stacked up for different reasons: display: contents; – some semantics-based accessibility problems. all: unset; – doesn’t reset display value, not good enough browser support. Direct Link to Article — Permalink The post Unbuttoning Buttons appeared first on CSS-Tricks....

Read More
  • 1
  • 2
www.000webhost.com