Keyboard navigation, 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
• Spacebar: Activate radio buttons and check boxes and buttons

First: Activate Keyboard Navigation in Mac Browsers

Good overview: Keyboard Navigation Overview on WebAIM

Focusable HTML elements

• a
• button
• input
• textarea
• select
• radio button
• checkbox

Try it yourself on: Exercise keyboard navigation

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 with a keyboard only.

Add :focus where you add :hover in your CSS.

Tab index

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 laborious for keyboard users to access the menu.