Keyboard Traps

8 minute read

Last updated: Mar 12, 2026

Summary

Many people use keyboards, or devices that rely on keyboard focus, to navigate the web. Keyboard traps occur when a person who uses a keyboard for navigation cannot move the focus away from an interactive element, such as a form field, link, or dialog window. Keyboard users become “trapped” and cannot reach other content on the page or complete an action.

Overview

Keyboard traps restrict keyboard navigation to a specific part of the page without the possibility of exiting and continuing with the rest of the page navigation. Avoiding keyboard traps helps to ensure that all the content on the web page is accessible with the keyboard. People who use a keyboard for navigation are affected by keyboard traps because they cannot use a mouse or other pointing device to exit the trap and access the rest of the content. Keyboard traps can make a page unusable for these individuals, so it is a requirement that all content on a web page is free of keyboard traps.

Every interaction that a mouse can control should also be controllable by a keyboard command. It is critical to ensure that if an interactive element receives focus, a keyboard user can move the focus away from that element.

Who is Helped

Avoiding keyboard traps helps people who navigate the web with a keyboard or other devices that rely on keyboard focus. Avoiding keyboard traps helps all of these individuals successfully navigate the entire website and complete all tasks.

People with motor disabilities, temporary injuries, and older adults may have difficulty using the mouse and must rely on the keyboard.
People who are blind or severely visually impaired are users of screen readers and browse the web with a keyboard.
People with cognitive or developmental disabilities may have difficulty understanding complex interfaces or following complicated interaction sequences. If these individuals are keyboard navigators, they may be unable to complete a task or navigate a page when there is a keyboard trap.

Guidelines

Ensure users can enter and exit all interactive elements when using a keyboard for navigation.

Examples of Keyboard Traps

The Tab key does not advance: The user cannot leave an input field in a form using the Tab key until they enter an expected value.
- Example: Tab key gets stuck in an element example (A11y Solutions)
Loop trap: The user cannot exit a set of elements using the Tab key. They can only move through the elements from top to bottom or right to left in a loop.
- Example: Loop keyboard trap example (Chicago Design System)
Unreachable button: A modal window has a close button (X), but the keyboard cannot activate it, nor does the Escape key work. The modal window can only be closed with the mouse.
Misuse of the Tab key to activate an element: When accessing an element in a list of links with the Tab key, the screen to which the link redirects opens automatically. This action prevents the keyboard navigator from reaching the rest of the page. See Change of Context for more information.
- Example: Tab key keyboard trap example (CSUN)
Stuck on an element: Keyboard users cannot navigate from an interactive element because the onKeyDown event has been omitted or canceled.
- Example: Keyboard trap - Non-Compliant Example 1 (CodePen)

Methods to Avoid Keyboard Traps

Keyboard traps are usually caused by modifying an interactive element with JavaScript to alter or override its native behavior. This problem commonly occurs when using onBlur, onChange, onFocus, or keyPress events to modify elements. You must be careful when implementing JavaScript to avoid creating keyboard traps.

There are three primary methods to avoid keyboard traps:

Preferred: Use interactive elements that are keyboard navigable.
Provide a custom (non-standard) keyboard shortcut to exit the element.
Provide a custom element or function to exit the element.

Method 1: Use interactive elements that are keyboard navigable

Verify that users can enter and exit all interactive elements using the standard keyboard keys without trapping users. The table below describes the basic commands needed for keyboard navigation.

Keystroke	Function
`Tab`	Navigate moving forward to interactive elements or controls such as buttons, links, or form fields
`Shift+Tab`	Navigate moving backward to interactive elements or controls such as buttons, links, or form fields
Arrow Keys	Navigate between composite (grouped) controls such as menu items inside a menu group, tabs in a tablist, or a group of radio buttons or checkboxes
`Enter` or `Spacebar`	Activate or open a button, link, or interactive widget
`Spacebar`	Select or unselect a checkbox or radio button
`Escape`	Close a newly opened overlay, such as a modal dialog window, popup, or dropdown menu

Table 1: Standard Keys for Keyboard Navigation

