Reviewing aria-label

Test cases

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" 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" 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" is presented in the accessibility tree.

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

3.1. Role="menu"

<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" is presented in the accessibility tree.

3.2. Role="img"

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

<span role="img" aria-label="Open">
</span>

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

3.3. Role="dialog"

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

<div role="dialog" aria-label="Settings">
</div>

Pass criteria: The <div> has a name "Settings" 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" is presented in the accessibility tree.

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 <button> has a name "Contact" is presented in the accessibility tree.

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" is presented in the accessibility tree.

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" is presented in the accessibility tree.

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.

Testing home