ARIA Resources

Introduction

WAI-ARIA or ARIA for short, is a set of web standards adopted by browser builders to fill the gap between things we can do with plain HTML, and things we can do with Javascript ¹.

Pretty much everything you can do in HTML is accessible by default because Microsoft, Apple, and Google built Edge, Safari, and Chrome to adhere (more or less) to WCAG specifications.

But when you let 7 billion people on the planet loose with a tool like Javascript, well, at least one of them is going to build at least one thing that the browser makers weren’t anticipating, and which can’t be done without some accessibility help.

Let’s take tabs as an example. In the beginning if you wanted to have a page with 3 tabs on it, each of which had different content you actually built the page 3 times, ensured the header was identical, and used links to move between the tabs. A screen reader user was fine because each time they clicked a tab (link) it took them to the top of a page and they got all the content.

Then someone figured out that hey, they could build the page once and use Javascript to switch the tabs and the content…. but there was no way to tell the screen reader software that the container was a tabset, and no way to tell the screen reader that the content had changed when the tab was clicked, and so on, because none of those things existed in HTML.

Enter ARIA, which allows people building custom components like tabsets to declare that a thing has a role of tab panel or a role of tab, so that the screen reader knows. It can even provide values and accessible names to things that would otherwise go with out.

Learning ARIA is complex ¹, but unless you or your organization will only ever use HTML out of the box, there’s a good chance you’re going to need it.

Additional resources

• aria-label Does Not Translate by Adrian Roselli
• ARIA live regions on MDN Web Docs
• Accessible Description Exposure by Adrian Roselli
• Using the “text” role by James Edwards at TBGi — Essentially it sums up to “don’t”.