Shopify's Dawn theme (and most marketplace themes) ships with several WCAG 2.2 issues out of the box. Here's a checklist we use when auditing Shopify stores, in priority order.
Critical (fail an audit on their own)
- Color contrast on sale price tags (red on light pink), placeholder text in inputs, and the cart drawer headers. Threshold: 4.5:1 normal text, 3:1 large/bold.
-
Buttons without accessible names: the icon-only quantity steppers (+ / −) often have no
aria-label. - Form labels on the checkout: most "floating label" implementations fail when the label moves outside the input's accessible name.
Serious
- Carousel autoplay with no pause control.
- Keyboard trap in the predictive search drawer (focus stays inside even after closing).
- Modal product quick-view returns focus to the top of the page instead of the trigger.
WCAG 2.2-specific
- Target size 2.5.8: social icons in the footer are typically 16×16. Bump to 24×24 minimum.
- Drag movements 2.5.7: any custom slider or sortable wishlist needs a click/tap fallback.
- Accessible authentication 3.3.8: Shopify's default checkout is fine; custom checkouts that ban paste in the password field fail this.
Quick wins
- Audit your
theme.liquidfor hardcoded colors against your background tokens. - Add
aria-labelto every `` that contains only an icon or SVG. - Set focus styles globally:
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } - Test the keyboard tab order through a full checkout. If you can't complete a purchase keyboard-only, the score doesn't matter.
AccessProof scans Shopify stores out of the box (we follow redirects through the storefront) and groups findings by template so your dev team can fix them theme-wide instead of page-by-page.
Originally published on access-proof.com.
Top comments (0)