Note
Ensure that keyboard users can navigate into, use, and exit any interactive component (like modals, forms, or widgets) without getting trapped. If a component requires specific key commands to exit, clear instructions must be provided.
Key Points
- Users must be able to move focus both into and out of components using only the keyboard (e.g.,
TabandShift + Tab). - If a feature requires non-standard keys (like
Escor arrow keys), the page must inform the user. - Applies to modals, dialogs, menus, custom widgets, and iframes.
- Prevents users from getting “stuck” in one part of the interface — especially important for screen reader or switch device users.
Short Summary
Every interactive element must let keyboard users move focus freely.
No one should get “trapped” in a pop-up or custom widget without being able to leave it.
Example Issues and Fixes
Keyboard Trap in Modal
Fail
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div x-data="passModal">
<button class="bg-blue-600 text-white font-semibold px-4 py-2 rounded-full" @click="show">Open Modal</button>
<div x-show="open" @keydown.escape.window="hide" class="fixed inset-0 flex items-center justify-center bg-black/50">
<div class="w-80 rounded bg-white border border-gray-300">
<div class="flex justify-between items-start bg-gray-100 border-b border-gray-300 px-4 py-2">
<h2 class="!text-sm !font-semibold !m-0 !font-primary">Modal Title</h2>
<button @click="hide" class="text-sm font-semibold underline">Close</button>
</div>
<div class="p-4">
<input type="text" placeholder="Enter name" class="w-full border px-4 border-gray-300 h-12 rounded" />
</div>
</div>
</div>
</div>
</div>
Modal Title
Pass
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div x-data="passModal">
<button class="bg-blue-600 text-white font-semibold px-4 py-2 rounded-full" @click="show">Open Modal</button>
<div x-show="open" x-trap="open" @keydown.escape.window="hide" class="fixed inset-0 flex items-center justify-center bg-black/50">
<div class="w-80 rounded bg-white border border-gray-300">
<div class="flex justify-between items-start bg-gray-100 border-b border-gray-300 px-4 py-2">
<h2 class="!text-sm !font-semibold !m-0 !font-primary">Modal Title</h2>
<button @click="hide" class="text-sm font-semibold underline">Close</button>
</div>
<div class="p-4">
<input type="text" placeholder="Enter name" class="w-full border px-4 border-gray-300 h-12 rounded" />
</div>
</div>
</div>
</div>
</div>
Modal Title
Quick Checklist
- Users can enter and leave all widgets and modals using
TabandShift + Tab. - If custom key interactions are needed, they are clearly explained.
- Pressing
Escor an equivalent key closes modals or pop-ups. - No element traps focus unintentionally.
- Tested with keyboard only (no mouse).