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.



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);