What are Keyboard Traps?
Summary
Keyboard traps occur when users can enter a web element using a keyboard but cannot exit it without a mouse, creating a critical accessibility barrier. This issue primarily impacts users who rely on keyboard-only navigation, making it essential to ensure all interactive components are fully navigable in both directions using the keyboard.
Overview
This article explains what keyboard traps are, why they are a violation of WCAG guidelines, who is most affected by them, and how to prevent them. It emphasizes the importance of designing web content that supports full keyboard navigation to ensure accessibility for all users.
What Is a Keyboard Trap?
WCAG 2 guideline 2.1.2 states that there should be no keyboard traps. A keyboard trap occurs when a user can get into a component or element on a web page by using the keyboard but cannot get out of that component or element through the use of the keyboard.
Who Is Affected?
Keyboard traps primarily affect two types of users.
- Users who are blind or who have a significant visual impairment cannot use the mouse for navigation. Consequently, their only method of navigating a web page is by using the keyboard.
- Users who have limited or no use of their hands cannot navigate a page using the mouse. There are several ways in which these individuals can get around a page, but these methods primarily involve keyboard navigation in some form. For example, users of dictation software are actually giving keyboard commands to programs by using their voices.
How Can Keyboard Traps Be Avoided?
Awareness is the primary way to avoiding keyboard traps. Make sure that all elements of your web page can be gotten into, and out of, by using only the keyboard. Be especially mindful of this when using JavaScript and when embedding videos. Always approach your page with the question, “How can I navigate this page if I can’t use a mouse?”---
Applies To (Environment)
Product / Service: Siteimprove Accessibility
Version (if applicable): All versions
Platform / OS / Browser: All web platforms and browsers
User role / permissions: Developers, content editors, accessibility specialists
Prerequisites: Basic understanding of WCAG and keyboard navigation principles
Related Standard
Did you find it helpful? Yes No
Send feedback