Accessible links and buttons: fix “click here” and empty icon links

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

All guides

Check your own site

Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.