Reviewing aria-label

Group 1. Interactive element with aria-label

1.1 No visible label - such as an icon inside a button

<button aria-label="Buy">
</button>

Pass criteria: The <button> has a name of "Buy" that is presented in the accessibility tree.

1.2 Different accessible name to visible text label

<button aria-label="Add to cart">
  Add
</button>

Pass criteria: The <button> has a name of "Add to cart" that is presented in the accessibility tree.

Group 2. Landmark element with aria-label

<nav aria-label="Primary">
</nav>

Pass criteria: The <nav> has a name "Primary" that is presented in the accessibility tree.

Group 3. Static element with a role and aria-label

3.1. Role="menu"

This pattern is shown for demonstration purposes only and is not recommended in production in this current form, as it does not include the required interaction behaviour.

However, it is a valid use-case where aria-label can be applied to a static element, because an ARIA role is present.

<ul role="menu" aria-label="Actions">
  <li role="menuitem">Item 1</li>
  <li role="menuitem">Item 2</li>
  <li role="menuitem">Item 3</li>
</ul>

Pass criteria: The <ul> has a name "Actions" that is presented in the accessibility tree.

3.2. Role="img"

This is an example of a legitimate use case for role="img" on a static element. It represents a single visual object composed of multiple characters.

This is another valid use-case where aria-label can be applied to a static element, because an ARIA role is present.

<span role="img" aria-label="Rating: 4 out of 5 stars">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>☆</span>
</span>

Pass criteria: The <span> has a name "Rating: 4 out of 5 stars" that is presented in the accessibility tree.

Group 4. Static element with aria-label inside interactive element

<button>
  <span aria-label="Close"></span>
</button>

Pass criteria: The <button> has a name "Close" that is presented in the accessibility tree.

This is invalid HTML. The element's role, explicit or implicit, is on the list of roles that must not be given an accessible name (generic, presentation, etc. per the current ARIA-in-HTML spec). Browsers may still expose a name in practice, but this pattern should not be used in production.

Group 5. Non-interactive element with aria-label

5.1 Non-interactive without role or focus:

This pattern is shown for demonstration purposes only and is not recommended in production.

<span aria-label="Contact">
</span>

Pass criteria: The <span> has a name "Contact" that is presented in the accessibility tree.

This is invalid HTML. The element's role, explicit or implicit, is on the list of roles that must not be given an accessible name (generic, presentation, etc. per the current ARIA-in-HTML spec). Browsers may still expose a name in practice, but this pattern should not be used in production.

5.2 Non-interactive that can receive focus

This pattern is shown for demonstration purposes only and is not recommended in production without additional work.

<div tabindex="0" aria-label="Card">
</div>

Pass criteria: The <div> has a name "Card" that is presented in the accessibility tree.

This is invalid HTML. The element's role, explicit or implicit, is on the list of roles that must not be given an accessible name (generic, presentation, etc. per the current ARIA-in-HTML spec). Browsers may still expose a name in practice, but this pattern should not be used in production.

Group 6. Name explicitly suppressed

6.1 Role suppresses semantics

This pattern is shown for demonstration purposes only and is not recommended in production.

<span role="presentation" aria-label="Help">
</span>

Pass criteria: The <span> has a name "Help" that is presented in the accessibility tree.

This is invalid HTML. The element's role, explicit or implicit, is on the list of roles that must not be given an accessible name (generic, presentation, etc. per the current ARIA-in-HTML spec). Browsers may still expose a name in practice, but this pattern should not be used in production.

6.2 Element hidden

This pattern is shown for demonstration purposes only and is not recommended in production.

<span aria-hidden="true" aria-label="Delete">
</span>

Pass criteria: The element should have no name in the accessibility tree.

This is invalid HTML. The element's role, explicit or implicit, is on the list of roles that must not be given an accessible name (generic, presentation, etc. per the current ARIA-in-HTML spec). Browsers may still expose a name in practice, but this pattern should not be used in production.

Testing home