ARIA

I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!

Der direkter Draht zum Screenreader: Wie dynamische Änderungen im HTML-DOM live an assistive Technologien kommunizieren werden können

On July 6 2021 the ARIA in HTML specification, that I co-edit along with Steve Faulkner and Patrick H. Lauke, became a W3C Candidate Recommendation Snapshot...

ARIA authoring practices are patterns and examples that are a great starting point, but they shouldn't be used as is - let's discuss why.

In part one of this three-part blog series, Gerard Cohen covers an introduction to the official ARIA standard and reviews the 5 rules of ARIA.

Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.

Rolle, Zustand und ein zugänglicher Name — wann ist HTML barrierefrei? Möglichkeiten und Grenzen barrierefreier Techniken, und wie ARIA dabei helfen kann.

A community-driven effort to make digital accessibility easier.

HTML has all sorts of built-in features that, when used correctly, are accessible, will localize, and which just work. For example, if I want a button, I use , and a screen reader will announce it as button. For users in other languages, they will hear whatever is their word…

Original photo by Kevin Hale (photo no longer on Flickr), text added. CC BY-SA 2.0. The pun in the title is that some people pronounce the a11y numeronym as “alley”. That makes the full title sound like uncanny valley, the concept of human-looking things seeming almost, but not quite, human…

Diving deep into three attributes that bring clarity to elements in assistive technologies.

How lying to screen readers cures accessibility, when it doesn't rub salt in it!

Yesterday, we talked about screen readers (and why you should use one). What happens if you have a piece of content that changes dynamically on your page? How do screen readers let the user know that content has changed? For example, imagine you had an input for users to type their name. Below it, you have an element that displays “Hello {user’s name}!” in real time as they type. How does a screen reader user know about the message in the #app element?

Recently I wrote a bit on how I’d define a toast component, outlining UX concerns that should be considered if deciding to implement such a messaging mechanism.

Semantic HTML and ARIA help create interfaces that work for everyone in the most performant, robust, and simple way possible. And yet, many people still don’t use them. Let's find out why and explain the benefits of these technologies.

By using ARIA’s role=

Semantic HTML and Accessible Rich Internet Applications (ARIA) help create interfaces that work for everyone in the most performant, robust, and simple

Please note that there the following information may no longer be accurate if testing with newer versions of browsers and screen readers than the ones note...

There are certain situations where ARIA is a good (and maybe the only) way to go. But if done wrong, usage of ARIA often leads to even worse accessibility. Especially accessibility novices tend to misuse ARIA to "optimise" smelly code.

This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML51], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.