Complete Guide to Keyboard Accessibility (WCAG 2.1.1, 2.1.2, 2.4.7)

Approximately 8% of the population has a motor disability that may prevent them from using a mouse. Many screen reader users also navigate primarily via keyboard. If your website can't be used without a mouse, it fails multiple WCAG criteria.

Key criteria

• 2.1.1 Keyboard (A) — all functionality available via keyboard
• 2.1.2 No Keyboard Trap (A) — users can tab in and out of all components
• 2.4.3 Focus Order (A) — tab order follows logical reading sequence
• 2.4.7 Focus Visible (AA) — focused element has a visible indicator

Common failures

• Custom dropdown menus that only respond to mouse clicks
• Modal dialogs that don't trap focus inside when open
• Carousels/sliders that can't be controlled via keyboard
• Removing focus outlines with outline: none (the #1 keyboard accessibility mistake)
• Click handlers on non-interactive elements (divs, spans) without keyboard equivalents

How to test

The simplest test: unplug your mouse and try to use your website. Can you:

• Navigate to every link, button, and form field using Tab?
• Activate buttons and links with Enter or Space?
• Always see which element has focus?
• Escape from modals and menus?
• Use all custom widgets (dropdowns, tabs, accordions)?

The focus outline fix

Never do *:focus { outline: none; }. Instead, use :focus-visible to show outlines only for keyboard users:

:focus-visible { outline: 2px solid #4A90D9; outline-offset: 2px; }