The page should have a skip link as its first link

Rule ID: skip-link
Ruleset: axe-core 3.0
User Impact: Moderate
WCAG: Best practice

Join our beta testing program!

We're looking for axe-users and front-end web developers to participate in testing some new accessibility tools.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Deafblindness
  • Mobility/Dexterity

Requirement(s)

  • Best Practice

WCAG Success Criteria

  • Not specified or not applicable

Section 508 Guidelines

  • Not specified or not applicable

How to Fix the Problem

Ensure that all skip links in the webpage have a focusable target that allows users to skip the navigation.

The skip navigation link should be placed at the top of the page, right after the opening <body> tag.

You can add a skip link in the following manner:

<div id="skip">
    <a href="courses/html-css/navigation/skip-navigation#content">Skip Content</a>
</div>

Unfortunately, webkit based browsers such as Safari and Chrome have a bug that prevents same-page links from working properly. You will need to create a workaround for such browsers using Javascript. For a tutorial on how to fix this bug, see the Skip Navigation Links in the HTML and CSS Accessibility Course.

It may be tempting to hide the skip navigation link - after all, it adds content to the page’s layout and it might be confusing for people who don’t need it.If you decide to hide it, be sure NOT to hide it in the following manners:

  • use CSS to permanently position the link off screen
  • display: none
  • visibility: invisible

The first method will work fine for users of screen readers, but sighted users who benefit from the skip link will not be able to access it. The other two methods will make the link inaccessible for everyone. The two accessible ways to deal with skip links are as follows:

  • Make the "skip navigation" link permanently visible
  • Use CSS to hide the link off screen until it receives keyboard focus, then make it visible to all users.

To implement the second option, style the above skip link like this:

#skip a {
    display: block;
    position: absolute;
    left: -999px;
    top: -999px;
    }

#skip a:focus {
    left: 0;
    top: 0;
    padding: 3px;
    background: #ffc;
    border:1px solid #990000;
    }

While you are at it, you may want to consider adding more skip links for users to skip past repetitive content. This usually isn’t necessary, though it may be helpful in some cases.

Why this is Important

Screen readers announce content sequentially. What this means for users of assistive technology is that the entire navigation, which can be quite lengthy, will be read out to the user before reaching any of the main content. This can be time consuming and unnecessary, which is why it is important to include a link to the main content at the top of the navigation.

Screen readers announce content sequentially as it appears in the HTML file. What this means for users of assistive technology is that the entire navigation, which is typically at the top of the page and can be quite lengthy, will be read out to the user before reaching any of the main content. Since content at the top of the page can often be very lengthy, it can be time consuming to listen or tab through all of it when the user is only interested in the main content. Including a skip link provides a huge benefit to blind users, users with low vision, and mouse-only users.

Rule Description

The page must have a link at the top (before the navigation) that allows users to skip lengthy navigation and proceed to a page's main content to save time.

The Algorithm (in simple terms)

Ensures that the best practice of having a skip link as the very first link in a page is adhered to

Resources

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 3.0 rules.