ARIA role attributes

 ARIA role attributes

In ARIA (Accessible Rich Internet Applications), the role attribute defines what an element is (its semantic meaning) to assistive technologies like screen readers.

Roles are grouped into categories, and WCAG/ARIA specs define many of them. Here’s a breakdown:

---

🔹 1. Landmark Roles (define page regions)

Help screen reader users navigate quickly.

• banner → site-wide header

• navigation → main site/app navigation

• main → primary content of the page

• complementary → sidebar or related content

• contentinfo → footer information

• search → search section

• form → landmark for a group of form elements

• region → generic region of content (should have a label)

---

🔹 2. Document Structure Roles

Describe document-like content.

• article

• note

• definition

• directory

• heading

• list, listitem

• table, row, cell, columnheader, rowheader

---

🔹 3. Widget Roles (Interactive UI components)

For buttons, links, menus, etc.

• button

• link

• checkbox, radio, switch

• tab, tabpanel, tablist

• menu, menubar, menuitem

• listbox, option, combobox

• dialog, alertdialog

• slider, spinbutton

• progressbar, scrollbar

---

🔹 4. Abstract Roles (for specification only – not used in code)

• command, composite, input, range, section, sectionhead, select, structure, widget, window
  👉 These are only for ARIA spec authors. You don’t use them in HTML.

---

🔹 5. Window Roles

For top-level application windows.

• alert

• alertdialog

• dialog

---

🔹 6. Graphics Roles (ARIA 1.1+)

For SVG/Canvas accessibility.

• graphics-document

• graphics-object

• graphics-symbol

---

✅ Example

<nav role="navigation">
  <ul role="menubar">
    <li role="menuitem"><a href="/home">Home</a></li>
    <li role="menuitem"><a href="/about">About</a></li>
  </ul>
</nav>

Here:

• navigation → landmark region

• menubar → widget container

• menuitem → individual interactive item

---

👉 In practice:

• Use HTML5 native elements first (<nav>, <main>, <button>, <form>).

• Use ARIA role only when semantics aren’t provided by default HTML.