ARIA: Roles, States and Properties Explained
Also called: WAI-ARIA, Accessible Rich Internet Applications, ARIA attributes
Definition
ARIA (WAI-ARIA, Accessible Rich Internet Applications) is a W3C specification of HTML attributes – roles, states and properties – that tell assistive technology what a custom element is, what it is called and what state it is in.
ARIA – short for WAI-ARIA, Accessible Rich Internet Applications – is a W3C standard that adds meaning to HTML for assistive technology. With ARIA attributes, a custom tab panel, accordion or menu can tell a screen reader what it is ("tab"), what it is called and whether it is open or selected. ARIA changes only what assistive technology hears – not how an element looks or behaves.
What it means
ARIA has three kinds of attributes:
| Type | Purpose | Examples |
|---|---|---|
| Roles | What an element is | role="tab", role="dialog", role="navigation" |
| States | Conditions that change with use | aria-expanded, aria-checked, aria-pressed |
| Properties | Names, descriptions and relations | aria-label, aria-labelledby, aria-describedby, aria-controls |
WCAG 4.1.2 Name, Role, Value, a Level A criterion of WCAG 2.2, requires that name, role, states and values of every user interface component are available to assistive technology. W3C says standard HTML controls already meet this when used according to the specification. Custom controls need extra work – and ARIA is how you provide it: technique ARIA4 exposes the role, ARIA5 the state, ARIA14 and ARIA16 the name. A div turned into a control by script without a role is failure F59.
Wrong ARIA is worse than none: a misspelt role, an aria-hidden="true" on a focused element or an aria-expanded that never updates sends screen reader users wrong information.
Examples
<!-- Accordion button: native button + state -->
<button aria-expanded="false" aria-controls="faq-1">Shipping costs</button>
<div id="faq-1" hidden>Shipping is free from 50 euros.</div>
<!-- Landmark with a name -->
<nav aria-label="Main">…</nav>
<!-- Don't: fake button without keyboard support -->
<div role="button" onclick="save()">Save</div>When the accordion opens, the script must set aria-expanded="true" and remove hidden – the state has to follow what is on screen.
Use native elements first, then add ARIA only for what HTML cannot express: states like aria-expanded, names via aria-label, regions via ARIA landmarks. Keep every state in sync with the interface. Follow the patterns in the ARIA Authoring Practices Guide.
Add role="button" or role="link" to elements that should be real buttons or links, use roles that do not exist, repeat the native role (<button role="button">) or hide focusable content with aria-hidden="true".
How to check ARIA on your site
Questions
What does ARIA stand for?
Accessible Rich Internet Applications. The full name of the W3C specification is WAI-ARIA, after the Web Accessibility Initiative that publishes it.
When should I use ARIA?
When HTML has no native element for what you build – tabs, tree views, comboboxes – or to add a state or name HTML cannot express. For buttons, links, form fields and headings, use the HTML element.
Does ARIA change how my website looks or works?
No. ARIA only changes what browsers pass to assistive technology. Keyboard behavior, focus and visual states still have to be built with HTML, CSS and JavaScript.
Is ARIA required by WCAG?
No. WCAG requires that name, role and value are available; native HTML usually provides them. ARIA is one of several sufficient techniques, mainly for custom components.
How can I find broken ARIA on my site?
Run the free WCAG scanner on your homepage – it checks against WCAG 2.2 AA, including name, role and value of your controls.
Related terms
aria-label: How to Name Elements Correctly
aria-label is an ARIA attribute that sets the accessible name of an element as a text string. Screen readers announce this name instead of the element's content, so it is used mainly for controls without visible text, such as icon buttons.
Read definition: aria-label: How to Name Elements CorrectlyARIA Landmarks: Page Regions for Screen Readers
ARIA landmarks are roles such as banner, navigation, main and contentinfo that identify the large regions of a page. Screen readers list them and let users jump directly to each region.
Read definition: ARIA Landmarks: Page Regions for Screen ReadersAccessible Name: What It Is and How It Is Computed
The accessible name is the text that browsers pass to assistive technology to identify an element – for example the words a screen reader announces for a button, link or form field. WCAG 4.1.2 requires a programmatically determinable name for every user interface component.
Read definition: Accessible Name: What It Is and How It Is ComputedScreen Reader: How It Reads Websites and What It Needs
A screen reader is assistive software that reads the content and controls of a screen aloud or outputs them on a braille display. It relies on the names, roles and states that a website exposes through the browser's accessibility tree.
Read definition: Screen Reader: How It Reads Websites and What It Needs