Dawn theme accessibility: common issues and how to fix them

What Shopify's Dawn theme already does for accessibility, the issues that come from settings, content, apps and custom code, and how to fix each one.

By Accessibility Helper teamPublished October 16, 2026Updated October 20, 20268 min read

Dawn, Shopify’s free, open-source theme, starts from a solid accessibility baseline: a skip link, visible focus styles, keyboard-friendly drawers, labeled variant pickers and zoom that works on phones. Most accessibility problems on a Dawn store come from what gets added afterward: color schemes with low contrast, images without alt text, auto-rotating sections, headings chosen for their look, apps and custom code. This guide lists what Dawn already does, the issues to look for, and where to fix each one.

What does Dawn already do for accessibility?

Dawn’s source is public on GitHub. Everything below was checked against Dawn 16, released in August 2026. Horizon is Shopify’s newer free theme, and the advice here carries over to it, because the issues come from settings and content rather than from the theme’s code.

Out of the box, Dawn:

Sets the page language. The html element gets lang from your store’s locale (3.1.1 Language of Page, Level A).
Adds a skip link. The first Tab press reveals “Skip to content”, which jumps past the header (2.4.1 Bypass Blocks, Level A).
Lets shoppers zoom. The viewport meta tag is width=device-width,initial-scale=1, with no maximum-scale, so pinch-to-zoom works (1.4.4 Resize Text, Level AA).
Shows keyboard focus. Every focused element gets a 0.2rem outline, offset by 0.3rem, drawn in the color scheme’s foreground color at 50% opacity (2.4.7 Focus Visible, Level AA).
Builds the cart drawer as a dialog. It has role="dialog", aria-modal="true" and the name “Cart”, focus is trapped inside while it’s open, Esc closes it, and focus returns to the cart icon.
Builds menus with details and summary. The menu drawer’s button is named “Menu”, and the theme’s script sets aria-expanded as it opens and closes.
Labels the search dialog and its search field.
Pauses motion on request. When auto-rotate is on, the slideshow shows a “Pause slideshow” button, and slide changes are announced politely.
Marks up variants as real form controls. Swatches and pills are radio buttons inside a fieldset with a legend, and dropdowns are a labeled select. Sold-out options carry a visually hidden “Variant sold out or unavailable” label.
Names icon buttons. The quantity buttons read “Increase quantity for” and “Decrease quantity for” the product, and the cart icon carries a visually hidden “Cart”.
Prints product structured data. The product page includes JSON-LD from Shopify’s structured_data filter, which outputs a schema.org Product or ProductGroup.

Which settings and content cause most of the issues?

Color schemes without enough contrast

Text needs a contrast ratio of at least 4.5:1 against its background, or 3:1 for large text (1.4.3 Contrast (Minimum), Level AA). Button borders, input borders, icons and the focus ring need 3:1 against the colors next to them (1.4.11 Non-text Contrast, Level AA).

Dawn manages colors as color schemes, and every section picks one. Open Online Store › Themes › Customize › Theme settings › Colors and check each scheme: text on background, button label on button, outline button, links, and the sale badge.

One thing to watch: Dawn draws the focus ring in the scheme’s foreground color at 50% opacity. On a scheme with a mid-tone background, that half-strength ring can fall under 3:1. If it does, strengthen it in Theme settings › Custom CSS:

/* A full-strength focus ring in the scheme's foreground color. */
html :focus-visible,
html .button:focus-visible {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 3px;
}

/* The inset ring on the logo, header icons and menu drawer links. */
html .focus-inset:focus-visible {
  outline: 3px solid rgb(var(--color-foreground));
  outline-offset: -3px;
}

The html at the start of each rule makes it win over Dawn’s own focus rules, including the shadow-only ring on buttons. Our guide to focus indicators explains each part.

Check every pair with our free contrast checker. One fix in a scheme corrects every section that uses it.

Images without alt text

Every image that carries information needs a text alternative (1.1.1 Non-text Content, Level A). Dawn prints whatever alt text you’ve saved; it can’t write it for you.

Product media: Products › select the product › click a media item › Add alt text › Save alt text. Shopify allows up to 512 characters and recommends 125 or fewer.
Section images (image banner, image with text, collection images): Customize › select the section › on the image, click Edit › enter the alt text › Save.

Dawn’s product cards output alt="{{ card_product.featured_media.alt | escape }}". When the alt text is empty, the image is treated as decorative and skipped, so a screen reader user hears the product title but learns nothing about the photo. Our guide on how to write alt text covers product photos in detail.

Text baked into banner images

If your hero image has “Free shipping over $50” drawn into the picture, that text doesn’t exist for screen readers, can’t be translated, and blurs when zoomed. Put the words in the image banner’s heading and text blocks instead, and keep the image as a picture.

Slideshows and announcement bars that rotate on their own

Anything that moves automatically for more than five seconds needs a way to pause, stop or hide it (2.2.2 Pause, Stop, Hide, Level A). Both Dawn’s slideshow and its announcement bar have an auto-rotate setting. The slideshow adds a “Pause slideshow” button when auto-rotate is on; the announcement bar has previous and next buttons. The simplest fix for both: select the section in the theme editor and turn auto-rotate off. Shoppers can still use the arrows.

Headings chosen for their size

Headings must reflect the structure of the page (1.3.1 Info and Relationships, Level A) and describe their section (2.4.6 Headings and Labels, Level AA). Dawn helps here: section headings such as the image banner and rich text headings are always an h2, and the “Heading size” setting changes only the size. The problems start in the rich text editor, where product descriptions, pages and blog posts let you pick any level. Keep levels in order, don’t skip from a heading 2 to a heading 4, and don’t use a heading for emphasis. The page title is the main heading; everything else sits under it.

