Links and buttons are not the same.

This link looks like a link.

<a href="/about/">
  About
</a>
About

This link looks like a big shiny button (but it is still a link).

<a class="button" href="/about/">
  About
</a>
About
  • Include the href="example.com" if destination is known
  • Even if it looks like big shiny button, it must be coded as <a> link
  • When the user clicks a link, they are taken to a different location (within the page, within the website or out to the greater WWW).

If it does something, it’s a <button>

  • Buttons cause an action to occur on the same page
    • Submit a form (even when submission takes you to a new page)
    • Open a menu
    • Launch a modal
    • Expand details
  • A button can look like a link, but it must be coded as a <button>

Links with names like this tell people very little about where they’ll end up:

- Learn more
- Read more
- Buy now
- Shop now
- Check it out
- Find out more

In this case, “Check it out” not only obscures the destination of the link for people using a screen reader, but misses out on SEO opportunities as well.

Coffee subscriptions

Subscribe and save on our best coffees, filters and accessories delivered right to your door.

Check it out!

What to do instead

Coffee subscriptions

Subscribe and save on our best coffees, filters and accessories delivered right to your door.

Schedule your coffee delivery

Repeating text links

Sometimes the design will call for multiple links with the same text label. In a case like this, define the aria-label to name each link’s purpose.

Put the text of the visual link at the front of the aria-label as shown here.

If identical text links are separated by headings, this is probably okay without the aria-label.

<button>Get free coffee</button>
<a href="/free-coffee-tc/" aria-label="Terms and conditions for free coffee">
  Terms &amp; Conditions
</a>
<button>Get free donuts</button>
<a href="/free-donuts-tc/" aria-label="Terms and conditions for free donuts">
  Terms &amp; Conditions
</a>

Related link entries