Ensure all skip links have a focusable target

Rule ID: skip-link User Impact: moderate Guidelines: Best Practices

The skip-link rule ensures that a page includes a skip navigation link at the top, allowing users to bypass repetitive navigation and jump directly to the main content.

What is being tested?

This rule checks that:

  • The page has a skip link placed near the top of the HTML, just after the <body> tag.
  • The skip link has a valid, focusable target (such as #main).
  • The skip link is accessible to both keyboard and screen reader users.

Why it matters

Screen readers and keyboard users navigate content sequentially. Without a skip link, they must tab through or listen to all navigation before reaching the main content, which can be slow and frustrating. A skip link greatly improves efficiency for blind users, low-vision users, and keyboard-only users.

Good markup example

<div id="skip">
  <a href="#content">Skip to main content</a>
</div>

<nav>...navigation here...</nav>

<main id="content">...main content here...</main>

Best practice: CSS to hide until focus

#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;
}

This technique keeps the skip link visually hidden until it receives keyboard focus, making it accessible without disrupting the layout.

Bad practices to avoid

  • Using display: none or visibility: hidden, which makes the link inaccessible to all users.
  • Permanently positioning the skip link off-screen without revealing it on focus.
  • Failing to provide a valid target element for the skip link to jump to.

Additional best practices

  • Place the skip link as the first focusable item in the HTML.
  • Use clear link text, such as Skip to main content.
  • Consider adding skip links for other repetitive sections (like sidebars) if helpful for users.

Other Rules

Interested in other web accessibility rules? Please see these other rules:

logo TestingBot