Last reviewed: 14 April 2021

Components

Skip navigation

Skip navigation allows screen reader and keyboard users to go directly to the main content.

Example

Skip navigation in use on a Co-op website

Skip to content link focused after the tab key has been pressed.

Required elements

Links

Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:

  • navigation
  • main content
  • footer

Using skip navigation on a page

The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.

Pressing the tab key again should then cycle through ‘skip to content’, ‘skip to navigation’ and ‘skip to footer’ links.

Pressing enter will take the user to the correct part of the page and apply the focus ring to the first interactive element in that section.

If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.