Documentation navigation

On this page

WAI-ARIA Fundamentals

What ARIA is#

WAI-ARIA 1.2 Specification modifies how browsers expose accessibility semantics. It does not replace HTML, CSS, or JavaScript behavior.

ARIA can

  1. Expose a role when no native element fits
  2. Expose state like expanded or selected
  3. Create relationships (labelledby, controls, describedby)

Native first#

Interactive demo

Div vs button

Compare implementations

Try Tab through the page. The styled div is not in the tab order and has no button semantics.

Save

Activations: 0 (pointer only unless you rebuild keyboard support)

Markup
<div class="button" onclick="...">Save</div>
Role
generic (no button role)
Name
not exposed as a control name
Keyboard
not focusable by default; no Enter/Space contract
Behavior
must be rebuilt: role, focus, keys, and state
Instructions
Tab and activate both implementations.

BadARIA role without full behavior

<div role="button" tabindex="0">Menu</div>

GoodNative button

<button type="button">Menu</button>
role="button" is not enough. You must also implement keyboard activation and manage focus. A native button already does.

What ARIA cannot do#

ARIA cannot

  1. Create keyboard behavior by itself
  2. Fix focus management automatically
  3. Make inaccessible content accessible with attributes alone
  4. Override the need for visible labels and clear UI

Test

ActionExpect
Ask for nativeA native element would not work
Add ARIARole/state match the UI
Add behaviorKeyboard + focus match APG expectations