A11y Lablearn by doing
0/20

Accessible names · 08

Keep the visible label in the name

Speech input users expect the words they see to be the words that identify the control.

What to do

  1. Keep “Download report” visibly rendered.
  2. Make the button accessible name include that exact visible text.
  3. You may add extra context after the visible label.
/index.html
Preview
updating…

Result

Run the checks

Edit the HTML and select “Check solution”. The preview updates automatically.

If you are stuck

“Download report as PDF” works because it contains the visible label in the same order.

Read the exact rule or pattern

Exercise 8 of 20

axe-core

Automated audit