WAI-ARIA Role
A WAI-ARIA role is an HTML attribute that tells assistive technologies the nature of an element: button, tab, alert, navigation region. Semantic HTML elements already carry an implicit role. A <button> is announced as a button without configuration. ARIA roles are only needed when native HTML cannot express the desired semantics.
A <div> with a click handler looks visually like a button. A screen reader user lands on it: silence. The screen reader doesn't know what this element is or how to interact with it. The role attribute solves this problem in one line.
#How a role works
Every HTML element has (or does not have) a role in the accessibility tree. A <button> carries the implicit role button. A <nav> carries the role navigation. A <div> alone carries no role: it returns null.
When semantic HTML is not enough, the role attribute adds this information manually:
<div role="tablist">
<div role="tab" aria-selected="true">Tab 1</div>
<div role="tab" aria-selected="false">Tab 2</div>
</div>The screen reader then announces "tab 1, selected, tab 1 of 2". Without these roles, it announces "text".
The W3C WAI-ARIA specification organizes roles into six categories:
| Category | Examples | Usage |
|---|---|---|
| Widget | button, tab, slider | Interactive components |
| Landmark | banner, main, navigation | Structural page regions |
| Structure | heading, list, row | Content organization |
| Live region | alert, status, log | Dynamically updated zones |
| Window | dialog, alertdialog | Modal windows |
| Abstract | widget, roletype | Reserved for taxonomy, never in code |
The RGAA relies on these roles in several criteria. Criterion 7.1 verifies that each interactive component in JavaScript has a role compatible with its function.
#The first rule: do not use ARIA
This is the first rule of the ARIA in HTML specification: if a native HTML element with the desired semantics and behavior exists, use it instead of adding an ARIA role.
A <div role="button"> announces "button" to the screen reader, but it does not receive keyboard focus, does not react to the Enter key, and does not submit a form. A real <button> does all of this natively. Adding a role without recreating the full behavior gives a component that lies to assistive technologies.
Another pitfall: changing a role dynamically. The WAI-ARIA specification forbids it. An element that is a tab must remain a tab. To change its nature, delete the element and create a new one.
#In summary
Favor semantic HTML tags: they carry implicit roles, handle keyboard and focus without additional code. Add role only for components absent from native HTML (tabs, menus, sliders). When you do, follow the W3C APG design patterns that document the expected behavior for each role.