Skip links - Information For This Demo

Quick tip: If the target of the skip link is a DIV or a heading, add tabindex="-1" to the target of the skip link. For example:

<a href="#maincontent"> Skip to main content <a>
...
<main id="maincontent" tabindex="-1">

This will help ensure compatibility with all browsers.

How to test this issue

  • Test technique: Keyboard.
    • When the page loads, press the Tab key. The first tab stop on the page should be the Skip to Main Content link.
    • The skip link must be visible when it has focus. (It can be visible all the time.)
    • If the first tab stop is not a skip link, keep pressing tab to get an idea how many times you must press Tab before you reach the main content area of the page. Best practice is to add a skip link if there are any tab stops between the top of the page and the main content area. We consider any number greater than 7 is an error.
    • If there is a skip link, tab to the link and press Enter to activate the link. Then press Tab one more time to verify keyboard focus jumps to the first tab stop in the main content, and does not reset back to the top of the page.

Failing WCAG Guidelines and Test Tips

For the skip link demo, the following WCAG guidelines fail:

  • 2.4.1: Bypass Blocks