Last Updated: 2024-11-21

ARIA stands for Accessible Rich Internet Applications

A screen-reader cannot know that the following is a checkbox since the checkbox look-and-feeling styling comes exclusively from a CSS class and not the HTML (in fact, a p tag is used for the checkbox instead of a checkbox input):

<p class="checkbox" checked>
  I am over 18
</p>

ARIA can remedy this by adding information:

<p class="checkbox" checked role="checkbox" aria-checked="true">
  I am over 18
</p>

(A standard HTML element doesn't need an additional role="checkbox" ARIA attribute to be correctly announced.)

One of the core aspects of the ARIA system is its collection of roles. A role in accessibility terms amounts to a shorthand indicator for a particular UI pattern. ARIA provides a vocabulary of patterns we can use via the role attribute on any HTML element. One such role is checkbox, which we saw above.

Can add extra labelling info for assistive technologies

<button aria-label="screen reader only label"></button>

Can express relationships between page elements

<div role="scrollbar" aria-controls="main"></div>
<div id="main">
</div>

Can make parts of a page "live" so they immediate inform assistive technologies when they change