Links that all say the same thing

A link’s purpose should be clear from its text, or its text plus its context (2.4.4 Link Purpose (In Context), Level A). The usual offender is a row of featured collections each with a “Shop now” button. In the section’s settings, change the button label to “Shop linen shirts” or “Shop the summer edit”. Dawn’s product cards already use the product title as the link text, so leave that as it is.

Videos

Dawn’s video section shows a cover image with a play button and only starts the video when a shopper selects it, which is the right default. Keep it that way. If an app or custom code adds a background video that plays on load, keep it muted and give it a pause control (1.4.2 Audio Control, Level A and 2.2.2 again), and add captions to any video with speech.

Sold-out swatches shown by color alone

If a crossed-out or faded swatch is the only sign that a color is sold out, shoppers with low vision or color blindness miss it (1.4.1 Use of Color, Level A). Dawn adds a visually hidden “Variant sold out or unavailable” label to each unavailable option, and the legend shows the selected value as text. Keep both if you customize the picker. Our guide to accessible variant pickers and swatches goes deeper.

For Shopify stores

Find and fix accessibility issues on your store

CodeInspire Accessibility Tool adds an accessibility widget for your shoppers, audits your pages against WCAG, and gives you step-by-step fixes for your Shopify admin, theme editor or theme code.

Get it on the Shopify App Store What the app does

What do apps and custom code break?

Focus outlines removed

A surprising number of stores carry a line like this in their custom CSS, usually added to hide outlines on mouse clicks:

/* Don't do this. It hides keyboard focus for everyone. */
*:focus {
  outline: none;
}

Delete it. Dawn already uses :focus-visible, so outlines show for keyboard users and stay out of the way for mouse users. If you want a different look, restyle the outline instead of removing it (2.4.7 Focus Visible, Level AA).

Icon buttons with no name

Wishlist hearts, compare buttons, chat bubbles and “quick add” icons added by apps or custom sections often ship as an icon with no text. A screen reader announces “button” and nothing else (4.1.2 Name, Role, Value, Level A). Dawn’s own pattern is a visually hidden text span next to the icon:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset">
  <span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>
  <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
</a>

If you edit the header, keep that span. For your own buttons, either copy the pattern or use aria-label:

<button type="button" aria-label="Add to wishlist">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Pop-ups that take over the page

Newsletter, discount and age-check pop-ups from apps need the same behavior as Dawn’s cart drawer: focus moves in, Esc closes it, focus returns, and nothing behind it is reachable while it’s open (2.1.1 Keyboard, Level A). Test each one with a keyboard after you install it, and remove any app that fails.

Menus replaced by apps

Dawn’s header offers a dropdown, a mega menu or a drawer for desktop, all built with details and summary, so they open with Enter or Space and close with Esc. Menu apps that replace the header often open on hover only or trap focus. If you switch, test the replacement the same way you’d test Dawn’s: Tab to the menu button, open it, move through every level, and close it with Esc. Our guide to the cart drawer and menu drawer has the full test.

Edited theme code

Every change a developer makes to layout/theme.liquid, the header or the product template can remove something Dawn did right. The most common losses are the skip link, the lang attribute, the visually hidden text in icon links, and the legend in the variant picker. After any theme work, re-run the checks below.

What won’t this guide or an automated check catch?

Automated checks, including our website checker and the Lighthouse audit in Chrome, find the issues that show in the code: missing alt attributes, low contrast in plain text, unnamed buttons, zoom turned off. They can’t judge whether your alt text is any good, whether a pop-up returns focus, whether your headings make sense, or whether text over a photo is readable in every slide.

This guide can’t see your copy of Dawn either. Shopify releases new Dawn versions regularly, settings move, and an edited theme can differ from the source in any way. Treat the markup above as what Dawn 16 ships with, and check what your own theme outputs by viewing a page’s source.

What should you do next?

Walk through your home page, a collection, a product and the cart with only a keyboard, using our keyboard accessibility guide.
Check each color scheme’s text and button pairs in the contrast checker.
Run the free website accessibility checker on your home page, a product page and a collection page. It lists every failing automated check with the WCAG criterion it affects and how to fix it.

Frequently asked questions

Is the Dawn theme accessible?

Dawn starts from a good baseline: a skip link, visible focus styles, keyboard-friendly drawers and menus, labeled variant pickers and zoom that works on phones. No theme is accessible on its own, though. Your color schemes, images, headings, apps and custom code decide how accessible your store is, so you still need to check your own store.

Does the Dawn theme pass WCAG?

WCAG applies to a finished web page, not to a theme on its own. Themes in the Shopify Theme Store must meet a minimum average Lighthouse accessibility score of 90, and Dawn's code covers many WCAG 2.2 Level A and AA criteria out of the box. Whether your store's pages meet WCAG depends on the settings, content and apps you add.

Where do I fix accessibility issues in Dawn?

Most fixes are in three places. Image alt text lives in the Shopify admin, under the product's media. Colors, auto-rotate settings, headings and section text live in the theme editor. Anything about markup, such as a button with no name, lives in theme code or in the app that added it.

Should I switch from Dawn to Horizon for accessibility?

Not for accessibility alone. Horizon is Shopify's newer free theme and both are open source. The issues in this guide come mostly from settings, content and apps, and they follow you to any theme. Fix those first, and test any theme with a keyboard before you commit to it.