Links and buttons that say what they do

Who it affects

Screen reader users, who can list every link on a page and pick one; voice-control users, who say a link's or button's name to press it; and people with cognitive disabilities, who benefit from links that say plainly where they go.

Name every link and button

A link or button needs text a screen reader can read. When it shows only an icon, that text has to come from an aria-label, or from text that is visually hidden but still in the page.

<!-- Icon-only: the name goes on the link or button -->
<a href="/cart" aria-label="Shopping cart"><svg aria-hidden="true">…</svg></a>
<button aria-label="Close menu"><svg aria-hidden="true">…</svg></button>

<!-- Vague text: say where it goes instead -->
<a href="/menu">See the lunch menu</a>     <!-- not "Click here" -->

Make the visible words part of the name

If a button shows “Order now”, its accessible name should contain “Order now”. An aria-label that says something else breaks voice control: the visitor says what they see, and nothing happens (WCAG 2.5.3).

Good habits

• Write links that make sense on their own: “Download the catering menu (PDF, 2 MB)”.
• If several “Read more” links are unavoidable in the design, give each an aria-label that starts with the visible words: “Read more about our new location”.
• Use a link to go somewhere and a button to do something. Don't make a div clickable.
• Say when a link opens a PDF, starts a download or opens a new window.