The Shift + Tab key combination allows navigation backward and sometimes makes it possible to exit an element and escape a keyboard trap. However, you should not use this method to avoid a keyboard trap, as it does not provide a way to navigate past the trap.

See Keyboard Testing in this WebAIM article to learn about standard keyboard navigation for common online interactions.

See Using the Keyboard for more information.

Method 2: Provide custom (non-standard) keyboard shortcuts to exit elements

Custom keyboard shortcuts can provide a way to exit what would otherwise be a keyboard trap. Use caution when creating a custom shortcut. Keyboard shortcuts can break the normal operation of a keyboard interface if not implemented correctly, as many key combinations are already in use. In addition, custom shortcuts cannot match any shortcut keys or key combinations used by operating systems, browsers, other software applications, or assistive technologies. Ensure users are informed about how to use the keyboard shortcuts before they reach the keyboard trap. For these reasons, they are not a preferred method for escaping keyboard traps.

See Keyboard Shortcuts for more information.

Examples of Custom Keyboard Shortcuts

Custom Key Combination (preferred): Use specific non-standard key combinations to close an element. For example, use Ctrl + Q or Alt + K as combinations to exit a modal.
Single Custom Key (avoid): Use a single key that is unique to the website and communicate its function to users. For example, use the Z key to close modals.; Suppose an element has a specific function. In that case, the element might be closed by pressing a letter key that is associated with that function (for example, pressing S for a “Search” element).; Single-character shortcuts can interfere with the operation of assistive technology, especially for people who use voice control software. For this reason, you should avoid single-character shortcuts. See Keyboard Shortcuts for more information on this potential problem.

This Accessible Date Picker (Github/haltersweb) shows an example of user-provided instructions for navigating a date picker element. (Open the date picker by clicking “Choose Date” and then click “keyboard shortcuts.”)

Method 3: Provide a custom element or function to exit the element

Adding a custom (non-standard) element can provide the functionality to exit an interactive element. The specific type of custom element used depends on the interactive element that caused the keyboard trap. Adding non-standard functionality to an element requires you to provide instructions to the user explaining how to enter and exit from these elements using the keyboard. Provide the instructions before entering the element and ensure they are also available while the user navigates within the element.

Examples of Custom Elements

Modal window: If a modal doesn’t have a close button (X) and the Escape key cannot close the element, a custom “Cancel” button can be added to cancel the operation and close the modal.
Elements with multiple steps: Allow the last step to close the component while completing the action. Examples include using a “Finish” or “OK” button to close the component.

How to Test

The best way to check for keyboard traps is to navigate the page with the keyboard.

Identify interactive elements navigated using the keyboard. For example, links, dropdown menus, tree views, form fields, popups, modals, light boxes, etc., are all interactive elements. Testers can use ANDI’s Focusable Elements module or a single-purpose tool like the Force Focus bookmarklet (HolisticA11Y) to identify interactive (focusable) elements.
Navigate through all the interactive elements using the standard keys:
- Use the Tab and Arrow keys to navigate to and through the page’s interactive elements.
- Ensure you can activate all links and buttons using the Enter key or space bar.
- Verify that all input fields and form elements are accessible via the keyboard.
- Ensure you can open, close, and navigate through all pop-up windows or drop-down menus using only the keyboard.
If it is not possible to exit all elements using the standard keys:
- Determine if there are any custom keyboard shortcuts.
- Check that clear instructions are provided on how to exit elements.
- If there are instructions, try leaving the elements by following the instructions while navigating with the keyboard.
If it is not possible to exit all elements using standard keys and no custom keyboard shortcuts are provided:
- Determine if there is any other functionality to exit keyboard traps.
- Verify that the alternative functionality is easy to understand or has clear instructions.
- If there is an easily understood functionality, try exiting the elements while navigating with the keyboard.
- If there are instructions, try exiting the elements by following the instructions while navigating with the keyboard.
Verify that:
- Users are never trapped in an element while navigating with the keyboard.
- Users are never trapped in a loop while navigating with the keyboard.
- An element receiving keyboard focus does not automatically redirect users to another page or location in a way that prevents keyboard users from navigating past that element.