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