Keyboard Navigation: ADA Requirements Explained
TL;DR
Keyboard navigation means users can access all functionality using only a keyboard (no mouse). Many disabled users cannot use a mouse and rely entirely on keyboard access.
What This Violation Means
Keyboard navigation allows users to interact with your website using only keyboard keys (Tab, Enter, Arrow keys, Escape, etc.). This is essential for people with motor disabilities who cannot operate a mouse, blind users who navigate by keyboard and screen reader, and power users who prefer keyboard shortcuts for efficiency.
Why Demand Letters Cite This Violation
- Many assistive technologies rely on keyboard commands as the primary input method
- It's easily testable (try navigating your site with Tab key only)
- Common failure points: dropdown menus, modal dialogs, custom widgets that trap focus
- WCAG 2.1 Level AA explicitly requires keyboard accessibility
- Plaintiffs can demonstrate in court by showing they physically cannot complete tasks
Real-World Example from Actual Demand Letters
A typical demand letter states: "The website's dropdown navigation menu cannot be accessed or operated via keyboard alone, preventing users who cannot operate a mouse from accessing site content. Additionally, the modal dialog on the product pages traps keyboard focus, requiring users to force-close the browser tab to escape. These issues violate WCAG Success Criteria 2.1.1 (Keyboard) and 2.1.2 (No Keyboard Trap)."
What the Law Says
- All functionality available via keyboard (2.1.1 - Keyboard)
- No keyboard traps - users can navigate away from any element using only keyboard (2.1.2 - No Keyboard Trap)
- Logical, sequential focus order (2.4.3 - Focus Order)
- Visible focus indicators so users can see where they are (2.4.7 - Focus Visible)
Exceptions exist for functionality that depends on the path of user movement (like freehand drawing), but these are rare.
Code Examples: Incorrect vs. Correct
❌ Incorrect Implementation
Dropdown menu that only opens on mouse hover with no keyboard alternative
Custom modal that traps keyboard focus with no escape method
Buttons using <div> instead of <button> that don't respond to Enter/Space
Carousel with no keyboard controls to navigate slides✓ Correct Implementation
Dropdown menu that opens with Enter/Space keys and closes with Escape
Modal with visible "X" button, Escape key to close, and returns focus to trigger element
Proper <button> elements that respond to Enter and Space keys
Carousel with Tab-accessible previous/next buttons and keyboard shortcuts documentedHow to Fix This Violation
DIY Approach
2. Press Tab repeatedly to move through all interactive elements
3. Ensure you can reach and activate everything (links, buttons, forms, menus)
4. Check for focus traps (places where Tab stops working)
5. Verify visible focus indicators exist (outline or highlight showing where you are)
6. Test that Escape key works to close modals/menus
Common fixes:
- Add tabindex="0" to custom interactive elements
- Ensure modals return focus to the trigger button when closed
- Add keyboard event handlers (onKeyDown) alongside mouse handlers (onClick)
- Use semantic HTML (
Related Accessibility Violations
Legal Disclaimer
This guide provides technical information about website accessibility violations based on our experience remediating WCAG issues. It is not legal advice and should not be relied upon as such. If you have received an ADA demand letter or are facing legal action, consult with an attorney who specializes in ADA defense. Laws regarding digital accessibility vary by jurisdiction and are subject to change. While we provide accurate technical guidance, we make no guarantees about legal compliance or outcomes.
Need Professional Help Fixing This Violation?
Our Houston-based team has 10+ years of experience remediating this exact violation across hundreds of websites. Get a free scan or book a call for a fixed-price quote.
Written by Houston Web Compliance
Our team has over 10 years of hands-on experience fixing website accessibility violations for enterprise e-commerce sites, complex web applications, attorney websites, and businesses nationwide. We've remediated WCAG violations on platforms including React, WordPress, Drupal, HubSpot, and custom applications.
Based in Houston, Texas | Serving businesses nationwide | Learn more about our team