role
The role attribute defines the ARIA semantic role of an element for assistive technologies.
Syntax
role="value"Examples
<div role="alert">Form submitted successfully.</div>
<div role="tablist">
<button role="tab" aria-selected="true">One</button>
</div>
Output
Screen readers announce the alert immediately and treat the buttons as a tab interface.
Notes
Prefer native semantic elements over ARIA roles whenever possible (the first rule of ARIA). Use role only to fill gaps for custom widgets and keep required ARIA states in sync.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |