Reference
What is ARIA?
ARIA is a set of HTML attributes that communicate roles, states and properties to assistive technology where native HTML cannot. Its first rule is not to use it: a real button beats a div with role="button" in every respect.
Also called: WAI-ARIA · aria attributes
The first rule of ARIA
If a native HTML element does the job, use it. A button element is focusable, keyboard operable and announced correctly with no attributes at all. A div with role="button" requires tabindex, key handlers for Enter and Space, and still behaves subtly differently.
Where it is genuinely needed
- aria-label where a control has no visible text, such as an icon-only button
- aria-expanded on a control that opens and closes something
- aria-current="page" on the active navigation item
- aria-live for content that updates without a page load, such as a form status message
- aria-hidden="true" on decorative elements that would otherwise be announced
The most common ARIA bug
An aria-label that does not contain the visible text. Speech-input users say what they see, so a button labelled "Send" with aria-label="Submit form" cannot be activated by voice. Where both exist, the accessible name must contain the visible label.
Where this is covered in depth
A definition can only go so far. The 35 types of SEO, explained without the padding covers this properly — 6 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.