What is ARIA?

ARIA stands for Accessible Rich Internet Applications. It’s a specification and a standard set of HTML attributes for plumbing accessibility information through web applications. That means you can’t make up your own attributes.

The current version of ARIA (as of Winter 2023) is 1.2: https://www.w3.org/TR/wai-aria-1.2/ (opens in a new tab)

ARIA shouldn’t be the first thing you reach for: it’s an advanced tool. That’s because it’s easy to mess up, which I personally have done. Part of the problem is that the major impact of ARIA is on users of Assistive Technology and the attributes get used a lot more than they are actually tested. Support can also vary cross-platform.

Fortunately, the developer tools we use today make it easier to spot potential problems with ARIA usage. However, you must still test your ARIA markup with Assistive Technology to make sure things are working as intended.

⚠️ Please reference the standard (opens in a new tab) when applying ARIA to your web pages and make sure you’re using it correctly. Slapping on some attributes that you think might work but not testing them in Assistive Technology can actually make things worse. ⚠️

HTML and ARIA

HTML and ARIA (opens in a new tab) work very closely together. Both standards affect how HTML tags turn into element objects that are rendered in a browser and screen readers.

Only HTML will affect things like focusability, visual style, and behavior. ARIA will only affect the Accessibility Tree and Assistive Technology. An example is the disabled HTML attribute vs. aria-disabled: the former will render an input non-focusable and non-functional, as well as remove it from the accessibility tree. Meanwhile, aria-disabled will only remove it from the accessibility tree and the input will remain focusable.

You can think of accessibility information that comes from semantic HTML elements as built-in, while ARIA attributes are bolted-on.

In future sections, we will dig into the parts and mechanics of ARIA so you can learn how to apply it to your own code responsibly.

Which docs should I use?

It can be confusing to know which docs online to reference. Even the W3C specifications themselves can be outdated when we search, and it’s unclear what is current.

• The WAI-ARIA standard from the W3C (opens in a new tab) itself is the best source of truth. I typically have it open in a browser tab when I’m working so I can look up required roles, combinations, and other rules.

  • ARIA is also developed in the open on GitHub (opens in a new tab) where you can search the archives and ask new questions.

• MDN (opens in a new tab) is a great resource for learning about ARIA as they seem to care about keeping things up to date.

• Web.dev (opens in a new tab) also has some great ARIA information.

• HTML5 Doctor (opens in a new tab) has historically included some helpful details about ARIA and HTML that could aid in understanding.