Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

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

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

<a tabindex="0">
  About
</a>
About

Avoid custom elements

This custom button requires extra attributes and event listeners.

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

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>
<a href="/privacy/" aria-label="Privacy policy">
  Learn more
</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="/dont-repeat-yourself/" 
   aria-label="Don't repeat yourself">
   Don't repeat yourself
</div>

Developer notes

Name

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

Role

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

Focus

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