Code examples
Use semantic HTML
This semantic HTML contains all accessibility features by default.
<a href="/about/">
About
</a>
If a link has no definable url, add tabindex="0"
to make it focusable.
<a tabindex="0">
About
</a>
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