The basics
- Tab: Move forward from link to link or to controls
- Shift + Tab: Move backward from link to link or to controls
- Enter: Activate links, buttons, or other interactive elements
- Arrow: Navigate radio buttons and select boxes and scroll up and down a page
- Space bar: Activate radio buttons and check boxes and buttons
Note: Browser keyboard navigation in macOS on The A11Y Collective.
Good overview: Keyboard Navigation Overview on WebAIM
Focusable elements
- a
- button
- input
- textarea
- select
- radio button
- checkbox
Try: keyboard exercise
Visible Focus
Browsers add a visible focus to an element but some CSS resets add:outline: 0;
This makes it very hard to navigate a site.
No visual focus: Exercise with keyboard with no visual focus
Add :focus where you add :hover in your CSS.
Tab index
Adds focus to an element:
- tabindex: 0 gives focus to items that wouldn't normally get focus and includes them into normal tab order
- tabindex: -1 gives focus to items that wouldn't normally get focus and/or removes items from the normal tab order
- tabindex: any positive integer gives focus and overrules normal tab order
Avoid hijacking the tab order with a positive tabindex: it makes it very hard for keyboard users to access for example the menu.
Skip Links
Special links to help keyboard users to jump quickly to content.
Demo: About Level Level