aria-*
Accessibility attributes: the role, name and state of an element for screen readers.
Syntax
<button aria-label="Close">×</button>Parameters
| Parameter | Type | Description |
|---|---|---|
| role | button | dialog | alert | … | The role of an element when no fitting tag exists. |
| aria-label | text | The element's name for screen readers. |
| aria-hidden | true | Hide the element from screen readers. |
| aria-expanded | true | false | Whether the controlled block is expanded. |
Examples
An icon button with a name and a decorative icon:
<button aria-label="Close">×</button>
<p><span aria-hidden="true">★</span> Top rated</p>A message that is announced right away:
<button onclick="msg.textContent = 'Added to cart'">Add</button>
<p id="msg" role="status" aria-live="polite"></p>Notes
The first rule of ARIA: if a fitting HTML tag exists, use it. A <button> is better than <div role="button"> — it is focusable and works with the keyboard by itself. ARIA changes only what a screen reader user hears, not how the element behaves.
See also
Related recipes
In the tutorial
- Accessibility — How to make a page usable for everyone — keyboard use, focus, labels and alt, aria-label, contrast and meaningful tags.