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.

ARIA - Aria-label

Aria-label

aria-label is an ARIA (Accessible Rich Internet Applications) attribute used in HTML to improve accessibility for screen readers.

It provides a text label for an element when visible text is not available or sufficient. Screen readers announce this label to users, helping them understand the purpose of the element.

Syntax:

<element aria-label="Descriptive text"></element>

Common Use Cases:
Icons without text
    <button aria-label="Search">
      <svg><!-- search icon --></svg>
    </button>
👉 Screen reader announces: “Search, button”

Links with only images
    <a href="/" aria-label="Home">
      <img src="home-icon.png" alt="">
    </a>

Custom controls without visible labels
    <div role="switch" aria-checked="false" aria-label="Dark mode"></div>


Key Notes:
Use aria-label when no visible text is present.
If visible text exists, prefer using it directly instead of aria-label.
Avoid redundancy (don’t repeat text already visible).
For larger descriptions, use aria-describedby.



 Difference between aria-label, aria-labelledby, and aria-describedby?

🔹 1. aria-label
    Gives an invisible label to the element.

    Use when there is no visible text.

    <button aria-label="Play video">
      <svg><!-- play icon --></svg>
    </button>
    ✅ Screen reader says: “Play video, button”

    (No text shown on screen — label only for assistive tech.)

🔹 2. aria-labelledby
    Points to another element’s text as the label.

    Use when you already have visible text somewhere.

    <h2 id="settingsTitle">Settings</h2>
    <button aria-labelledby="settingsTitle">⚙️</button>

    ✅ Screen reader says: “Settings, button”

    (The label comes from the <h2> with id settingsTitle.)

🔹 3. aria-describedby
    Provides extra descriptive info (longer than a label).

    Use when you want to add details.

    <button aria-label="Delete" aria-describedby="deleteHint">🗑️</button>
    <p id="deleteHint">Permanently removes this file.</p>

    ✅ Screen reader says:

    “Delete, button. Permanently removes this file.”


⚖️ Quick Comparison 
Attribute
Purpose
Best For
aria-label
Custom invisible label
Icons / unlabeled controls

aria-labelledby
Reuse visible text from another element

When you already have a heading or label on screen

aria-describedby
Extra explanation (secondary info)
Adding hints, instructions, warnings




👉 Rule of thumb:
Use aria-label only if you can’t use visible text.
Prefer aria-labelledby if a label already exists.
Add aria-describedby for extra context, not as the main label.

✅ Example: Search Input with All ARIA Attributes
    <label id="searchLabel" for="siteSearch">Search</label>
    <input 
      type="text" 
      id="siteSearch"
      aria-labelledby="searchLabel" 
      aria-label="Search our site" 
      aria-describedby="searchHint">
    <p id="searchHint">You can search for products, categories, or brands.</p>


🔎 How a screen reader interprets this:
aria-labelledby="searchLabel" → announces “Search” (from the <label>).
aria-label="Search our site" → overrides and announces “Search our site” (because aria-label has higher priority).
aria-describedby="searchHint" → adds “You can search for products, categories, or brands.”
So the user hears:

👉 “Search our site, edit text. You can search for products, categories, or brands.”

⚠️ Important Note
If aria-label and aria-labelledby are both used, aria-label wins (screen readers read it instead of aria-labelledby).
Best practice:
Use either aria-label or aria-labelledby for the main label.
Add aria-describedby only for extra context.

👉 Cleaned-up best practice version of the same example:
    <label id="searchLabel" for="siteSearch">Search</label>
    <input 
      type="text" 
      id="siteSearch"
      aria-labelledby="searchLabel" 
      aria-describedby="searchHint">
    <p id="searchHint">You can search for products, categories, or brands.</p>

✅ Clear, non-redundant, and works perfectly.