Use semantic HTML
This semantic HTML contains all accessibility features by default.
If a link has no definable url, add
tabindex="0" to make it focusable.
Avoid custom elements
This custom button requires extra attributes and event listeners.
When there are repeating 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.
Don’t repeat the name in the aria-label
Do not repeat the inner text content of a link in the
- Inner text should describe the purpose of the link.
- Do not repeat the inner text content of a link in the
- Native button identifies as button by default
role="link"for custom elements
- Focus must be visible
- Custom elements need
tabindex="0"to be focusable