# ARIA: Roles, States and Properties Explained

Source: https://allyway.ai/glossary/aria

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html), a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/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.

> **Warning:** > **Native HTML first**
> W3C's guide "Using ARIA" sets its first rule: if a native HTML element with the behavior you need exists, use it instead of adding a role. `role="button"` on a `div` brings no keyboard support – you have to add Tab focus, Enter and Space yourself. A real `<button>` has all of that built in.

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

```html title="Example"
<!-- 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.

**Do:** Do

Use native elements first, then add ARIA only for what HTML cannot express: states like `aria-expanded`, names via [aria-label](https://allyway.ai/glossary/aria-label), regions via [ARIA landmarks](https://allyway.ai/glossary/aria-landmarks). Keep every state in sync with the interface. Follow the patterns in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/).

**Don't:** Don't

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

Q: What does ARIA stand for?
A: Accessible Rich Internet Applications. The full name of the W3C specification is WAI-ARIA, after the Web Accessibility Initiative that publishes it.

Q: When should I use ARIA?
A: 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.

Q: Does ARIA change how my website looks or works?
A: 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.

Q: Is ARIA required by WCAG?
A: 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.

Q: How can I find broken ARIA on my site?
A: Run the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) on your homepage – it checks against WCAG 2.2 AA, including name, role and value of your controls.