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.
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.
Don’t duplicate the visible text 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
- 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
- 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
- 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)
- Meets criteria across platforms, devices and viewports