ARIA roles
Learn role types: widget, document, landmark, abstract.
What is the role attribute?
The role attribute gives an element a semantic role. You add it when native HTML lacks a role or to fix a wrong one. Give a <div> a role="navigation" and a screen reader calls it a menu.
ARIA roles fall into four classes: widget (a single UI piece), document (content structure), landmark (large page regions) and abstract (base only, never used directly in HTML). Picking the right class strengthens accessibility.
Widget and document roles
Widget roles mark a single UI piece: tab, button, checkbox, slider and the like. They usually need JavaScript to come alive; alone they do nothing.
Document roles describe content structure: article, definition, note, application. Most of the time, using a native tag like <section> beats adding role="region"; reach for ARIA only when something is missing.
Abstract roles are not used in HTML
Abstract roles (range, input, select, structure) only act as the base for other roles; you never write them on an HTML element. The slider role, for instance, derives from range, but you only ever write role="slider".
Avoid piling role on a page. A <nav> already carries the navigation role; adding role="navigation" on top does nothing and bloats the code. Reach for ARIA only when native HTML falls short.
Exercise Write a navigation menu
Add a <div> to body and set its role to navigation. Inside it put a <ul> with one <li>. Inside the <li> add an <a href="/about">About</a> link.
Show example solution
<body>
<div role="navigation">
<ul>
<li><a href="/about">About</a></li>
</ul>
</div>
</body>Test yourself
-
Which is a landmark role?
- tab
- banner
- checkbox
- option
Show answer
banner — Correct. banner is a landmark role; it names the top of the page.
-
Write the navigation role
<div role="____"> <a href="/about">About</a> </div>Show answer
<div role="navigation"> <a href="/about">About</a> </div> -
Match each role to its class
- role="navigation"
- Landmark role
- role="tab"
- Widget role
- role="article"
- Document role
- role="range"
- Abstract role