OpenCart Accessibility Checklist 2026 | WCAG 2.1 AA & EAA

OpenCart renders product options (size, colour, material) as radio buttons, checkboxes, or select menus, but the option name is often a styled <label> or <span> that is not programmatically tied to the inputs. A screen reader user hears 'radio button, not checked' with no indication of what the option is or which group it belongs to, so choosing the right variant becomes guesswork.

<div class="form-group required">
  <span>Size</span>
  <input type="radio" name="option[226]" value="5"> Small
  <input type="radio" name="option[226]" value="6"> Large
</div>

<fieldset class="form-group required">
  <legend>Size</legend>
  <input type="radio" id="opt-5" name="option[226]" value="5">
  <label for="opt-5">Small</label>
  <input type="radio" id="opt-6" name="option[226]" value="6">
  <label for="opt-6">Large</label>
</fieldset>

When a shopper adds a product, OpenCart shows a green success alert injected with JavaScript and slides the cart total up. None of this is exposed to assistive technology, so a screen reader user gets no confirmation the item was added and may add it repeatedly or assume the button is broken.

<!-- injected on success, invisible to AT -->
<div class="alert alert-success">Success: You have added ... to your cart!</div>

<!-- present on load, announced on update -->
<div id="cart-status" role="status" aria-live="polite"></div>
<script>
  document.getElementById('cart-status').textContent =
    'Added 1 x T-shirt to your cart';
</script>

The product image gallery is a set of linked thumbnails that open a magnifier/lightbox overlay. In the default theme and many extensions the overlay does not move focus to itself, does not trap focus while open, cannot be closed with the Escape key, and does not return focus to the triggering thumbnail on close - leaving keyboard users stranded behind the image.

<a class="thumbnail" href="large.jpg" onclick="openLightbox()">
  <img src="thumb.jpg" alt="">
</a>
<!-- overlay opens, focus stays on page behind it -->

<a class="thumbnail" href="large.jpg">
  <img src="thumb.jpg" alt="Blue running shoe, side view">
</a>
<div role="dialog" aria-modal="true" aria-label="Product image">
  <button aria-label="Close image">x</button>
  <img src="large.jpg" alt="Blue running shoe, side view">
</div>

OpenCart auto-fills the image alt attribute with the product name only if you set it; bulk imports and many themes leave thumbnails with empty or duplicated alt text. Because each product page shows a main image plus several thumbnails of the same item, screen reader users hear the same product name repeated or nothing at all, with no way to tell the views apart.

<img src="main.jpg" alt="">
<img src="t1.jpg" alt="Running Shoe">
<img src="t2.jpg" alt="Running Shoe">

<img src="main.jpg" alt="Blue running shoe, side view">
<img src="t1.jpg" alt="Running shoe, sole tread close-up">
<img src="t2.jpg" alt="Running shoe worn on a runner">

The default OpenCart palette uses light grey secondary text, muted link colours, and sale/special prices in a red that frequently fails the 4.5:1 contrast ratio against white. Store owners then pick brand button colours for visual punch without checking contrast, so primary 'Add to Cart' and 'Checkout' buttons can be unreadable for low-vision shoppers.

.price-new { color: #ff6b6b; } /* ~2.5:1 on white */
.btn-primary { background:#9ec1ff; color:#fff; } /* fails */

.price-new { color: #c0392b; } /* >=4.5:1 on white */
.btn-primary { background:#1659b8; color:#fff; } /* >=4.5:1 */

Product specification tables and quantity-discount tables are often built as plain grids of <td> cells with the top row visually bold but not marked as headers. Screen reader users navigating the table cell by cell hear values with no column or row context ('512', '7 days', '5%') and cannot tell what each number means.

<table>
  <tr><td><b>Quantity</b></td><td><b>Price</b></td></tr>
  <tr><td>5+</td><td>$18.00</td></tr>
</table>

<table>
  <caption>Quantity discounts</caption>
  <tr><th scope="col">Quantity</th><th scope="col">Price</th></tr>
  <tr><td>5+</td><td>$18.00</td></tr>
</table>

Depending on the OpenCart version and theme, some checkout and registration inputs use placeholder text ('First Name', 'E-Mail') as the only prompt. The placeholder vanishes on input, so screen reader users may hear nothing on focus and shoppers who pause lose track of what a field expects - a frequent cause of abandoned checkouts for older users.

<input type="text" name="firstname" placeholder="First Name">

<label for="input-firstname">First Name</label>
<input type="text" id="input-firstname" name="firstname"
       autocomplete="given-name" required>

OpenCart's marketplace has no accessibility review, so quick-view popups, ajax category filters, mega-menus, and one-page-checkout extensions routinely add custom widgets built from non-semantic <div> and <span> elements with no roles, names, or keyboard support. A store that was usable on the default theme can become unusable after a single extension install.

<div class="quickview-btn" onclick="openQuickView(42)">
  Quick View
</div>

<button type="button" class="quickview-btn"
        onclick="openQuickView(42)">
  Quick View<span class="sr-only"> of Blue Running Shoe</span>
</button>