2.1.2 No Keyboard Trap Level A

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

*Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

[View on W3C.org]

Testing & Remediation

How to test: Keyboard Navigation Open your website up and begin navigating with only the keyboard. Use the Tab and/or Shift + Tab keys to navigate through the page. Ensure you don't get stuck anywhere that requires you to use a mouse to exit. If your site utilizes any alerts, modal dialog boxes, dropdown menus, or other interactive elements, trigger those and verify that you can use the Tab and/or Shift + Tab keys continue to work. Also check to see if there is a way for the user to move away from the element (eg. a close control or using the ESC key). Be sure to test any 3rd party tools or content that your site is using, as they can be a common place where a keyboard trap happens. Screenreader Navigation Open your assistive technology of choice (JAWS, VoiceOver, etc) and follow the same steps as above. How to remediate: If you identify a place where a keyboard trap occurs, you'll need to do a little digging into your code to find what you need to fix. Generally speaking, keyboard traps can be avoided by by using a combination of semantic HTML, tabIndexaria attributes and some Javascript.

Questions and Answers

How do I navigate a website with my keyboard?

I've been reading about how I need to make sure my site can be navigated with a keyboard. Honestly, I'm not even sure where to start because I don't know what button I would hit on my keyboard. How do I navigate a website with...