This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

Accessibility

What is a keyboard trap on a website?

A keyboard trap is a spot on a website where the keyboard highlight gets stuck: anyone who tabs into it never gets back out with the keyboard alone. For people without a mouse, the page ends right there — continuing to read, ordering, or submitting the form becomes impossible. Common causes are date pickers, chat windows, embedded videos, and image galleries. WCAG criterion 2.1.2 forbids such traps.

How a keyboard trap arises

Most keyboard traps aren't built on purpose by anyone. They arise from ready-made third-party components: a date picker captures focus so its calendar days can be reached with arrow keys — and forgets the way out. A chat window holds the highlight inside its input field. A custom-built dialog box with no close button lets focus circle between its two buttons. This never stands out with a mouse, since mouse users simply click elsewhere. That's exactly why keyboard traps often go undiscovered for months, while keyboard users give up on the page at the same spot the whole time.

How the audit service measures keyboard traps

The audit service actually presses the Tab key on your page and logs every stop with its position and element. If the highlight circles between the same few elements without reaching the end of the document, it treats that as a keyboard trap. The report names the elements involved and attaches a supporting screenshot. If focus circles inside an embedded third-party frame, the report notes the case for manual review — a machine can't reliably decide there whether a way out exists. If the measurement reaches the end of the document with no circling, the criterion counts as passed.

Examples

Dialogue without an outcome

Not met

<div role="dialog" aria-modal="true">
  <p>Newsletter?</p>
  <input type="email">
  <!-- kein Schließen-Knopf, Escape ohne Wirkung -->
</div>

Passes

<dialog id="nl">
  <p>Newsletter?</p>
  <input type="email">
  <button type="button" onclick="nl.close()">Schließen</button>
</dialog>
<!-- dialog schließt mit Escape von selbst -->

From each area, the keyboard must come out again: with Tab, Escape or a described way.

Tab all the way through your homepage once, down to the footer — if you get stuck anywhere, you've found the trap.
Check every newly added third-party component individually: date picker, chat window, carousel, video player.
Ask your agency to give every dialog box a keyboard-reachable way to close it, at minimum the Escape key.
Test again after every update to the built-in components — a new version can introduce a trap.

Deutsche Fassung dieser Seite

FAQ

What is a keyboard trap, explained simply?

A keyboard trap is a spot where the keyboard highlight gets caught: the Tab key keeps leading back to the same few elements, and the rest of the page is unreachable without a mouse. For people who work with the keyboard alone, the website ends right there — they can neither keep reading nor place an order or send an inquiry.

Which elements most often cause keyboard traps?

Embedded third-party content is affected most often: date pickers, chat windows, video players, image galleries, and carousels. They capture focus so their own controls work, and forget the way out. Custom-built dialog boxes with no close button also belong to this group. So check the keyboard operation of the entire page again after every newly added component.

How does the audit service detect a keyboard trap automatically?

The audit service actually presses the Tab key on the page until the end of the document is reached, and logs every stop. If the highlight circles between the same few elements without reaching the end, it treats that as a keyboard trap and names the elements involved in the report. If focus circles inside an embedded third-party frame, the case is noted for manual review.