How to Fix Keyboard Accessibility WCAG 2.2

Why this matters

About 26% of adults in the US have a disability. Many use only a keyboard to navigate — including people with motor disabilities, power users, and those using screen readers. Keyboard inaccessibility is a complete blocker for these users.

Code examples

<!-- div used as button - not keyboard focusable -->
<div onclick="submitForm()" class="btn">Submit</div>

<!-- Custom dropdown with no keyboard support -->
<div class="dropdown" onclick="toggle()">Menu</div>

<!-- Real button - keyboard focusable by default -->
<button onclick="submitForm()" class="btn">Submit</button>

<!-- Keyboard accessible dropdown -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" role="menu">...</ul>

How to fix it — step by step

1. 1
   Use native HTML elements — <button>, <a>, <input>, <select> — they are keyboard accessible by default
2. 2
   Never use <div> or <span> as interactive elements unless you add tabindex='0' and keyboard event handlers
3. 3
   Test your entire site using only the Tab, Enter, Space, and Escape keys
4. 4
   Modals and dialogs must trap focus inside while open — users shouldn't be able to Tab behind them
5. 5
   Add keyboard event listeners alongside click handlers for custom components
6. 6
   Make sure dropdown menus can be opened and closed with keyboard
7. 7
   Use tabindex='0' to add elements to tab order, tabindex='-1' to remove them

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.