Keyboard Navigation Testing for Ecommerce

A store that does not work without a mouse is inaccessible. Learn how to test keyboard navigation and fix common problems.

Scan Your Store Now

Why Keyboard Navigation Matters

Not everyone uses a mouse. People who use screen readers, voice control software, or who have motor disabilities rely entirely on the keyboard. If your store is not fully navigable by keyboard, you are excluding these customers.

Keyboard navigation is also required by WCAG 2.1 AA, the accessibility standard referenced in the ADA and many compliance frameworks.

How to Test Your Store

Step 1: Unplug Your Mouse

Literally put the mouse away. You will use only the keyboard for this test.

  1. Tab: Move forward through interactive elements (links, buttons, form fields)
  2. Shift + Tab: Move backward
  3. Enter: Activate a link or button
  4. Space: Activate a button or toggle a checkbox
  5. Arrow keys: Navigate within select menus, radio button groups, or carousels

Step 2: Tab Through Your Store

Starting from the top of your homepage, press Tab repeatedly. Ask:

  1. Can you reach every button, link, and form field?
  2. Is the order logical (top to bottom, left to right)?
  3. Can you see where focus is (is there a visible indicator)?
  4. Can you escape from any element, or are you trapped (keyboard trap)?

Step 3: Test Key Presses

When focus reaches a button or link:

  1. Try pressing Enter — does it activate?
  2. Try pressing Space — does it activate?
  3. If it is a menu, can you open/close it with arrow keys?

Common Keyboard Navigation Problems

Missing Focus Indicator

Problem: When you Tab through the page, you cannot see where focus is. The focus outline is removed or invisible.

Fix: Use CSS to show focus. Do NOT remove the default outline.

:focus { outline: 2px solid #10B981; outline-offset: 2px; }

Keyboard Trap

Problem: You Tab into a dialog or modal and cannot Tab out. Focus is stuck.

Fix: Ensure Escape closes the modal and returns focus to the trigger. Ensure Tab cycles through the modal's interactive elements only.

Unclickable Divs

Problem: A clickable area is a <div>, not a <button> or <a>. It works with a mouse but is not reachable by keyboard.

Fix: Use semantic HTML. Replace <div onclick> with <button> or <a>. If you must use a div, add role="button" tabindex="0" onkeydown="if(event.key==='Enter') ..."

Hover-Only Menus

Problem: Dropdowns appear only on mouse hover. Keyboard users cannot access them.

Fix: Make menus keyboard-accessible. Open on focus, close on blur or Escape. Show a focus indicator.

Test Your Store with Scan Record

Scan Record automatically detects keyboard navigation issues and generates a dated audit record listing:

Run an Automated Audit

Learn More

Full accessibility checklist →
Alt text guide →
Form label compliance →