WCAG 2.1.1 Keyboard: How to Fix Keyboard Accessibility Issues

What This Criterion Requires

WCAG 2.1.1 requires that all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. This means every interactive element on the page, including links, buttons, form controls, menus, modals, tabs, carousels, and custom widgets, must be reachable and activatable using only the keyboard. Users must be able to Tab to elements, activate them with Enter or Space, navigate within composite widgets using arrow keys, and escape from modal dialogs. The most common violations occur when developers use non-interactive elements like divs and spans for clickable content, attach click handlers without keyboard equivalents, or create custom components that trap focus or cannot be operated without a mouse.

Why It Matters

Keyboard accessibility is essential for many user groups: people with motor disabilities who cannot use a mouse, blind users who navigate entirely by keyboard with a screen reader, power users who prefer keyboard shortcuts, and users of alternative input devices that emulate keyboard input such as switch devices, sip-and-puff systems, and voice recognition software. When interactive content is not keyboard accessible, these users are completely locked out of functionality. A dropdown menu that only opens on hover, a modal that cannot be closed with Escape, or a custom slider that only responds to mouse drag events all represent complete barriers to access. Keyboard operability is also the foundation for other assistive technologies to work correctly, since many AT devices translate their input into keyboard events. This is a Level A requirement because it is so fundamental: if users cannot operate your interface, no amount of other accessibility work matters.

Common Failures and How to Fix Them

<div class="card" onclick="openDetails()">
  <h3>Product Name</h3>
  <p>Click to view details</p>
</div>

<button class="card" onclick="openDetails()">
  <h3>Product Name</h3>
  <p>Click to view details</p>
</button>

<style>
  .dropdown-menu { display: none; }
  .nav-item:hover .dropdown-menu { display: block; }
</style>
<li class="nav-item">
  <a href="/services">Services</a>
  <ul class="dropdown-menu">
    <li><a href="/services/web">Web Design</a></li>
    <li><a href="/services/seo">SEO</a></li>
  </ul>
</li>

<style>
  .dropdown-menu { display: none; }
  .nav-item:hover .dropdown-menu,
  .nav-item:focus-within .dropdown-menu { display: block; }
</style>
<li class="nav-item">
  <a href="/services" aria-expanded="false" aria-haspopup="true">Services</a>
  <ul class="dropdown-menu" role="menu">
    <li role="none"><a role="menuitem" href="/services/web">Web Design</a></li>
    <li role="none"><a role="menuitem" href="/services/seo">SEO</a></li>
  </ul>
</li>

<div class="modal" id="signup-modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2>Sign Up</h2>
    <input type="email" placeholder="Email">
    <div class="btn" onclick="submit()">Submit</div>
  </div>
</div>

<dialog id="signup-modal" aria-labelledby="modal-title">
  <h2 id="modal-title">Sign Up</h2>
  <input type="email" placeholder="Email">
  <button onclick="submit()">Submit</button>
  <button onclick="document.getElementById('signup-modal').close()" aria-label="Close dialog">Close</button>
</dialog>

How to Test

1. Unplug the mouse and attempt to complete every task on the page using only keyboard (Tab, Shift+Tab, Enter, Space, Arrow keys, Escape).
2. Verify that a visible focus indicator appears on every interactive element as you Tab through the page.
3. Test that modal dialogs trap focus correctly (focus cannot Tab outside the modal) and can be dismissed with the Escape key.
4. Check custom widgets (carousels, accordions, tabs, date pickers) for proper keyboard interaction patterns as defined by the ARIA Authoring Practices Guide.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist

Further Reading

• Keyboard Navigation Testing
• Five Minute Accessibility Audit
• Wcag Explained Plain English

Related WCAG Criteria

• WCAG 1.4.11
• WCAG 2.4.4
• WCAG 4.1.2