Rampsight
Sign inGet started

← All rules

Keyboard

Give people a way past the navigation

Why it matters

Someone using a keyboard or a screen reader meets the same forty header links on every page. Without a way past them, reaching the content costs forty keystrokes each time.

How to fix it

  1. Add a "Skip to content" link as the first focusable element, pointing at the main region.
  2. Wrap the page content in <main id="main"> and use <nav>, <header> and <footer> around it.
  3. Make the skip link visible when it receives focus — a link nobody can see is a link nobody uses.

In markup

Fails
<body>
  <nav>... 40 links ...</nav>
  <div>Article</div>
</body>
Passes
<body>
  <a href="#main" class="skip-link">Skip to content</a>
  <nav>... 40 links ...</nav>
  <main id="main">Article</main>
</body>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on bypass (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.