Shopify Trade theme — accessibility hot-spot audit
Accessibility hot-spots in Trade
Variant picker keyboard operability
Partial auto-fixWCAG: 2.1.1 Keyboard
Color-swatch and size-selector pickers built from styled `<div>` elements without `role="radiogroup"` are unreachable by keyboard. Auto-fix rewrites swatches to native `<input type="radio">` or `role="radio"` with full arrow-key handling.
Bulk quantity stepper accessibility
Auto-fixWCAG: 4.1.2 Name, Role, Value
Custom +/- quantity controls render as styled spans without keyboard handlers or accessible names. Auto-fix converts to <button> with aria-label.
Variant matrix table semantics
Partial auto-fixWCAG: 1.3.1 Info and Relationships (table)
Wholesale variant matrices (size × color × pack size) often render as styled grid divs. Auto-fix converts to <table> with <th scope> headers.
Product image alt text passthrough
Auto-fixWCAG: 1.1.1 Non-text Content
The theme renders alt text from the Shopify Admin product-image setting. Merchants who upload images without setting alt text get an empty `<img alt="">`, which screen readers skip silently. Auto-fix populates alt text from product titles + AI-generated descriptions.
Color contrast on Trade
Auto-fixWCAG: 1.4.3 Contrast (Minimum)
Trade default palettes ship with body-text colors that frequently fall below the 4.5:1 luminance threshold once a merchant adjusts background tints or section backgrounds. The contrast failure compounds on muted seasonal palettes.
FAQ
Is the Shopify Trade theme accessible by default?
Shopify has not published a Theme VPAT for Trade. The theme is engineered with accessibility in mind, but accessibility regressions appear in standard merchant customizations (color palette, section layouts, third-party apps). The hot-spots above are the most common predictable regressions based on the theme's structural patterns.
What WCAG criteria does Trade most often fail?
Across stores running Trade, the most-frequently-cited criteria are 1.1.1 Non-text Content (alt text), 1.4.3 Contrast Minimum (color contrast), 4.1.2 Name, Role, Value (icon-only buttons), and 2.5.8 Target Size Minimum (mobile tap targets). Each maps to a deterministic theme-code fix.
Can AccessComply fix Trade accessibility issues automatically?
Yes. AccessComply scans the live Trade storefront, identifies WCAG 2.1 + 2.2 AA failures, and writes source-code fixes directly to the theme files via the Shopify Admin API. Roughly 70-80% of common violations auto-fix; the remainder are flagged for manual review with suggested code changes.
Will AccessComply break my Trade customizations?
No. Every fix is preceded by a full theme backup. Fixes are scoped to specific WCAG-relevant attributes and styles — not the merchant's custom layout, copy, or branding. If a fix introduces a regression, the post-fix re-scan triggers automatic rollback.
Run a real Trade scan
AccessComply scans your live Trade storefront for the hot-spots above and writes source-code fixes directly to your theme files.