# ARIA

> Canonical HTML version: https://rocketvalidator.com/glossary/aria
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that add accessibility semantics such as roles, states, and properties to custom UI components.

ARIA helps when native HTML cannot express a custom interaction pattern. It should complement semantic HTML, not replace it.

## Why ARIA matters

Screen readers rely on the accessibility tree, not visual styling. ARIA can expose names, roles, and states so custom controls are announced correctly.

## How ARIA works

ARIA adds:

- **Roles** (what the element is, like `button` or `dialog`)
- **States** (current condition, like `aria-expanded`)
- **Properties** (relationships, like `aria-labelledby`)

First rule of ARIA: if native HTML already provides semantics, prefer native elements.

## Code examples

```html
<!-- Avoid: non-semantic button with incomplete ARIA -->
<div role="button">Save</div>
```

```html
<!-- Prefer native control -->
<button type="button">Save</button>
```

```html
<!-- Custom disclosure with synchronized state -->
<button aria-expanded="false" aria-controls="details">Details</button>
<div id="details" hidden>...</div>
```