Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<a href="/about/">

If a link has no definable url, add tabindex="0" to make it focusable.

<a tabindex="0">

Avoid custom elements

This custom button requires extra attributes and event listeners.

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

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.

<a href="/security/" aria-label="Security policy">
  Learn more
<a href="/privacy/" aria-label="Privacy policy">
  Learn more

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="/dont-repeat-yourself/" 
   aria-label="Don't repeat yourself">
   Don't repeat yourself

Developer notes


  • Inner text should describe the purpose of the link.
  • Do not repeat the inner text content of a link in the aria-label


  • Native button identifies as button by default
  • Use role="link" for custom elements


  • Focus must be visible
  • Custom elements need tabindex="0" to be focusable