Keyboard

For keyboard-only users

Make sure users can interact with your page using the keyboard alone.

Keep focus states clear and predictable

Show clearly which field is selected, but don’t change anything until the user takes action. Source: WCAG 2.1: On focus, WCAG 2.1: Focus visible

Make shortcuts simple and standard

Use standard, simple shortcuts that work with one hand and don’t interfere with existing system shortcuts.

Single key shortcuts

When using single-letter shortcuts (like ‘R’ for reply):

• Always provide a way to turn them off
• Let users change key assignments
• Avoid conflicting with speech input

Example: A user typing “right now” shouldn’t trigger the ‘R’ shortcut.

Think: Speech-to-text users need to type letters without triggering commands. 


Source: WCAG 2.1: Character key shortcuts

Make keyboard navigation logical

Tab order should follow natural reading order:

• Left to right
• Top to bottom
• Same pattern on every page

Example: Menu → Search → Main content → Sidebar → Footer

Think: Moving through a page with Tab should feel natural and predictable.

Source: WCAG 2.1: Focus order, WCAG 2.1: Meaningful sequence

Add a skip link for keyboard users

Add a hidden link at the top that appears when tabbing, letting keyboard users skip straight to the main content. Source: WCAG 2.1: Bypass blocks