ARIA roles and states

Definition

ARIA stands for Accessible Rich Internet Applications. It is a vocabulary of roles, states, and properties that a page can apply to elements so assistive technology understands what they are and what they are doing.

What it changes and what it does not

ARIA changes what is reported to assistive technology. It changes nothing else. Adding role="button" to a div does not make it focusable, does not make it respond to Enter or Space, and does not give it a pointer cursor. Those remain your job. A native button provides all of them without a single attribute.

The first rule

The published authoring practice is to use a native element when one fits, and reach for ARIA when nothing native expresses the pattern. Tabs, comboboxes, tree views, and live regions have no native equivalent, so they are where ARIA earns its place.

States that must be maintained

Attributes such as aria-expanded, aria-selected, and aria-checked describe a value at a moment in time. Setting them once during markup and never updating them announces a lie. If a script changes the visible state, the same script updates the attribute.

Common failures

• ARIA applied to an element that already had the right semantics.
• aria-label overwriting visible text, so speech and screen disagree.
• role="presentation" stripping meaning from a table or list.
• A state attribute that never changes after the first render.
• ARIA used to patch a keyboard problem it cannot fix.

Review question

Would this element behave correctly if the ARIA attributes were removed and a native element used instead? If the answer is yes, use the native element. Incorrect ARIA is worse than none, because assistive technology has no way to detect that it is wrong.