There is a mechanism to skip to content, or skip past navigation

Design Notes

Define skip links and allow users to bypass large groups of controls

Where there are many links or form controls used in one group, it creates a lot of items to tab through. A link before such groups, which allows users to skip to the end, helps people using keyboard-style access with a switch or head-wand to avoid repetitive key presses.

Generally, a skip link is required before the main header navigation links. Provide a style for the skip link to be used by developers. Skip links are generally hidden by default but must be very visible when focused.

Ensure any large blocks of links or controls (e.g. over 20 checkboxes in a filter) have a skip link included as part of designs or a way to show/hide the controls.

More information:

• See the GOV.UK search page example which includes filters housed in collapsed accordion components and an option is provided to skip past entire filter section.

Developer Notes

Ensure there is a working skip link to the main content

Sighted users can easily ignore repeated sections of content on a page — such as repeated links in the main navigation. However, without a method of bypassing these repeated blocks of links, users of assistive technology are forced to move through them. This can be a repetitive and frustrating experience. Skip links resolve this issue for users.

Ensure you've been provided with design(s) for the skip link and check it meets minimum contrast ratios. If not, ask your designers.

Generally skip links are implemented as same page links to an ID set on the <main> element, bypassing the main navigation and breadcrumb (where relevant).

To ensure these work across browsers, tabindex="-1" should also be set on <main> element (or other target element in the body content).

A different approach is required for JavaScript-driven, client rendered websites such as single page apps (SPAs). In this case, focus needs to be managed manually — for example, main body content elements (h1) are made programatically focusable using tabindex="-1" and focus moved to the element using the JavaScript focus() method.

Information and tools

• WebAIM: Skip Links
• Dave Rupert: Accessible Navigation in SPAs

Testing Notes

There is a mechanism to skip to content, or skip past navigation

Skip links are used so people can avoid long lists of links/controls

Steps to check:

• place cursor in the browser address bar
• press Tab key, a 'Skip to content' link should become visible before focus reaches the main navigation links
• press Enter key while skip link has focus
• check focus has moved to past main navigation to main body content
• check additional press of Tab continues to next interactive element in main body

Impact range: Medium - Low

Test type: Manual

WCAG Reference: Understanding Success Criterion 2.4.1 Bypass Blocks