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.