HomeChallengesRepsProblemsLeaderboardTake a challenge

Names the screen reader can read

A toolbar of icon buttons, a decorative logo, a link that says "click here", and a status that changes without telling anybody. Give every one of them the right name, and give the decorative ones no name at all.

Intermediate20 min on the clock6 graded checks · 100 pointsReachable by EveryonePro
Graded by reading your code against the checklist below.

What you build

  • An icon-only button carries aria-label
  • The icon inside it is hidden from assistive tech
  • A decorative image has an empty alt, not a missing one
  • A live region announces the status when it changes
  • The landmark says which navigation this is

Done means

Everything meaningful has a name, everything decorative has none, and a change of state is announced.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. The icon-only button has a name+25Accessibility
  2. The decorative icon is hidden from assistive tech+15Accessibility
  3. The decorative image has an empty alt, not a missing one+20Semantic HTML
  4. The link makes sense read on its own+15Accessibility
  5. A change of status is announced+15Accessibility
  6. The navigation landmark says which one it is+10Semantic HTML

What it teaches

The rest of Reachable by Everyone