« Back to home

Testing aria-label

Which of the examples below correctly use aria-label?

Example 1: Valid use on a button

Accessible name for the <button> should be: Close dialog

<button aria-label="Close dialog">✕</button>

Example 2: Valid use on a landmark

Accessible name for the <nav> should be: Primary navigation

<nav aria-label="Primary navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Example 3: Valid use on an input

Accessible name for the <input> should be: Search this site

<input type="search" aria-label="Search this site">

Example 4: Empty aria-label

Accessible name for the <button> should be: Submit. The empty aria-label will be ignored.

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

Example 5: Whitespace-only aria-label

Accessible name for the <button> should be: Submit. The aria-label containing only whitespace will be ignored.

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

Example 6: Prohibited role — <p>

There will be no accessible name for the <p> as this role does not allow naming.

<p aria-label="Important notice">This paragraph has an aria-label.</p>

Example 7: Prohibited role — <span>

There will be no accessible name for the <span> as this role does not allow naming.

<span aria-label="Hello world">This span has an aria-label.</span>

Example 8: Prohibited role — role="none"

There will be no accessible name for the <div> as this role does not allow naming.

<div role="none" aria-label="Hello world">This element
has a role of none.</div>

« Back to home