Goal
Ensure that all functionality on a web page is operable using a keyboard alone, without requiring a mouse. This is essential for users with motor disabilities, or anyone who cannot use a pointing device.
Users should be able to:
- Navigate through links, buttons, and form controls using Tab, Shift+Tab, arrow keys, or other standard keyboard interactions.
- Activate functionality (like opening menus, submitting forms, or triggering scripts) using Enter, Space, or other keyboard keys.
Key points:
- No interactive content should be accessible only via mouse.
- Custom widgets (modals, sliders, menus) must support keyboard controls.
- Focus order must be logical and visible.
Example Issues and Fixes
Button only clickable with mouse
Fail
<div class="flex w-full flex-col items-center justify-center gap-4 p-8">
<div x-data="fastFuzzySearchTrigger" x-on:click="showSearch" class="bg-blue-600 text-white font-semibold px-4 py-2 rounded-full">Search</div>
</div>
Search
Pass
<div class="flex w-full flex-col items-center justify-center gap-4 p-8">
<button x-data="fastFuzzySearchTrigger" x-on:click="showSearch" class="bg-blue-600 text-white font-semibold px-4 py-2 rounded-full">Search</button>
</div>
Quick Checklist
- All interactive elements are reachable via Tab or arrow keys.
- All functionality can be activated using keyboard keys (Enter, Space, arrows, etc.).
- Custom widgets support keyboard navigation and activation.
- Focus is visible and clearly indicates the currently selected element.
- Test with only a keyboard to ensure everything works.