BigCommerce Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance

Last updated: 2026-03-22

BigCommerce is a leading e-commerce platform powering online stores for businesses ranging from small startups to enterprise brands. BigCommerce uses the Stencil theme framework, which is built on Handlebars templating and provides developers with significant control over the front-end HTML output. The platform has made accessibility improvements in recent years, but many Stencil themes, both free and premium, still contain common accessibility barriers that affect customers who use screen readers, keyboard navigation, or other assistive technologies. E-commerce sites face particularly high accessibility stakes because inaccessible product browsing, filtering, cart management, and checkout flows directly prevent potential customers from completing purchases, resulting in lost revenue and potential legal exposure. The European Accessibility Act now requires e-commerce businesses serving EU customers to meet accessibility standards, and ADA-related lawsuits targeting e-commerce sites have been increasing year over year. This checklist focuses on the accessibility issues most commonly found in BigCommerce stores, from product catalog browsing to the checkout completion, with specific remediation guidance that Stencil theme developers and store administrators can implement to improve both compliance and the shopping experience for all customers.

Common Accessibility Issues

critical

Product Image Galleries Lacking Alt Text and Keyboard Access

WCAG 1.1.1

BigCommerce product pages display image galleries with thumbnail navigation, zoom functionality, and lightbox views. Many Stencil themes render product images without meaningful alt text, using the product SKU or filename instead. The thumbnail navigation may only respond to mouse clicks, the zoom feature often requires mouse hover, and the lightbox may trap keyboard focus or lack a keyboard-accessible close button.

How to fix:

In the BigCommerce admin panel, ensure every product image has descriptive alt text entered in the image properties. In your Stencil theme templates, use the Handlebars helper to output the alt text: <img src="{{getImage image 'product_size'}}" alt="{{image.alt}}">. For thumbnail navigation, ensure each thumbnail is a button element with an aria-label describing the image. Make the zoom feature keyboard accessible and provide a close button for lightbox views.

Before 
{{#each product.images}}
  <img src="{{getImage this 'product_size'}}" 
    class="productView-image">
  <div class="productView-thumbnail" 
    onclick="switchImage({{@index}})">
    <img src="{{getImage this 'thumbnail'}}">
  </div>
{{/each}}
After 
{{#each product.images}}
  <img src="{{getImage this 'product_size'}}" 
    alt="{{#if this.alt}}{{this.alt}}{{else}}{{../product.title}} - Image {{add @index 1}}{{/if}}"
    class="productView-image">
  <button type="button" 
    class="productView-thumbnail"
    aria-label="View image {{add @index 1}} of {{../product.title}}"
    onclick="switchImage({{@index}})">
    <img src="{{getImage this 'thumbnail'}}" alt="">
  </button>
{{/each}}
serious

Product Filtering and Sorting Without Screen Reader Feedback

WCAG 4.1.3

BigCommerce category pages with faceted navigation allow customers to filter products by price, brand, size, color, and other attributes. When filters are applied, the product grid updates dynamically via AJAX, but screen reader users receive no notification that the product listing has changed. The number of results, active filters, and updated product grid are silently modified in the DOM.

How to fix:

Add an aria-live region to the product listing container that announces the updated result count when filters are applied. After AJAX content loads, update a visually hidden status message like 'Showing 24 of 156 products, filtered by Brand: Nike'. Ensure all filter controls are properly labeled with their category names and current selection state.

critical

Shopping Cart and Mini-Cart Not Keyboard Accessible

WCAG 2.1.1

Many BigCommerce themes implement a mini-cart dropdown that appears on hover over the cart icon in the header. This cart preview is invisible to keyboard users because it only responds to mouse events. Quantity update controls may use custom increment/decrement buttons that are not focusable, and the remove item function may only work with mouse clicks.

How to fix:

Modify the Stencil theme's cart dropdown to open on focus as well as hover. Use proper button elements for the cart toggle, quantity controls, and remove item actions. Add aria-live='polite' to the cart count indicator so screen readers announce when items are added. Ensure the mini-cart can be dismissed with the Escape key.

Before 
<div class="navUser-item--cart" 
  onmouseover="showMiniCart()">
  <span class="cart-icon"></span>
  <span class="cart-count">3</span>
</div>
After 
<button type="button" 
  class="navUser-item--cart"
  aria-expanded="false"
  aria-controls="mini-cart"
  aria-label="Shopping cart, 3 items">
  <span class="cart-icon" aria-hidden="true"></span>
  <span class="cart-count" aria-live="polite">3 items</span>
</button>
<div id="mini-cart" role="region" 
  aria-label="Shopping cart contents">
critical

Checkout Form Fields Missing Labels and Error Handling

WCAG 3.3.1

The BigCommerce checkout flow, whether using the default Optimized One-Page Checkout or a custom checkout, may contain form fields that rely on placeholder text instead of visible labels. Validation errors may appear at the top of the form without being associated with specific fields, and screen reader users may not be notified when errors occur. Required field indicators may use only color (red asterisk) without a text equivalent.

How to fix:

Customize the checkout templates to ensure every form field has a visible label element associated via the for/id attributes. Use aria-required='true' on required fields alongside the visual indicator. Associate error messages with specific fields using aria-describedby, and set aria-invalid='true' on fields that fail validation. Use role='alert' on error containers so screen readers announce them immediately.

serious

Missing Focus Indicators on Interactive Elements

WCAG 2.4.7

Many BigCommerce Stencil themes suppress the default browser focus outline on links, buttons, and form inputs using CSS outline: none without providing an alternative visible focus indicator. This makes it impossible for keyboard users to track their position as they navigate through product listings, filters, navigation menus, and checkout forms.

How to fix:

Remove any CSS rules that suppress focus outlines (outline: none, outline: 0) from your Stencil theme's CSS. Add a clear, high-contrast focus indicator using the :focus-visible pseudo-class to avoid showing the indicator on mouse clicks while ensuring it appears for keyboard users. Apply the focus style to all interactive elements consistently throughout the store.

BigCommerce-Specific Tips

  • Use BigCommerce's Stencil CLI to develop and test themes locally, running accessibility audits against the local preview before deploying to your live store. The Stencil framework gives you full control over the Handlebars templates and CSS, making it possible to fix most accessibility issues at the theme level.
  • When customizing the checkout experience, test the entire flow from cart to order confirmation using only keyboard navigation and a screen reader. Checkout is the highest-impact area for e-commerce accessibility because inaccessible checkout directly prevents purchases.
  • Configure BigCommerce's product image fields to require alt text by establishing a content governance process, since the platform does not enforce alt text at the CMS level. Train content managers to enter descriptive alt text for every product image that includes the product name, color, and distinguishing visual features.
  • For stores using BigCommerce's headless commerce approach with a custom front-end, ensure your front-end framework handles focus management during add-to-cart actions, filter applications, and checkout step transitions, as these client-side interactions are invisible to assistive technology by default.

Recommended Tools

axe DevTools

A browser extension that provides comprehensive accessibility audits of your BigCommerce store pages, identifying WCAG violations in product listings, cart interactions, and checkout forms with actionable remediation guidance.

BigCommerce Stencil CLI

BigCommerce's local development tool for Stencil themes that allows you to preview and test theme changes locally, enabling accessibility testing during development before deploying to the live store.

Pa11y CI

An automated accessibility testing tool that can be integrated into your deployment pipeline to test multiple store pages against WCAG 2.1 AA standards before theme updates go live.

Further Reading

Other CMS Checklists