A11Y Solutions
Provides auto-suggestions when entering text

    Keyboard Trap

    A keyboard trap occurs when focus is moved into an interactive element or control with a keyboard but cannot move focus away using a keyboard alone.

    The Problem

    Users that rely on keyboard navigation get stuck in an interactive element, unable to navigate away.

    The Solution

    Take care when using JavaScript event listeners for blur and key[down|up|press] events paired with preventDefault. Be sure to constrain to only the events you need, ensure you've built in a way to escape.

    Related Articles

    Live Examples

    Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

    Please note that this Before example contains inaccessible code, use this link to skip to the After Live Example



    Code Comparison

    Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.


    Comparing /examples/focus/keyboard-trap/before/index.html to /examples/focus/keyboard-trap/after/index.html

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Accessibility Solutions - Focus - Keyboard Trap</title>
    <link rel="stylesheet" href="../../../presentation.css" />
    <main id="main" role="main">
    Contrived example that requires an action on keypress of the "Q" button
    in <a href="#" class="trapped">this link</a>. Velit ea optio est
    adipisci beatae alias porro voluptatibus culpa dicta veniam, esse quidem
    nihil odio voluptatem error tempora nostrum minima magni et.
    Deleniti possimus <a href="#">corrupti mollitia</a> cupiditate totam
    facere molestias, sunt amet exercitationem inventore odio veritatis
    eaque doloribus esse tenetur officia, odit hic obcaecati harum nostrum
    blanditiis ratione, fuga in?
    <script src="keyboard-trap.js"></script>


    Comparing /examples/focus/keyboard-trap/before/keyboard-trap.js to /examples/focus/keyboard-trap/after/keyboard-trap.js

    (function () {
    'use strict';

    const el = document.querySelector('a.trapped');

    el.addEventListener('keydown', (e) => {
    if (e.key === 'q') {

    console.log('keydown event - key: ' + e.key + ' code: ' + e.keyCode);