Understanding WCAG 2.0: 2.1.2 – No Keyboard Trap

The next standard we’ll explore in our series on understanding WCAG 2.0 is 2.1.2, No Keyboard Trap. This standard is required for WCAG level A compliance, which is part of what Section 508 requires. Here’s the complete text:

2.1.2 No Keyboard Trap: 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. (Level A)

This one won’t directly impact most of our Drupal users, but it does impact anyone choosing software or building their own.

People with poor vision have difficulty using the mouse, since they can’t necessarily see where it’s pointing. Instead, they’ll often navigate using the keyboard, often by using the tab key to move between elements on the website. Here’s an example:

Screenshot of the Codepen edit interface

You can also view this interface directly on CodePen.

CodePen is a great site for doing some quick testing, and I use it all the time when troubleshooting. But it traps your keyboard, failing this accessibility requirement. CodePen is trying to be helpful here – when editing on the page, it’s helpful to be able to indent your code like you would normally in a text editor. But this has the nasty side effect of meaning that once you’re editing on the page, you can’t tab out of that element. For CodePen to be compliant, they’d need to advise us on an alternate method to move between edit boxes using the keyboard.

So if you’re programming something, working with a vendor, or otherwise procuring software for use at Lane, just be aware that you need to make sure there isn’t an element on the page (or within desktop software!) that can trap the keyboard and keep someone from using the page successfully.

If you’d like to read more about keyboard trapping, you may also be interested in this technique, which provides examples and more detail.

Interested in more? Check out the listing of all the posts in this series.