Workshop Keyboard Navigation

Short workshop on how to navigate a website with a keyboard only.

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

Keyboard Navigation Overview on WebAIM

Focussable elements

  • a
  • button
  • input
  • textarea
  • select

Demo: Codepen Navigate with keyboard

Note: Activate Keyboard Navigation in Mac Browsers

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: Donald J. Trump

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

In Gravity Forms

Skip Links

Special links to help keyboard users to jump quickly to content.

Demo: rianrietveld.com

Fixing “Skip to content” links

Dropdown menu

Do the sub menus show on focus?

Code example:

Hamburger menu

Use focusable elements to toggle

Modals

Close with Esc!

The Incredible Accessible Modal Window, Version 3

Avoid a keyboard trap