Accessibility guide

Keyboard Accessibility: Navigation, Focus and Skip Links

Many people cannot use a mouse — including screen-reader users, people with motor disabilities and anyone using a keyboard by preference. WCAG requires that everything you can do with a mouse you can also do with a keyboard. This guide explains keyboard navigation, focus order, visible focus, skip links and the traps to avoid.

Reviewed by the EAA Navigator team

TL;DR

  • WCAG requires all functionality to be operable with a keyboard, not just a mouse or touch.
  • The focus order must be logical and match the visual order, and the currently focused element must be clearly visible.
  • A keyboard trap — where focus gets stuck and cannot move on — is a serious barrier and a common failure.
  • Skip links let keyboard and screen-reader users bypass repetitive navigation and jump to the main content.
Get the WCAG ChecklistBrowse all guides

In this guide

What this covers

  • What keyboard accessibility means and who depends on it.
  • Focus order and why it should follow the visual reading order.
  • Visible focus indicators and why removing them is a common, serious failure.
  • Skip links and keyboard traps — what they are and how to handle them.

What matters

Common pitfalls

  • Removed focus outlines: styling away the focus ring (for example with CSS that hides the outline) leaves keyboard users unable to see where they are. Provide a clear, visible focus indicator instead.
  • Illogical focus order: when the tab order jumps around the page rather than following the visual order, the page becomes confusing and hard to operate.
  • Keyboard traps: modals, menus and embedded widgets that capture focus and never release it stop users from continuing — a direct WCAG failure.
  • Mouse-only controls: custom dropdowns, sliders and "click" handlers that ignore the keyboard make functionality unreachable for keyboard users.
  • Missing skip link: without a "skip to main content" link, keyboard users must tab through the entire navigation on every page.

Across web accessibility, Level AA of WCAG 2.2 is the working target, and for the EU it is incorporated into the harmonised standard EN 301 549.

What to do

What to do next

  1. Put the mouse away and tab through your page: you should be able to reach and operate every control in a logical order.
  2. Make sure the focus indicator is always clearly visible — never remove the outline without replacing it with something equally clear.
  3. Check that focus order follows the visual reading order, and fix any places where it jumps unexpectedly.
  4. Add a skip link at the top of the page so users can jump straight to the main content.
  5. Test modals, menus and custom widgets for traps: focus should move in, stay within while open, and return sensibly when closed.

For the standard itself, see the WCAG explainer; to put it into practice, work through the WCAG 2.2 AA checklist.

FAQ

Common questions

What is keyboard accessibility?
It means everything on your site can be operated using only a keyboard, with no mouse required. WCAG requires this because many people — including screen-reader users and people with motor disabilities — navigate by keyboard.
What is a keyboard trap?
A keyboard trap is when focus moves into a component — often a modal, menu or embedded widget — and then cannot be moved out using the keyboard. It is a WCAG failure because it can leave a user stuck and unable to use the rest of the page.
Why do I need a visible focus indicator?
Keyboard users rely on the focus indicator to see which element is currently selected. If it is removed or hidden, they cannot tell where they are on the page. WCAG requires a visible focus indicator, so never style it away without providing a clear replacement.
What is a skip link?
A skip link is usually the first focusable element on a page — a "skip to main content" link that lets keyboard and screen-reader users bypass the repeated navigation and jump straight to the main content. It is often visually hidden until it receives focus.

Make your site accessible

Start with the WCAG 2.2 AA checklist, then work through the guides to fix what you find.

Get the WCAG ChecklistTry the contrast checker

This is guidance, not legal advice

This guide is here to help you understand web accessibility and how WCAG, the EAA and the ADA apply in practice. It is not legal advice. For decisions specific to your business, confirm with the official sources we link or a qualified adviser.

Sources

  1. [1]Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation)retrieved 9 Jun 2026
  2. [2]WCAG overview (W3C Web Accessibility Initiative)retrieved 9 Jun 2026
  3. [3]Directive (EU) 2019/882 — European Accessibility Act (EUR-Lex)retrieved 9 Jun 2026
  4. [4]EN 301 549 v3.2.1 — harmonised ICT accessibility standard (ETSI)retrieved 9 Jun 2026
  5. [5]US DOJ ADA Title II web accessibility rule fact sheetretrieved 9 Jun 2026
  6. [6]WebAIM Million 2025 — accessibility of the top 1,000,000 home pagesretrieved 9 Jun 2026
  7. [7]Overlay Fact Sheet — why overlays do not deliver complianceretrieved 9 Jun 2026

The Accessibility Brief

Subscribe to The Accessibility Brief

We watch the standards so you don't. Plain-English WCAG, EAA and ADA updates, free.

No spam. Unsubscribe anytime.

Keyboard Accessibility: Focus Order, Visible Focus & Traps | EAA Navigator · EAA Navigator