- 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
- Spacebar: Activate radio buttons and check boxes and buttons
Note: Activate Keyboard Navigation in Mac Browsers
Good overview: Keyboard Navigation Overview on WebAIM
- radio button
Demo: Codepen Navigate with keyboard
Browsers add a visible focus to an element but some CSS resets add:
This makes it very hard to navigate a site.
:focus where you add
:hover in your CSS.
Add 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 tabindex: it makes it very hard for keyboard users to access the menu.
Use focusable elements to toggle
- not a div
- no empty elements
- but use a <button>
- Working: WordCamp US
Close with Esc!
Demo: The Incredible Accessible Modal Window by Greg Kraus (with the code also on GitHub)
Avoid a keyboard trap