CodeParkEvery action you can do with a mouse must also work with a keyboard. This is WCAG 2.1.1, a level A rule. Keyboard users include blind users, people with tremors, switch users and many power users.
The keys users expect:
- Tab / Shift+Tab: move to the next or previous interactive element.
- Enter: follow a link or press a button.
- Space: press a button, tick a checkbox, or scroll the page.
- Arrow keys: move inside one widget, such as radio buttons, tabs, menus, sliders or a listbox.
- Escape: close a dialog, a menu or a popup.
- Home / End: jump to the first or last item in a list-like widget.
The page also needs these:
- Visible focus: a clear outline shows where you are.
- Logical order: Tab follows the reading order, which is the DOM order.
- No keyboard traps: you can always Tab away, except inside a modal on purpose.
- A skip link to jump past long navigation.
Native <button>, <a href> and form fields give you most of this for free. Custom widgets must add it themselves.
- Everything that works with a mouse must work with a keyboard.
- Tab moves between controls, and arrow keys move inside a widget.
- Enter activates links and buttons, Space activates buttons and checkboxes, and Escape closes popups.
- Focus must be visible and must follow a logical order.
- Users must never get stuck in a keyboard trap.