How to test your website with only a keyboard (5-minute check)

Many people navigate without a mouse: screen-reader users, people with tremors or limited hand movement, and power users. You can test this yourself in five minutes.

The test

1. Open your homepage and click the address bar.
2. Press Tab repeatedly. Use Shift+Tab to go back, Enter to follow links, and Space to press buttons and tick boxes.
3. Try to open the menu, reach every link, fill in the contact form, and close any pop-up.

What to look for

• Can you see where you are? Each focused item needs a visible outline.
• Is the order logical? Focus should follow the visual reading order.
• Can you get out? Pop-ups and embedded widgets shouldn't trap focus. Escape should close dialogs.
• Is anything unreachable? Dropdown menus that open only on hover are a common failure.
• Is focus hidden? New in WCAG 2.2: sticky headers or chat widgets must not completely cover the focused item.

Common fixes

/* restore a visible focus style */
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
/* keep focused items clear of a sticky header */
html { scroll-padding-top: 90px; }

Use real <button> and <a href> elements instead of clickable <div>s; they work with the keyboard automatically.

Related guides

• Accessibility overlay widgets vs. fixing your site's code
• Heading structure: how H1–H6 help accessibility and SEO
• Restaurant menus and PDFs: making them accessible online
• Squarespace vs Wix vs WordPress vs Shopify: accessibility compared

All guides

Check your own site

Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.