How to make your site keyboard accessible

WCAG: 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible · Updated October 14, 2026

Many people cannot use a mouse: people with motor disabilities, screen reader users, and power users. Most keyboard problems can only be found by trying, so this guide starts with a two-minute test.

The two-minute test

1. Click the address bar, then press Tab repeatedly.
2. Can you always see where focus is?
3. Does focus move in a logical order?
4. Can you open the menu, use dropdowns, close pop-ups with Esc, and submit forms with Enter or Space?
5. Does focus ever get stuck?

Common fixes

• Invisible focus. Never remove outlines without a replacement:

  :focus-visible { outline: 3px solid #0060c7; outline-offset: 3px; }

• Clickable divs. Replace <div onclick> with <button> or <a href>.
• Hidden but focusable. Off-screen menus and closed modals must not be reachable by Tab. Use hidden, inert, or display:none.
• Scrollable boxes. Add tabindex="0" and a label to scrollable regions.
• Positive tabindex. Avoid tabindex="1" and higher; it scrambles the order.

Step by step

1. Tab through the page. Use only the keyboard and watch the focus indicator.
2. Restore focus styles. Add a visible :focus-visible style.
3. Use native controls. Replace clickable divs with buttons and links.
4. Remove hidden focus. Make closed menus and modals unreachable by Tab.

Automated accessibility scan. Results are informational and may not identify every accessibility issue. This service is not legal advice, a compliance certification, or a substitute for comprehensive manual accessibility testing.