How to fix tabindex on WooCommerce

Steps for WooCommerce

1. Log in to WordPress Admin → Appearance → Theme File Editor (or use a child theme and edit files via FTP/SFTP).
2. Search all theme template files (header.php, footer.php, page.php, woocommerce/ overrides) for 'tabindex' using your code editor's global search.
3. Remove or correct any positive tabindex values in those files.
4. Also check any active page-builder plugins (Elementor, Divi, etc.): edit the affected widget/module and look in its 'Advanced' or 'Custom Attributes' section for a tabindex setting — remove or set to 0.
5. For WooCommerce-specific templates (e.g. checkout form), copy the template to your child theme under woocommerce/ and edit there so updates do not overwrite your changes.
6. Install the 'Accessibility Checker' plugin (e.g. WP Accessibility or Equalize Digital Accessibility Checker) to re-scan after your changes.

<![CDATA[<!-- ❌ WRONG: positive tabindex breaks focus order -->
<button tabindex="3">Add to Cart</button>
<a href="/sale" tabindex="1">View Sale</a>
<input type="email" tabindex="2" placeholder="Your email">

<!-- ✅ CORRECT: remove attribute or use 0; rely on document order -->
<a href="/sale">View Sale</a>
<input type="email" placeholder="Your email">
<button>Add to Cart</button>

<!-- ✅ CORRECT: non-native interactive element added to normal tab flow -->
<div role="button" tabindex="0" onclick="openMenu()">Menu</div>

<!-- ✅ CORRECT: focus target for JS only, not in tab flow -->
<div id="modal-heading" tabindex="-1">Special Offer</div>
]]>

What is tabindex?

The `tabindex` attribute tells a browser how an element should behave when a user presses the Tab key to navigate a page by keyboard. A value of `0` means "include this element in the normal tab order," while a value of `-1` means "exclude it from tab order but allow programmatic focus." A positive value — like `tabindex="1"`, `tabindex="2"`, etc. — forces that element to be focused *before* everything else on the page, regardless of where it sits in the HTML. This almost always creates a confusing, broken keyboard experience because the visual order and the focus order no longer match.

Keyboard navigation is essential for people who cannot use a mouse — including users with motor disabilities, screen-reader users, and power users who rely on the Tab key. When positive tabindex values are present, focus jumps unpredictably around the page, making it nearly impossible for these shoppers to browse products, fill in forms, or complete a checkout. This violates WCAG 2.1 Success Criterion 2.4.3 (Focus Order) at Level AA — the standard that most accessibility laws (ADA, European Accessibility Act, UK Equality Act) reference. Failing it exposes your business to legal complaints and litigation, and it directly harms conversion rates by locking out an estimated 15–20% of online shoppers who have some form of disability.

See the complete Tabindex guide for every platform and the full background.