Keyboard access to a website is key to the usability of your site. All interactions and information that can be accessed with a mouse must be accessible with just a keyboard. This doesn’t mean everyone who can’t use a mouse will use a keyboard, but alternative AT inputs use keyboard-like inputs to navigate the web.

Testing

  1. Identify all interactions on the page.
  2. Using the tab, enter, and space bar, navigate the page and ensure each input and interaction can be triggered.
  3. Make sure the tab order of the page is logical and follows the visual order of elements on the page.
  4. Check that the focus is always visible when moving through the page with the tab key.
  5. Make sure you can tab through the page and get back the address bar.
  6. Keyboard users must be able to easily use and dismiss modal dialog boxes, lightboxes, or other pop-ups.
  7. If an interaction reveals hidden content.
  8. Check for title tags providing information not on the screen.
  9. Check that the focus never goes to elements that won’t be available to somebody using a mouse.

Examples

Link to nowhere 1

Link to nowhere 2

Reveal Hidden Content

<a href="#">Link to nowhere 1</a>
<a href="#">Link to nowhere 2</a>
<a href='javascript:$("#hiddenContent").show().focus();'>
	Reveal Hidden Content
</a>
<div id="hiddenContent"
	 style="display:none;"
	 tabindex='-1'>
	This div was hidden, now it's not!
</div>

Avoid using tabindex of >= 1 as this will disrupt the normal tab order of the page. tabindex of -1 is only appropriate when autofocusing an element not normally interactive.

Keyboard Trap

hidden

Select to disable keyboard trap

Select to disable keyboard trap

Select to disable keyboard trap

Select to disable keyboard trap

hidden

This is an example of a keyboard trap. Focus moves in a loop making the rest of the page inaccessible. A quick test is to tab through the page quickly and ensure you can get focus back to the address bar.