×

html · level 2 · unit 6 · lesson 2

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

aria-label names a part that has no useful words.

Screen readers say an for every link, button and box. Usually it comes from the words inside, the alt text or the <label>. A button that only shows × has no useful name.

attributes start with aria- and tell screen readers more. aria-label="Close" gives that button the name Close. The words never show on the screen.

It also tells two landmarks of the same kind apart. A page with two <nav> menus can name them aria-label="Main" and aria-label="Footer".

<header>
  <nav aria-label="Main">
    <a href="https://example.com/">Home</a>
  </nav>
  <button aria-label="Close">×</button>
</header>
<footer>
  <nav aria-label="Footer">
    <a href="https://example.com/help">Help</a>
  </nav>
</footer>

Press show my page to see it here.

Visible words always beat ARIA. Only reach for aria-label when there are no words to use.