WooCommerce Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

When a shopper changes the quantity in the WooCommerce cart and clicks 'Update cart', the line total, cart subtotal, and shipping recalculations update via AJAX without any aria-live announcement. Screen reader users hear nothing and have no way to confirm the change applied or what the new total is. The same pattern affects the AJAX add-to-cart button on archive pages: a fly-out 'View cart' link appears but nothing is announced.

<div class="cart_totals">
  <h2>Cart totals</h2>
  <table><tr><th>Subtotal</th><td>$45.00</td></tr></table>
</div>

<div class="cart_totals" role="status" aria-live="polite" aria-atomic="true">
  <h2>Cart totals</h2>
  <table><tr><th>Subtotal</th><td>$45.00</td></tr></table>
</div>

Variation swatch extensions (Variation Swatches for WooCommerce, YITH WooCommerce Color and Label Variations, and several theme-bundled implementations) replace the native <select> dropdowns with clickable spans. When a keyboard user activates a swatch, the gallery image updates but focus is dropped to the body element, so the next Tab restarts at the page header. The pattern fails 2.4.3 Focus Order and renders the buyer flow effectively unusable on keyboard.

<div class="variations">
  <span class="swatch" data-value="red">Red</span>
  <span class="swatch" data-value="blue">Blue</span>
</div>

<div class="variations" role="radiogroup" aria-label="Colour">
  <button type="button" role="radio" aria-checked="true" data-value="red">Red</button>
  <button type="button" role="radio" aria-checked="false" data-value="blue">Blue</button>
</div>

Side-cart drawer extensions (XOO Aside Cart, Cart Lift, the cart drawer bundled with Astra Pro and Flatsome) slide a panel in from the right when the cart icon is clicked but do not move keyboard focus into the drawer. Screen reader users get no announcement that a panel opened, and pressing Escape does not close it. Many implementations also fail 2.1.2 No Keyboard Trap because the close button is the only way out and is not the first focusable element.

<div class="xoo-cart-drawer" style="display:block">
  <div class="contents">...</div>
</div>

<div class="xoo-cart-drawer" role="dialog" aria-modal="true" aria-labelledby="cart-drawer-title">
  <h2 id="cart-drawer-title">Your cart</h2>
  <button class="close" aria-label="Close cart">x</button>
  <div class="contents">...</div>
</div>
<script>document.addEventListener('keydown', e => { if (e.key === 'Escape') closeCartDrawer(); });</script>

Many WooCommerce themes (Flatsome, Botiga, several Storefront child themes) hide the shipping and billing field labels and rely on the input placeholder for the field name. The native WooCommerce template uses real <label> elements but theme overrides commonly add CSS that visually hides them. Placeholders disappear on focus, fail 4.5:1 contrast, and are not announced consistently across screen readers.

<p class="form-row form-row-first">
  <label for="billing_first_name" style="display:none">First name</label>
  <input type="text" id="billing_first_name" placeholder="First name">
</p>

<p class="form-row form-row-first">
  <label for="billing_first_name">First name <abbr class="required" title="required">*</abbr></label>
  <input type="text" id="billing_first_name" autocomplete="given-name" required>
</p>

The default WooCommerce product gallery uses PhotoSwipe for the zoom lightbox. PhotoSwipe is accessible when configured correctly, but the WooCommerce wrapper script frequently omits the focus trap and the Escape-key close binding. Keyboard users open the lightbox with Enter, then cannot close it without clicking the close button, which is sometimes outside the visible viewport on long products.

<div class="pswp" tabindex="-1">
  <div class="pswp__container">...</div>
  <button class="pswp__button--close">Close</button>
</div>

<div class="pswp" role="dialog" aria-modal="true" aria-label="Product image viewer" tabindex="-1">
  <div class="pswp__container">...</div>
  <button class="pswp__button--close" aria-label="Close image viewer">x</button>
</div>
<script>const trap = focusTrap.createFocusTrap('.pswp', { onDeactivate: () => triggerEl.focus() }); pswp.on('open', () => trap.activate()); pswp.on('close', () => trap.deactivate());</script>

The My Account dashboard renders Orders, Downloads, Addresses, Payment methods, and Account details as a list of links. Visually they look like a vertical tab interface, but they are full-page navigations not tabs. The mismatch confuses screen reader users who hear 'Orders, link' but see a tab-like layout. The current section is also rarely indicated programmatically (no aria-current).

<nav class="woocommerce-MyAccount-navigation">
  <ul>
    <li class="is-active"><a href="/my-account/orders/">Orders</a></li>
    <li><a href="/my-account/downloads/">Downloads</a></li>
  </ul>
</nav>

<nav class="woocommerce-MyAccount-navigation" aria-label="Account">
  <ul>
    <li class="is-active"><a href="/my-account/orders/" aria-current="page">Orders</a></li>
    <li><a href="/my-account/downloads/">Downloads</a></li>
  </ul>
</nav>

The 'Have a coupon? Click here to enter your code' toggle on the checkout page is rendered as a link with href='#' that uses JavaScript to expand the coupon form. The same pattern appears on the cart page. Many themes do not bind keydown handlers, so pressing Enter when the toggle is focused does nothing in older browsers, and pressing Space scrolls the page instead of activating the toggle.

<a href="#" class="showcoupon">Have a coupon? Click here to enter your code</a>
<form id="checkout_coupon" style="display:none">...</form>

<button type="button" class="showcoupon" aria-expanded="false" aria-controls="checkout_coupon">Have a coupon? Click here to enter your code</button>
<form id="checkout_coupon" hidden>...</form>

Product cards on the shop archive show 'On sale!' as a red circular badge and 'Out of stock' as a red label that relies entirely on red colour to communicate the state. Users with red-green colour blindness or low vision cannot distinguish these badges from the rest of the card. The price markdown often uses strikethrough on the original price, which is announced by some screen readers but not all.

<span class="onsale"></span>
<del>$45.00</del> <ins>$30.00</ins>

<span class="onsale">Sale - 33% off</span>
<span class="price"><span class="sr-only">Original price:</span> <del>$45.00</del> <span class="sr-only">Current price:</span> <ins>$30.00</ins></span>