How to give links and buttons an accessible name
Accessibility1 min readFixes check link-names
Icon-only links and empty buttons are read out as "link" or "button". Add visible text or an aria-label.
Step by step, with screenshots: Accessibility checker results — fixing the ten findings we see most →
Check your own site
Runs this check and the other 186, free, in about 45 seconds.
What a passing site looks like
- Every link and button has an accessible namefail · −4 ptseffort S
Link and button names
Why it matters. Icon-only links and buttons are read out as "link" or "button" with nothing else, so screen reader users cannot tell the cart from the search. Search engines also use link text to understand the target page.
How to fix it.
- Add visible text, or aria-label="…" on the link or button, that says where it goes or what it does.
- For icon buttons, put the text inside the button and hide it visually with a screen-reader-only class.