Navigation with keyboard only

The basics

Note: Browser keyboard navigation in macOS on The A11Y Collective.

Good overview: Keyboard Navigation Overview on WebAIM

Focusable elements

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:

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