Link - Web accessibility checklist

How to test a link

Gherkin Condensed

Given that I am on a page with a link

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a link I SEE focus is strongly visually indicated
THEN when I use the enter key to activate the link I SEE my browser goes somewhere

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a link
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a link
THEN when I use the enter key to activate the link I HEAR my browser goes somewhere

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a link
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a link
THEN when I doubletap with the link in focus I HEAR my browser goes somewhere

1 Keyboard only & screenreader

When I use	I see/hear
Tab	Focus visibly moves to the link.
Enter	Activates the link.

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the element
Doubletap	Activates the link

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a link

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