ARIA

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.

Landmarks can be quite useful to people who use screen readers, as they can be used to help orient someone to, and help navigate, a properly structured websi...

Related Other posts in this accidental series: Layout as a Clue to Semantics Display: Contents Is Not a CSS Reset Tables, JSON, CSS, ARIA, RWD, TLAs… Tables, CSS Display Properties, and ARIA A Responsive Accessible Table Hey, It’s Still OK to Use Tables When I presented my talk CSS Display…

Many web pages today have their content dynamically changed using Javascript. An example of this is the search page on this blog. When the page is initially loaded, the only content in the section of the page is a search form. But, when you type in a

Do you know when to use and not to use ARIA roles, states, and properties? Follow these 5 rules of ARIA use and you will.

It's within the Document Object Model (DOM) that we find one of the keys to building accessible things for the web: the document.

A primer on appropriately using aria-hidden='true' and role='none/presentation'. They each do very different things to elements, but their purposes are somet...