Skip to content.
Adrian Roselli
SaaS Blockchain Intelligent Agent IPA

All Posts Tagged: ARIA

Keyboard Challenges for Twitter’s New ALT Badge

On 7 April 2022, Twitter added a feature to let all web users display the alternative text on images in tweets. I am glad to see this feature in the wild for everyone. It has some issues, however, which complicate the experience for sighted keyboard users. The following video demonstrates…

Posted:

Tags: accessibility, ARIA, css, html, Twitter, usability, UX

Accessible Description Exposure

If you have little experience with ARIA, screen readers, or testing in general, understanding accessible descriptions can be trickier than understanding accessible names (already confusing for many). I have written explanations so many times for clients and in fora that I opted to put this together so I maybe never…

Posted:

Tags: accessibility, ARIA, browser, standards

Support for Marking Radio Buttons Required, Invalid

The required set of radio buttons. The white whale to many a developer who is trying their darnedest to ensure they are conveyed accessibly while not also making it sound like every individual radio button must be toggled. 1961 Cadillac Wonderbar dashboard radio by Nicholas Lucien (cropped). CC BY 2.0.…

Posted:

Tags: accessibility, ARIA, html, pattern, standards, usability, UX

More Google and Afterthought Accessibility

Google has an extensive history of releasing products and tools that fail basic accessibility. This is not a function of individuals — Google has some very talented and capable accessibility practitioners. Instead, this is an organizational failure. Failure to require accessibility in its products or services. Failure to support teams…

Posted:

Tags: accessibility, ARIA, css, Google, html, standards, UX, WCAG

Switch Role Support

Whether you use a <button> or <input type=”checkbox”> as the basis for your switch depends on a few factors: Use <button> if: you can count on JavaScript being available, and flipping the switch has an immediate effect. Go read Under-Engineered Toggles Too. Use <input type=”checkbox”> if: you want to progressively…

Posted:

Tags: accessibility, ARIA, pattern, standards

Using CSS to Enforce Accessibility

The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that…

Posted:

Tags: accessibility, ARIA, css

Multi-Column Sortable Table Experiment

This post expands on what I covered in my April 2021 post, Sortable Table Columns. You may want to read that first to understand the broader challenges and techniques for making a table sortable by one column at a time. That last statement is what matters here. ARIA 1.1 says…

Posted:

Tags: accessibility, ARIA, pattern, tables, UX

Sortable Table Columns

An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Column Background via <col> Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers…

Posted:

Tags: accessibility, ARIA, pattern, tables, UX

Multi-Function Button

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…

Posted:

Tags: accessibility, ARIA, css, html, JavaScript, pattern, usability, UX, WHCM

Be Careful with Dynamic Accessible Names

Many of my clients try to reduce the number of controls on a screen by replacing them with single controls that change their name based on their purpose (what they unironically call reducing complexity). For example, presenting a download button that also acts as its own progress indicator and completion…

Posted:

Tags: accessibility, ARIA, html, UX, WCAG

Sortable Table Column Mad Libs

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…

Posted:

Tags: accessibility, ARIA, html, pattern, standards, tables, usability, UX

Be Wary of doc-subtitle

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…

Posted:

Tags: accessibility, ARIA, browser, html, pattern, rant, standards