Shift4Shop Accessibility Checklist 2026 | WCAG 2.1 AA for Online Stores

Many Shift4Shop themes render the product image gallery as thumbnails that swap the main image on click via JavaScript on a non-focusable element (a div or span with an onclick). Keyboard users cannot reach or operate the thumbnails, so they cannot view alternate product images, and zoom-on-hover features are unavailable to them. On stores where details matter (apparel, parts), this blocks the buying decision.

<div class="thumb" onclick="swapMain('img2.jpg')">
  <img src="thumb2.jpg" alt="">
</div>

<button type="button" class="thumb" onclick="swapMain('img2.jpg')" aria-label="View blue running shoe, side">
  <img src="thumb2.jpg" alt="">
</button>

Shift4Shop category pages often let shoppers filter by size, color, brand, or price, updating the product grid via AJAX. The result count and grid change visually, but with no aria-live region the update is silent to screen readers. A blind shopper applies a filter, hears nothing, and cannot tell whether anything changed or how many products now match.

<div id="results"><!-- AJAX-replaced, silent --></div>

<p id="result-status" aria-live="polite" class="sr-only"></p>
<div id="results"><!-- on update: result-status.textContent = '24 products match your filters' --></div>

On the Shift4Shop checkout, billing/shipping and payment fields sometimes use placeholder text as the only label, or a visible label that is not connected to its input via for/id or aria-labelledby. Screen reader users may hear 'edit text' with no idea which field they are in, and autofill is unreliable. On the checkout page specifically, this is both a conversion killer and a top lawsuit trigger.

<input type="text" name="BillingAddress" placeholder="Address">

<label for="billing-address">Billing address</label>
<input id="billing-address" name="BillingAddress" type="text" autocomplete="street-address">

Product option swatches frequently indicate the selected color/size using only a colored border or background change, and sale prices are often shown only by making the number red. Users who are colorblind or using a screen reader cannot tell which variant is selected or that a price is a discount, failing WCAG 1.4.1 Use of Color.

<span class="swatch selected" style="background:#1b3a6b"></span>
<span class="price sale">$28.00</span>

<button class="swatch" aria-pressed="true" aria-label="Color: Navy (selected)"></button>
<span><span class="sr-only">Sale price</span> $28.00 <s>was $40.00</s></span>

When a shopper adds an item, Shift4Shop themes typically show a mini-cart update, a flyout, or a 'Added to cart' toast visually, but without an aria-live region the confirmation is silent to screen readers. A blind shopper cannot tell whether the action succeeded and may add the same item repeatedly or abandon the purchase.

<div class="toast">Added to cart</div> <!-- silent to AT -->

<div class="toast" role="status" aria-live="polite">Added to cart: Blue Running Shoe. Cart total: 3 items.</div>

Older 3dcart / Shift4Shop themes commonly have heading-structure problems - multiple H1s (store name plus page title), promotional banners styled as headings, or category names that are not headings at all - and lack a 'Skip to content' link to bypass the large header and mega-menu. Screen reader users lose the page outline, and keyboard users must tab through the entire navigation on every page.

<h1>My Store</h1> ... <h1>Running Shoes</h1> <!-- two H1s, no skip link -->

<a class="skip-link" href="#main">Skip to main content</a>
<header>...</header>
<main id="main"><h1>Running Shoes</h1> ...</main>

Shift4Shop stores lean on promotional styling - light-grey 'Continue shopping' links, white text on a light promo bar, pastel sale badges - that routinely measures below 4.5:1 contrast. Because these elements appear store-wide (header promo bar, every product card), one bad choice fails contrast on hundreds of pages.

.promo-bar { color:#ffffff; background:#ffd24d; } /* 1.6:1 - fails */

.promo-bar { color:#1a1a1a; background:#ffd24d; } /* 11.6:1 - passes */