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:

Fixing “Skip to content” links

Dropdown menu

Do the sub menus show on focus?

Code examples

Hamburger menu

Use focusable elements to toggle

Modals

Close with Esc!

The Incredible Accessible Modal Window, Version 3

Avoid a keyboard trap