Table of Contents Example The HTML Live Region Button Decoration Accessible Name The Styles Hide the Live Region Color and Contrast Active Animations Text Resize and Reflow Windows High Contrast Mode The Script The Click Event Manipulate Outcomes Screen Reader Output WCAG Success Criteria What This Does Not Do Wrap-up…
I had this post queued up for Halloween because, come on, skeletons, and then life did its thing and now it is a … Thanksgiving post? Many skeleton patterns do a poor job presenting themselves to screen reader users in any meaningful way. They often stuff aria-busy into their widget,…
I have written a bunch about responsive tables. Maybe too much. I keep trying to give developers the information they need to make informed decisions — ARIA attributes, screen reader & browser pairing results, bugs, and so on. I have spread things out over years of posts. I have filed…
Visually and functionally sortable column headers on tables are straightforward (I have a post on that coming soon). However, making them accessible can be a bit frustrating. To clarify, making them accessible to screen readers is frustrating. I wrote the post I promised in the opening: Sortable Table Columns There…
In early March, Steve Faulkner shared this nugget for making sub-headings: 👉If you want to semantically identify a heading subtitle, look no further than role="doc-subtitle" w3.org/TR/dpub-aria-1.0/#doc-subtitle #HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz Steve Faulkner (@stevefaulkner) March 7, 2020 On its surface it looks pretty handy. Handy enough that Chris Ferdinandi wrote about…
A disclosure widget is a simple control whose sole purpose is to hide or show stuff. Native HTML has one built in via the <details> and <summary> elements. Until recently, if you wanted to use it in modern browsers you needed to use a polyfill. In most cases it was…
The moment you change it. As soon as you start to tweak the underlying code or aspects of the design, you run the risk of introducing bugs. That part should be easy for any developer to understand. The tougher part to get your arms around is that once you add…
TL;DR: Stop using the word drop-down. Instead choose a term that accurately describes the control you want. I have worked both with native platform developers and web developers. While control names might differ, if a control was functionally the same then it was not an issue. A TextBox, for example,…
Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…
In current user interface terms a toast is a message that appears on the screen; it is often short, often appears only briefly, and often animates up from the bottom (like a piece of ghostly yet precisely-crafted toast), though other directions and a fade-in/-out is common. The Name When Google…
Here is the priority I follow when assigning an accessible name to a control: Native HTML techniques, aria-labelledby pointing at existing visible text, Visibly-hidden content that is still in the page, aria-label. Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may…
Related Under-Engineered Responsive Tables A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow