Shopify Dawn Theme Accessibility Issues: Common WCAG Violations and How to Fix Them
Dawn is Everywhere — and Its Problems Are Too
Shopify Dawn is the platform's flagship free theme, used by hundreds of thousands of Shopify stores worldwide. It was designed to be fast, clean, and relatively accessible — but "relatively" is doing a lot of work in that sentence.
Running AccessComply's scanner against a fresh Dawn installation with typical store content consistently reveals 15-35 violations depending on the product catalog and media configuration.
Here's a systematic breakdown of what we find and how to address it.
1. Color Contrast Failures (WCAG 1.4.3)
Where it appears: Dawn's default color scheme often places light gray text on light backgrounds in sections like "You might also like," sale badges, and secondary navigation.
The standard: WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).
What to check:
- Sale price badges (red text on white or light gray)
- "Sold out" overlays on product cards
- Secondary navigation links
- Placeholder text in search and form fields
- Footer text against dark backgrounds
How to fix it: Dawn's Theme Editor has a "Accessible colors" option under Colors. Enabling this slightly adjusts colors to meet WCAG minimums. For fine-grained control, edit assets/base.css and adjust the CSS custom properties:
:root {
--color-foreground: 18, 18, 18; /* Dark text on light backgrounds */
--color-secondary-text: 102, 102, 102; /* Ensure 4.5:1 against background */
}
Always verify contrast with a tool like WebAIM's Contrast Checker after making changes.
2. Missing or Unhelpful Alt Text (WCAG 1.1.1)
Where it appears: Product images, collection banners, promotional content blocks, and logo images.
The standard: WCAG 1.1.1 requires all non-decorative images to have text alternatives that convey the same information.
What we commonly find:
- Product images with alt text like "image1.jpg" or left blank
- Collection banner images with no alt text or generic descriptions
- Logo images with alt="logo" instead of the company name
- Promotional images with text content not reflected in alt text
How to fix it: For product images, add alt text to each image in the Shopify admin product editor. For theme images (banners, promotional blocks), add alt text through the Theme Editor.
For programmatic fixes: AccessComply's AltTextAgent uses Claude to generate contextually accurate alt text based on the image content and surrounding page context — including product names, colors, and features.
3. Keyboard Navigation Issues (WCAG 2.1.1, 2.1.2)
Where it appears: Cart drawer, mobile navigation hamburger menu, mega menus, and predictive search.
The standard: WCAG 2.1.1 requires all functionality to be operable via keyboard. WCAG 2.1.2 prohibits keyboard traps.
Cart drawer: Dawn's cart drawer should be navigable entirely by keyboard. Common issues:
- Tab focus doesn't move to the cart drawer when it opens
- Close button isn't the first focusable element after the drawer opens
- Focus doesn't return to the trigger (cart icon) when the drawer closes
Mobile menu: The hamburger menu needs a logical focus flow:
- Focus moves into the menu when it opens
- Tab navigates through all menu items
- Escape key closes the menu and returns focus to the hamburger button
- Menu items don't receive focus when the menu is visually hidden
How to fix it: These require JavaScript changes to Dawn's assets/cart-drawer.js and sections/header.liquid. The changes involve adding focus management logic that moves focus appropriately when drawers and dialogs open and close.
4. Icon Buttons Without Accessible Names (WCAG 4.1.2)
Where it appears: Cart icon, search icon, wishlist icon, social media links in the footer, quantity increment/decrement buttons.
The standard: WCAG 4.1.2 requires all user interface components to have accessible names that can be programmatically determined.
What this looks like:
<!-- Bad: screen reader says "button" -->
<button class="cart-icon-bubble">
<svg>...</svg>
</button>
<!-- Good: screen reader says "Cart, 2 items" -->
<button class="cart-icon-bubble" aria-label="Cart, 2 items">
<svg aria-hidden="true">...</svg>
</button>
How to fix it: Add aria-label attributes to all icon-only buttons. For quantity buttons:
<button aria-label="Decrease quantity for {{ product.title }}">−</button>
<button aria-label="Increase quantity for {{ product.title }}">+</button>
In Liquid templates, you can use the product title variable to make ARIA labels contextually accurate.
5. Form Label Association (WCAG 1.3.1, 3.3.2)
Where it appears: Email capture forms, cart note fields, checkout link fields, product option selectors.
The standard: Form inputs must be programmatically associated with their labels using <label for="..."> and matching id attributes, or using aria-labelledby / aria-label.
Common Dawn pattern (broken):
<!-- These are separate — no association -->
<p class="field__label">Email</p>
<input type="email" class="field__input" placeholder="your@email.com">
Fixed pattern:
<label class="field__label" for="email-input">Email</label>
<input type="email" class="field__input" id="email-input" placeholder="your@email.com">
6. Focus Indicators (WCAG 2.4.7)
Where it appears: Links, buttons, and form fields across the entire theme.
The standard: WCAG 2.4.7 requires keyboard focus to be visible. WCAG 2.4.11 (new in 2.2) requires a minimum focus indicator area.
What Dawn does: Dawn includes :focus-visible styles but the default styling (a thin 1px outline) often fails the minimum focus indicator requirements, particularly on dark backgrounds.
How to fix it: Strengthen focus indicators in assets/base.css:
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
border-radius: 2px;
}
AccessComply's CSS extension component can inject enhanced focus indicators across all interactive elements without modifying your theme directly.
7. Heading Hierarchy (WCAG 1.3.1)
Where it appears: Blog pages, product pages with rich descriptions, collection pages.
The standard: Heading levels must be used in logical order (H1 → H2 → H3), not skipped for visual styling purposes.
Common Dawn issues:
- Collection page has H1 "Women's Clothing" then jumps to H3 product titles (skipping H2)
- Blog post sidebar uses H3 headings when H2 would be appropriate
- Footer sections use H4 or H5 for organization names when H2/H3 is correct
How to fix it: In Liquid templates, change heading tags to the semantically correct level. Use CSS for visual sizing rather than selecting heading tags for their default appearance.
8. Skip Navigation (WCAG 2.4.1)
Where it appears: The very top of the page, only visible on keyboard focus.
The standard: WCAG 2.4.1 requires a mechanism to skip blocks of content that repeat on every page (like navigation).
What Dawn provides: Dawn includes a skip link in most versions, but it's often styled to be invisible even on focus, which defeats its purpose.
How to verify: Tab from the browser address bar to your store. The very first focusable element should be a "Skip to content" link that becomes visible when focused.
How to fix it: Ensure the skip link becomes visible on :focus:
.skip-to-content-link:focus {
position: fixed;
top: 10px;
left: 10px;
z-index: 9999;
padding: 0.5rem 1rem;
background: #000;
color: #fff;
text-decoration: none;
}
Running a Full Audit on Your Dawn Store
The violations above are the most common, but every store's configuration is different. Product catalogs, installed apps, theme customizations, and content all affect the violation count.
AccessComply's free scanner will audit your specific Dawn store configuration and give you a prioritized list of violations with severity ratings. The Starter plan ($49/month) can automatically fix the majority of these issues — alt text, ARIA labels, focus indicators, skip nav — without requiring manual code edits.
Scan your Dawn store now — free, no account required. See your exact violation count and compliance score.
Further Reading
Ready to Fix Your Store?
Scan your Shopify store for free. Automatically fix 70–80% of WCAG 2.1 AA violations with real source-code changes — no overlay widgets.