Keyboard navigation and visible focus
A keyboard-accessible site lets you reach and activate everything with Tab, Enter and arrow keys. It is essential for people who don’t use a mouse and for many assistive technologies.
The key rules
- Logical order: tab order follows visual order and HTML source; avoid positive
tabindex. - Visible focus: at least 3:1 contrast against the background; never remove
outlinewithout a replacement. - Skip link: first focusable element, leading to the main content.
- No traps: users must be able to leave any component (modal, menu) by keyboard, with Esc where relevant.
- Focus not obscured: a fixed header must not cover the focused element (WCAG 2.4.11).
Code example
<a class="skip-link" href="#main-content">Skip to main content</a>
<main id="main-content" tabindex="-1">…</main>
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
html { scroll-padding-top: 6rem; }How to test
Unplug the mouse. Go through the page with Tab then Shift+Tab. Check every interactive element is reachable, focus is visible and you can close every overlay. RGAA criteria: 7.3, 10.7, 12.7, 12.8, 12.9.
Frequently asked questions
Should I use tabindex?
Mostly rely on native elements. Limit tabindex to 0 or -1; positive values disrupt natural order.
Is a skip link mandatory?
RGAA requires a quick-access mechanism to the main content (criterion 12.7); a skip link is the most common solution.