How to test a skip link

Gherkin Condensed

Given that I am on a page with a skip link

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a skip link I SEE focus is strongly visually indicated
Then when I use the enter key to activate the link I SEE my focus moves directly to the targeted element

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a skip link
- I HEAR It describes which landmark it's targeting
- I HEAR It identifies itself as a link
- I HEAR It is typically the first element in the page
Then when I use the enter key to activate the link I HEAR my focus moves directly to the targeted element

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a skip link
- I HEAR It describes which landmark it's targeting
- I HEAR It identifies itself as a link
- I HEAR It is typically the first element in the page
Then when I doubletap with the link in focus I HEAR my focus moves directly to the targeted element

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves to the skip link
Enter	Activates the link, focus/tabindex moves directly to the targeted element

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the skip link
Doubletap	Activates the link, focus/tabindex moves directly to the targeted element

3 Screenreader output for all devices

Reads	I hear
Name	It describes which landmark it's targeting
Role	It identifies itself as a link
Group	It is typically the first element in the page

Code examples

<a href="#example-main">Skip to main content</a>
<a href="#">Not main content</a>
<main tabindex="-1" id="example-main">
  <h1>About main content</h1>
  <p>The main content of the page belongs here.</p>
  <p><a href="#">Focus moves here next</a></p>
</main>

Skip to main content Not main content

About main content

The main content of the page belongs here.

Focus moves here next

Developer notes

Group

Skip links must be the first perceivable elements in the page

Focus

Landmarks and other elements can be targeted with a skip link, but aren’t individually focusable with the tab key
Use tabindex="-1" to make the target focusable with a skip link.

Skip link

How to test a skip link

1 Keyboard for mobile & desktop

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output for all devices

Code examples

About main content

Developer notes

Group

Focus