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>

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.

<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

Design notes

  • Perceivable
    • Is easy to identify as interactive
    • Type size is no smaller than 16px
    • The text has a 4.5:1 minimum contrast ratio
    • Color is not used as the only means of conveying information
  • Operable
    • The clickable/tappable target areas are no smaller than 44x44px
    • The focus indication has a minimum area equal to the width of the element and 2px in height
    • The focus state has a 3:1 minimum contrast ratio between the default and focused states
    • The focus indication has a 3:1 minimum contrast ratio against adjacent elements
  • Understandable
    • The purpose should be clear in the context of the whole page
    • If it goes somewhere, it’s <a> link (that can look like a button)
    • If it does something, it’s a <button> (that can look like a link)
  • Robust
    • Meets criteria across platforms, devices and viewports