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

Next lesson: States and properties

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies