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>

Developer notes

Name

  • Inner text should describe the purpose of the link.
  • Do not repeat the name with aria-label="Link purpose"

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