Skip to main content

Back to Guidelines

What is No Keyboard Trap?

Keyboard focus must not be trapped in any component; users can move focus away using standard keys.

Keyboard focus must not be trapped in any component; users can move focus away using standard keys.

Keyboard and screen reader users.
People who need predictable interactions.
Users who benefit from visible focus and clear labels.

Good vs Bad Examples

Use the tabs to compare the accessible pattern with the example to avoid.

Good Example of No Keyboard Trap

Modal dialog that can be exited with keyboard (Escape) and tabbing continues.

html

<dialog open>
  <button autofocus>Close</button>
</dialog>

Why this is correct (developer logic):

Provides an accessible and predictable interaction.
Works better for keyboard and assistive technology users.
Matches the intended WCAG requirement for this page.

Implementation Checklist

Progress0 / 5 completed (0%)

Keep the interaction predictable and easy to understand.
Test with keyboard and screen reader navigation.
Make sure focus is visible and easy to track.
Avoid hidden, unexpected, or unnecessary repetition.
Confirm the example meets the intended accessibility requirement.

Knowledge Check

Answer Yes or No to test your understanding of no keyboard trap.

Score: 0 / 3 · Answered: 0 / 3

Does the good example demonstrate no keyboard trap correctly?

Is the bad example acceptable for no keyboard trap?

Should this pattern be checked with keyboard and screen reader testing?