• 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>

Code examples

Use semantic HTML with common sense names

This semantic HTML contains all accessibility features by default.

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

This semantic HTML looks like a big shiny button, but it is still a link.

<a class="button" href="/about/">
  About
</a>
About
  • Do not use a heading with a generic link below.
  • Instead, make the heading a link.
<h3>About our coffee subscriptions</h3>

<p>Get the best coffee delivered to your door</p>

<a href="/subscriptions/">
   Learn more
</a>

What to do instead

<h3>
  <a href="/subscriptions/">
    About our coffee subscriptions
  </a>
</h3>

<p>Get the best coffee delivered to your door</p>
  • Do not put anything but a URI in the href
  • A link with no href will not be focusable with the keyboard without tabindex="0".
  • Add role="link" to ensure screen reader reads the role
<a tabindex="0" role="link">
  About
</a>
About

Avoid custom elements

This custom button requires extra attributes and keyboard event listeners.

<custom-element role="link" tabindex="0">
  About
</custom-element>

Repeating text links

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

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

Don’t duplicate the visible text name in the aria-label

Do not repeat the inner text content of a link in the aria-label.

<a href="/do-NOT-repeat-yourself/" 
   aria-label="Do NOT repeat yourself">
   Do not repeat yourself
</div>

Don’t use javascript in href

  • Do not use "href="javascript:void(0)".
  • When screen readers read the href, it becomes confusing and nonsensical
<a href="javascript:void(0)">
   Do not use javascript in href
</div>

Don’t use “#” in href

<a href="#">
   Do not use # to populate the href
</div>
  • If it’s unavoidable to have a disabled link present you’ll need these attributes for the screen reader.
<a tabindex="0" role="link" aria-disabled="true">
  Continue
</a>

Related link entries