Keyboard navigation is the backbone of web accessibility. If a shopper can’t move through your WooCommerce store using just the Tab key, you’re losing customers - and potentially facing a lawsuit.

WCAG 2.1 AA requires that every interactive element be operable through a keyboard interface. For WooCommerce stores, this means checkout forms, product filters, add-to-cart buttons, menu navigation, and search bars all need to work without a mouse.

Here’s how to find and fix the most common keyboard navigation issues in WooCommerce.

1. Visible Focus Indicators

The most common keyboard accessibility failure is a missing or invisible focus outline. When a user tabs to a button or link, there must be a visible indicator showing which element is active.

The problem: Many WooCommerce themes set outline: none in CSS without providing a visible alternative.

The fix:

/* Ensure focus indicators are visible on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Apply this in your theme’s stylesheet or via a code snippet plugin. Test it by tabbing through your entire store - every focusable element should show a clear outline.

Keyboard users tab through every element at the top of the page before reaching the main content. On a WooCommerce store, this means tabbing through the top bar, header, navigation menu, and promotional banners before reaching a product.

The fix: Add a skip-to-content link as the very first focusable element on the page.

<a href="#main-content" class="skip-link">
  Skip to main content
</a>
.skip-link {
  position: absolute;
  top: -9999px;
  left: 50%;
  z-index: 9999;
}
.skip-link:focus {
  top: 8px;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: #fff;
  border: 2px solid #2563eb;
  font-weight: 600;
}

Add id="main-content" to the main content wrapper in your theme (usually in header.php or the page template).

3. Tab Order on Product Pages

WooCommerce product pages often have a tab order that doesn’t match the visual layout. The “Add to Cart” button might come after the description tab, forcing keyboard users to tab through the entire product description before they can add an item to their cart.

The fix: Review the DOM order of your product page elements. For most themes, the ideal order is:

  1. Product title
  2. Price
  3. Product images (with skip option)
  4. Variations/options
  5. Quantity selector
  6. Add to cart button
  7. Product description (expandable)

Avoid using tabindex values greater than 0. If you need to adjust order, rearrange the HTML source order instead.

4. Dropdown Menus and Subnavigation

WooCommerce themes with dropdown menus are a common keyboard trap. Users can open the top-level menu but can’t reach the submenu items.

The fix: Ensure dropdown menus expand on both hover and focus. Use JavaScript to toggle submenu visibility on keyboard focus.

document.querySelectorAll('.menu-item-has-children > a').forEach(link => {
  link.addEventListener('focus', () => {
    link.nextElementSibling?.classList.add('menu-open');
  });
  link.addEventListener('blur', (e) => {
    // Delay hiding to allow submenu items to receive focus
    setTimeout(() => {
      if (!link.parentElement.contains(document.activeElement)) {
        link.nextElementSibling?.classList.remove('menu-open');
      }
    }, 100);
  });
});

AJAX-powered product filters on shop and category pages often update the product list without moving keyboard focus. After a filter is applied, the keyboard focus stays on the filter control while the product list below changes - leaving users unsure what happened.

The fix: After a filter selection, move focus to the first product in the results or to a status announcement.

// Move focus to first product after filter
document.querySelectorAll('.widget_layered_nav select, .price_slider').forEach(filter => {
  filter.addEventListener('change', () => {
    const firstProduct = document.querySelector('.product:first-of-type');
    if (firstProduct) {
      firstProduct.setAttribute('tabindex', '-1');
      firstProduct.focus();
    }
  });
});

6. Checkout Form Navigation

The WooCommerce checkout page is where keyboard navigation failures cost you revenue. Common issues include:

  • Radio button groups that require precise clicks
  • Date pickers in shipping fields that can’t be operated by keyboard
  • Country/state select dropdowns that lose focus on change
  • Payment method selection that traps keyboard focus

The fix: Test your checkout flow with keyboard only. Each field should be reachable via Tab in a logical order. Avoid auto-submitting on selection change - let the user choose first, then move on.

7. Modal and Cart Drawer Traps

Many WooCommerce stores use modals for quick view, cart drawers for added items, or popups for promotions. These are notorious for trapping keyboard focus.

The fix: When a modal opens, move focus to the first interactive element inside it. When it closes, return focus to the element that triggered it.

const modal = document.getElementById('quick-view-modal');
const trigger = document.querySelector('.quick-view-btn');

modal.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
    trigger.focus();
  }
});

function closeModal() {
  modal.style.display = 'none';
  trigger.focus();
}

Testing Your WooCommerce Store

Here’s a quick keyboard audit you can run right now:

  1. Open your store and unplug your mouse
  2. Press Tab repeatedly - every interactive element should receive focus in a logical order
  3. Press Shift+Tab to go backward - should work identically
  4. Press Enter on buttons, links, and form elements - they should activate
  5. Press Space on checkboxes, radio buttons, and dropdowns - they should toggle
  6. Navigate every menu - all submenu items should be reachable
  7. Complete a purchase - add to cart, view cart, go through checkout, all by keyboard
  8. Test modals and popups - they should open and close with keyboard controls

Write down every element that fails. The most common failures are focus indicator visibility, tab order, and modal focus traps.

Our Plugin Does All This Automatically

If auditing and fixing every issue sounds like too much manual work, the WooCommerce Accessibility Fixer plugin handles all of these fixes automatically - including keyboard navigation, focus indicators, skip links, ARIA labels, and more. It’s free and works with any WooCommerce theme.