WCAG 2.1.1 — Keyboard Trap Present

Who Is Affected

Users who navigate with keyboards instead of a mouse, including people with motor disabilities, users of screen readers, and anyone who prefers keyboard navigation for efficiency. When trapped, these users cannot continue using your website.

What This Means

A keyboard trap occurs when a user can Tab into an interactive element (like a modal dialog, dropdown menu, or embedded widget) but cannot Tab out of it using standard keyboard commands. The focus becomes "stuck" inside the element, preventing the user from reaching other parts of the page.

This typically happens with poorly coded modal dialogs, third-party widgets, or custom interactive components that don't properly manage keyboard focus. Users become trapped and cannot complete their tasks or even close the problematic element.

Fix: CMS / Theme

Most keyboard traps are caused by JavaScript components in your theme or plugins that don't properly handle focus management.

For modal dialogs and popups:

1. Ensure modals have a close button that receives focus when opened
2. Trap focus within the modal while open (cycling through only the modal's interactive elements)
3. Return focus to the trigger element when the modal closes
4. Allow Escape key to close the modal

In Joomla:

1. Check Extensions → Modules for any custom modal or popup modules
2. Review template overrides in Templates → Your Template → HTML
3. Test third-party extensions like lightboxes or contact forms
4. Update or replace any components that create keyboard traps

In WordPress:

1. Review active plugins, especially those adding popups, sliders, or forms
2. Check Appearance → Widgets for embedded content
3. Test your theme's built-in modal features (search overlays, mobile menus)
4. Update or replace problematic plugins

Fix: Content Editor

If the trap is caused by embedded content on specific pages:

1. Identify the page containing the keyboard trap
2. Look for embedded widgets, iframes, or custom HTML blocks
3. Test the element by tabbing through it with keyboard only
4. If the element traps focus, either:
   • Remove the embedded content
   • Replace with an accessible alternative
   • Add tabindex="-1" to make it non-focusable (if interaction isn't required)

Testing process:

1. Load the page in a browser
2. Use Tab key to navigate to the problematic element
3. Continue tabbing to see if focus moves beyond the element
4. Try Shift+Tab to move backward
5. Try Escape key to exit

Standard Reference

WCAG 2.1 Success Criterion 2.1.1 — Keyboard, 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.

• W3C Understanding SC 2.1.1
• WCAG Technique G21 — Ensuring users are not trapped in content
• WCAG Failure F10 — Keyboard trap in content