WAI-ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a W3C specification that adds semantic attributes to HTML: roles, states, and properties. These attributes enable assistive technologies to understand dynamic interface components that native HTML alone cannot describe. Version 1.2 is the official recommendation since June 2023.

A custom button in a <div>, a tab system, an asynchronous notification: native HTML cannot describe these components to screen readers. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is the W3C specification that fills this gap. Version 1.2, published in June 2023, is the official recommendation.

#Roles, states, properties

The specification rests on three types of attributes:

• Roles indicate what an element is: role="tab", role="dialog", role="alert". Each role has constraints: a tab must be a child of a tablist, an option must be found within a listbox.
• States describe the current situation: aria-expanded="false" for a collapsed panel, aria-checked="true" for a checked checkbox. They change as interactions occur.
• Properties provide supplementary information: aria-label names an element without visible text, aria-describedby associates an explanation with it, aria-required signals a required field.

By combining these three types, the developer provides a complete component to assistive technologies:

<button aria-expanded="false" aria-controls="panel-1">
  Product details
</button>
<div id="panel-1" role="region" hidden>
  Content hidden by default.
</div>

The screen reader announces: "Product details, button, collapsed". The user knows they can expand the section. Without aria-expanded, they have no indication of the panel's state.

#ARIA does not replace behavior

This is the most common pitfall. Adding role="button" to a <div> changes the voice announcement, but handles neither keyboard focus, nor the Enter key, nor the Space key. The component lies.

<!-- ❌ Announced as "button", unusable with keyboard -->
<div role="button" onclick="save()">Save</div>
 
<!-- ✅ Focusable, activatable, native semantics -->
<button onclick="save()">Save</button>

The ARIA in HTML specification formalizes this principle: if a native HTML element with the desired semantics exists, use it. "No ARIA is better than bad ARIA" summarizes the entire philosophy.

When native HTML is not enough, ARIA takes over. Tabs, dropdowns, sliders, dynamic notification zones: the W3C APG documents each design pattern with its structure, keyboard management, and required attributes.

#In summary

WAI-ARIA gives a voice to components that HTML cannot describe. Each ARIA attribute is a commitment: the developer must provide the corresponding behavior. The RGAA verifies this consistency in its topic 7 (Scripts). Start with semantic HTML. ARIA comes after.