ShieldStack
Accessibility Audit Report
Acme Apparel
- Storefront
- acmeapparel.example
- Audit window
- March 18 - March 24, 2026
- Standard
- WCAG 2.2 Level AA
- Auditor
- ShieldStack
- Report version
- 1.0 / Final
- Issued
- March 24, 2026
1. Executive Summary
Between March 18 and March 24, 2026, ShieldStack audited 8 page templates of acmeapparel.example against WCAG 2.2 Level AA. We identified 47 issues: 9 critical, 14 serious, 18 moderate, and 6 minor. The most common failure category was missing accessible names on interactive elements (12 instances across 6 templates). The store does not currently meet WCAG 2.2 AA. The remediation plan in section 7 prioritizes critical issues first; we estimate 32 to 48 developer-hours to bring the store into conformance.
Conformance statement
Acme Apparel partially conforms with WCAG 2.2 Level AA. 23 of 50 success criteria are fully met, 19 are partially met (some failures), and 8 fail across one or more templates.
Top 3 risks
- Add to Cart button has no accessible name on mobile product pages.Screen reader users hear "button" with no context. Critical for a D2C apparel store; cited in 67% of 2025 ADA demand letters against Shopify stores.
- Checkout form fields have visual labels but no programmatic association. Assistive tech reads blank labels. Blocks core purchase flow for screen reader users.
- Color contrast fails on body copy. Light gray
#a3a3a3on white background is 2.85:1 (4.5:1 required). Affects product descriptions and footer site-wide.
2. Scope of Audit
We audited the following 8 templates at desktop (1440px) and mobile (375px) breakpoints:
| # | Template | URL audited |
|---|---|---|
| 1 | Homepage | / |
| 2 | Collection list | /collections/all |
| 3 | Collection detail | /collections/sweatshirts |
| 4 | Product detail | /products/heritage-hoodie |
| 5 | Cart | /cart |
| 6 | Checkout | /checkouts/c/pay |
| 7 | Account login | /account/login |
| 8 | Contact page | /pages/contact |
Out of scope: embedded third-party widgets (Klaviyo, Yotpo, Gorgias), PDF documents, translated locales beyond primary, Shopify admin pages.
3. Methodology and Tools
Automated tools
- axe-core 4.x via @axe-core/cli + Playwright
- Pa11y (WCAG2AA standard)
- Lighthouse Accessibility audit
- WAVE browser extension (spot checks)
Manual testing
- NVDA 2024.x on Firefox + Chrome (Windows 11)
- VoiceOver on Safari (macOS Sonoma)
- Keyboard-only navigation, full purchase flow
- Browser zoom 200% + 400% reflow
- TPGi Colour Contrast Analyser (CCA)
Automated tools detected 31 of the 47 issues in this report. The remaining 16 (including all 9 critical issues) were identified through manual testing only. This is consistent with industry research showing automated tools catch approximately 30% of WCAG failures.
4. Findings Summary
Critical
9
Serious
14
Moderate
18
Minor
6
Critical: blocks core purchase flow for users of assistive technology. Must fix immediately.
Serious: significantly degrades experience but workaround exists. Fix within 30 days.
Moderate: affects some users in some scenarios. Fix within 90 days.
Minor: cosmetic or edge-case. Best-effort.
5. Findings Detail (selected examples)
Full report includes all 47 findings. Below: 5 representative examples across severity levels.
Add to Cart button has no accessible name on mobile product pages
Template: product.liquid (mobile breakpoint)
Issue: The primary purchase CTA on product detail pages renders as an icon-only button on screens under 480px. The button has no aria-label, no visually hidden text, and no associated label. Screen readers announce this as 'button' with no further context.
User impact: Screen reader users cannot identify what the button does. They cannot complete a purchase. This is the single most common citation in 2025 ADA demand letters against Shopify stores.
<!-- Current (broken) -->
<button class="atc-btn">
<img src="cart-icon.svg" alt="">
</button>
<!-- Recommended -->
<button class="atc-btn" aria-label="Add to cart">
<svg aria-hidden="true" focusable="false">
<use xlink:href="#cart-icon"/>
</svg>
</button>Checkout form errors are not announced to screen readers
Template: checkout (Shopify-managed)
Issue: When a customer submits the checkout form with invalid data (e.g., missing postal code), error messages appear visually next to the affected fields but are not in an aria-live region. Screen reader users continue interacting with the page, unaware that submission failed.
User impact: Screen reader users cannot complete checkout when they make a typo. They believe the order went through. This is a documented blocker in multiple 2024-2025 ADA cases that resulted in 5-figure settlements.
<!-- Add aria-live region above form --> <div id="checkout-errors" aria-live="assertive" role="alert"> <!-- Errors injected here when validation fails --> </div> <!-- Each invalid field also needs aria-invalid + aria-describedby --> <input type="text" name="postal_code" aria-invalid="true" aria-describedby="postal-error" /> <span id="postal-error" class="error">Postal code is required.</span>
Body copy color contrast is below 4.5:1
Template: theme.liquid (global)
Issue: Default body text color is #a3a3a3 on a white #ffffff background. Measured contrast ratio is 2.85:1, below the WCAG AA minimum of 4.5:1 for normal text. Affects product descriptions, footer text, and form helper text site-wide.
User impact: Low-vision users and users with mild color blindness cannot read body text. Per the U.S. National Federation of the Blind, contrast is one of the top three barriers cited in user research with ecommerce shoppers.
/* Current (fails contrast) */
.text-secondary { color: #a3a3a3; }
/* Recommended (4.5:1 minimum) */
.text-secondary { color: #6b7280; } /* 4.69:1 ratio */No skip-to-main-content link
Template: theme.liquid (global)
Issue: Keyboard users must tab through the entire site header (logo, nav, search, cart icon) on every page before they can reach the main content. There is no skip link.
User impact: Keyboard users (including users of voice control software, switch devices, and screen readers) face significant friction. On a typical page with 12 header links, this means 12 extra Tab presses per page navigation.
<!-- Add as the first focusable element in <body> -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #0f172a;
color: white;
padding: 8px 16px;
z-index: 100;
}
.skip-link:focus { top: 0; }
</style>
<!-- Then add id="main-content" to your main element -->
<main id="main-content"> ... </main>Hero carousel images use empty alt attributes
Template: homepage (hero carousel)
Issue: All 4 hero slideshow images have alt='' (empty). Each image displays a brand message overlay rendered as text-on-image (e.g., 'NEW SPRING COLLECTION'). With empty alt, screen reader users hear nothing.
User impact: Screen reader users miss the brand's primary marketing message on every visit to the homepage. Sighted users see 4 promotional slides; assistive tech users see 0.
<!-- Current -->
<img src="hero-spring.jpg" alt="">
<!-- Recommended (use alt to convey the on-image text) -->
<img
src="hero-spring.jpg"
alt="New Spring Collection — soft wovens for warming days"
/>
<!-- Or, if image is purely decorative, move text out of the image:
real <h2> text + a CSS background-image instead -->6. Findings by Template (sample)
This regrouping helps your dev team work template-by-template. Full report includes all 8 templates.
theme.liquid (global)
- F03 — Skip-to-content link missing
- F07 — Focus indicator removed by CSS
- F11 — Heading hierarchy starts at H2 (no H1)
product.liquid
- F01 — Add to Cart button unlabeled on mobile
- F09 — Variant selector lacks accessible name
- F22 — Image gallery thumbnails not keyboard-navigable
checkout (Shopify-managed)
- F02 — Form errors not announced to screen readers
- F18 — Quantity input missing programmatic label
7. Remediation Plan (Prioritized)
Phase 1 — Critical (within 14 days)
| ID | Finding | Estimated effort |
|---|---|---|
| F01 | Add to Cart button unlabeled (mobile) | 2h |
| F02 | Form errors not announced | 4h |
| F03 | Skip-to-content link missing | 1h |
| ... | 6 more critical findings | 16h |
| Phase total | 23h |
Phase 2 — Serious (within 30 days)
| ID | Finding | Estimated effort |
|---|---|---|
| F09 | Variant selector accessible name | 2h |
| F11 | Heading hierarchy fix (theme-wide) | 3h |
| ... | 12 more serious findings | 10h |
| Phase total | 15h |
Phase 3 — Moderate (within 90 days)
| ID | Finding | Estimated effort |
|---|---|---|
| F22 | Image gallery keyboard navigation | 3h |
| ... | 17 more moderate findings | 7h |
| Phase total | 10h |
Total estimated effort: 32-48 developer-hours
8. Accessibility Statement (Draft)
Ready to publish at acmeapparel.example/pages/accessibility:
Accessibility Statement for Acme Apparel
Acme Apparel is committed to digital accessibility. We aim to conform to the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA published by the W3C.
Conformance status: Partial conformance with WCAG 2.2 AA, last audited March 24, 2026 by ShieldStack. Remediation in progress per Phase 1 plan.
Known limitations:
- Some product pages have form labeling issues being addressed within 14 days
- Color contrast on certain page sections is being adjusted site-wide
Feedback: We welcome feedback on the accessibility of our store. Contact us at accessibility@acmeapparel.example or call (555) 555-0123.
Date last reviewed: March 24, 2026
9. Disclaimers
- This audit is a snapshot in time. Future content or theme changes may introduce new accessibility issues.
- Conformance with WCAG 2.2 AA is a strong defensive posture but does not legally guarantee immunity from ADA Title III litigation.
- ShieldStack is not a law firm. For legal advice on ADA risk or response to demand letters, consult qualified counsel.
- We tested the store as it existed during the audit window. We are not responsible for issues introduced after delivery.
10. Next Steps
- Review this report with your dev team or app developer.
- Implement Phase 1 fixes (critical items) within 14 days.
- Publish the accessibility statement in section 8.
- Optional: engage ShieldStack for remediation ($1,490 add-on, 14 days) if you want us to implement fixes ourselves.
- Optional: add monthly monitoring ($199/mo) to catch regressions before plaintiff firms do.
For questions, reply to the email this report was attached to. Email and chat Q&A is open for 7 days post-delivery (Telegram, Slack, or email — your pick). 4-hour business-day response SLA.
Auditor signature
ShieldStack
Issued March 24, 2026