Accessible links and buttons: fix “click here” and empty icon links
Write link text that makes sense out of context and give icon buttons an accessible name.
Screen-reader users often pull up a list of all links on a page. A list of “click here, read more, click here” is useless. Icon-only links with no name are read as “link” or as the URL.
Link text
- Bad: “To see our prices, click here.” Good: “See our prices.”
- Make repeated “Read more” links unique: “Read more about teeth whitening”.
- Say when a link opens a file or a new tab: “Price list (PDF)”.
Icon links and buttons
<a href="https://instagram.com/yourshop" aria-label="Instagram"> <svg aria-hidden="true" focusable="false">...</svg> </a> <button type="button" aria-label="Open menu" aria-expanded="false">☰</button>
Links vs buttons
Links go somewhere (a new page). Buttons do something (open a menu, submit a form). Using the right element gives keyboard and screen-reader support for free.
Target size
WCAG 2.2 asks for tap targets of at least 24×24 CSS pixels, or enough spacing between them. Small social icons in footers often fail this.
Related guides
- Free ADA website checker: what a free scan can (and can't) tell you
- Restaurant website accessibility: menus, ordering and reservations
- Dental and medical practice website accessibility checklist
- Law firm website accessibility: a practical checklist
This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.
Check your own site
Run a free homepage snapshot to see your top 3 issues in about a minute, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes for your platform.