2.1.2: No Keyboard Trap
Guideline 2.1.2 "No Keyboard Trap" under WCAG 2.0 ensures that users can navigate to and away from all interactive elements on a webpage using only a keyboard. This guideline prevents situations where a user becomes trapped in an element, unable to navigate away using keyboard controls. Ensuring there is no keyboard trap is crucial for accessibility, allowing users with disabilities to navigate web content seamlessly.
Importance of 2.1.2: No Keyboard Trap Success Criterion
Keyboard traps can create significant accessibility barriers, especially for users who rely on keyboard navigation due to physical disabilities, visual impairments, or other conditions. When users become trapped in an element, such as a modal dialog or a form, they are unable to continue navigating the page, which can be frustrating and exclusionary. Ensuring there are no keyboard traps enhances usability and inclusivity, providing a better user experience for all users. It also aligns with accessibility standards, reducing legal risks and enhancing overall user satisfaction.
Primary Use Cases and Requirements Under Guideline 2.1.2: No Keyboard Trap (Level A)
Use Case 1: Modal Dialogs
Ensure that users can navigate into and out of modal dialogs using the Tab key without getting trapped.
How to Test: Open a modal dialog and use the Tab key to navigate through its content. Verify that you can navigate to all interactive elements within the dialog and then tab out of the dialog back to the main content. Ensure that pressing the Esc key closes the dialog.
Use Case 2: Forms and Input Fields
Ensure that users can navigate through all form fields and input areas using the keyboard without getting trapped in any field.
How to Test: Use the Tab key to navigate through all form fields. Verify that you can move forward and backward between fields and that the focus moves appropriately to the next field without getting stuck.
Use Case 3: Dropdown Menus
Ensure that users can navigate into and out of dropdown menus using the keyboard without getting trapped.
How to Test: Use the Tab key to focus on a dropdown menu and use the arrow keys to navigate through the options. Verify that you can close the dropdown and continue tabbing to other elements on the page.
Use Case 4: Sliders and Carousels
Ensure that users can navigate into and out of sliders and carousels using the keyboard without getting trapped.
How to Test: Use the Tab key to navigate to a slider or carousel. Use the arrow keys to move between slides and ensure you can tab away from the slider or carousel without getting stuck.
Use Case 5: Embedded Media Players
Ensure that users can navigate into and out of embedded media players using the keyboard without getting trapped.
How to Test: Use the Tab key to navigate to an embedded media player. Verify that you can access all controls (play, pause, volume) and then tab away from the media player back to the main content.
Use Case 6: Interactive Widgets
Ensure that users can navigate into and out of interactive widgets (e.g., accordions, tabs) using the keyboard without getting trapped.
How to Test: Use the Tab key to navigate to an interactive widget. Verify that you can interact with the widget and then tab away to other elements on the page.