When ARIA helps and when it harms

How it works

ARIA (Accessible Rich Internet Applications) is a W3C standard. It adds attributes to HTML that only assistive technology such as screen readers reads; they change nothing about how the page looks or behaves in the browser.

• role says what an element is, such as role="dialog" or role="tablist".
• aria-* properties describe state and name, such as aria-expanded="true" for an open menu or aria-label for a name.
• aria-hidden="true" hides an element and everything inside it from screen readers.

The first rule of ARIA: where there is an HTML element with the right meaning, use the element. A button beats a div role="button", a nav beats role="navigation". ARIA only promises a meaning; keyboard operation and behaviour are yours to build.

WCAG 2.2 requires in success criterion 4.1.2 that the name, role and state of every control are right for assistive technology, and in 1.3.1 that the structure in the code matches the visible one.

What matters

• Valid roles only. A role has to exist in the ARIA standard. Typos (role="buton") or invented roles are ignored by the screen reader, and the element loses its meaning. Abstract roles such as widget, landmark, input or section are meant for the standard itself, not for pages.
• Never aria-hidden on the body. aria-hidden="true" on the body empties the whole page for screen readers. It often happens when a dialog hides the background and the attribute isn't removed after closing.
• Nothing operable in hidden areas. If a link or button sits in an area with aria-hidden="true", the keyboard lands on an element that doesn't exist for the screen reader. Hidden slider slides and menus are typical.
• Keep states current. An aria-expanded that always says false is worse than none. Scripts must switch it on opening and closing.

For areas that should not be operable right now, inert is the better choice: it takes them away from screen readers and the keyboard at once.

<div class="slide" inert>…</div>

How to set it up

ARIA hardly ever lives in the content; it sits in the theme, page builders and the scripts for menus, sliders, accordions and dialogs. The report lists the affected elements with their code. Invalid roles and forgotten aria-hidden attributes are fixed by whoever maintains the theme or plugin; for third-party plugins, report it to the vendor or replace the plugin.