Keyboard Navigation Guide
Many users navigate with keyboard only. Ensure all functionality is accessible without a mouse.
Essential Keyboard Controls
TabMove to next focusable elementShift + TabMove to previous focusable elementEnterActivate buttons and linksSpaceActivate buttons, toggle checkboxesArrow KeysNavigate within components (menus, tabs, etc.)EscapeClose modals, dropdowns, cancel actionsHome / EndJump to first/last item in listsComponent Patterns
Dropdown Menu
Open with Enter/Space, navigate with arrows, close with Escape
Modal Dialog
Trap focus inside, return focus on close, close with Escape
Tab Panel
Arrow keys switch tabs, Tab moves into panel content
Accordion
Enter/Space toggles sections, arrows navigate headers
Carousel
Arrow keys cycle slides, announce current position
Custom Select
Space opens, arrows navigate, Enter selects, type-ahead search
Common Mistakes & Fixes
❌ Mistake
Removing outline:none without replacement
✓ Fix
Keep visible focus or add custom focus styles
❌ Mistake
Using div/span for clickable elements
✓ Fix
Use button or link with proper role
❌ Mistake
Positive tabindex values
✓ Fix
Use tabindex="0" or natural DOM order
❌ Mistake
Focus not returned after modal closes
✓ Fix
Track and restore focus programmatically
❌ Mistake
Keyboard traps in third-party widgets
✓ Fix
Test all embedded content for keyboard access