For the store owner
6
criticalblocks a task entirely for some shoppers
8
seriousmakes a task very difficult for some shoppers
1
moderatecauses frustration or confusion
0
minorpolish issue with accessibility impact
Counts are distinct issue types; together they affect 16 elements across the sampled templates.
The scan found 15 distinct issue types affecting 16 elements. The most important problem: images with no text description, affecting 2 elements on your product page. Next: invalid aria attributes, on product. Because your store is template-driven, fixing an issue once in the theme usually fixes it on every page built from that template. Hand the fix list on the next page to whoever maintains your theme; each item links to full detail.
Three fixes to make this week
- Images with no text description (critical, on product (2)). Quick: minutes per element.
- Buttons with no accessible name (critical, on product (1)). Quick: minutes per element.
- Form fields with no label (critical, on product (1)). Quick: minutes per element.
The three highest-impact issues
CRITICAL
Images with no text description
WCAG 1.1.1 Non-text Content (A) · found on: product (2) ·
2 elements · quick fix (minutes per element)
Product and collection images have no alternative text. A blind shopper using a screen reader hears nothing at all, or a filename like "IMG_2041.jpg", instead of what the product looks like. In practice the product is invisible to them.
On your store now
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" width="120" height="90">Fixed (example)
<img alt="[describe this product photo]" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" width="120" height="90">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: In Shopify admin, open each product, go to Media, click the image and choose "Add alt text". Describe the product ("Green ceramic mug with bamboo lid"), not keywords. For banner and section images, the alt field is in the theme editor on each section. For images hardcoded in the theme, add alt="..." to the img tag.
CRITICAL
Invalid ARIA attributes
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
Elements carry ARIA attributes that are not valid for them. Screen readers can end up announcing wrong or contradictory information about a control.
How to fix: Remove or correct the flagged aria attribute in the theme or app markup. The failure summary in the appendix names the exact attribute.
CRITICAL
ARIA widgets missing required attributes
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
A custom widget declares an ARIA role but leaves out attributes that role requires, so screen readers cannot report its state, such as whether an option is selected.
How to fix: Add the required aria attribute named in the failure summary, or replace the custom widget with a native element like select or button, which handle this for free.
The fix list
Every distinct issue, one row each, ordered by severity. Print it, hand it to your developer,
tick them off. Detail cards for each row follow in the findings section.
| Issue | Where | Elements | Effort | WCAG |
|---|
| ☐ | Images with no text description | product (2) |
2 | quick fix (minutes per element) | 1.1.1 Non-text Content (A) |
| ☐ | Invalid ARIA attributes | product (1) |
1 | theme developer | 4.1.2 Name, Role, Value (A) |
| ☐ | ARIA widgets missing required attributes | product (1) |
1 | theme developer | 4.1.2 Name, Role, Value (A) |
| ☐ | Buttons with no accessible name | product (1) |
1 | quick fix (minutes per element) | 4.1.2 Name, Role, Value (A) |
| ☐ | Form fields with no label | product (1) |
1 | quick fix (minutes per element) | 4.1.2 Name, Role, Value (A) |
| ☐ | Dropdown selectors with no label | product (1) |
1 | theme developer | 4.1.2 Name, Role, Value (A) |
| ☐ | Hidden elements that can still be focused | product (1) |
1 | theme developer | 4.1.2 Name, Role, Value (A) |
| ☐ | Text with insufficient color contrast | product (1) |
1 | quick fix (minutes per element) | 1.4.3 Contrast (Minimum) (AA) |
| ☐ | Embedded frames with no title | product (1) |
1 | quick fix (minutes per element) | 4.1.2 Name, Role, Value (A) |
| ☐ | Page language not declared | product (1) |
1 | quick fix (minutes per element) | 3.1.1 Language of Page (A) |
| ☐ | Links with no accessible name | product (1) |
1 | quick fix (minutes per element) | 2.4.4 Link Purpose (In Context) (A) |
| ☐ | Broken list structure | product (1) |
1 | theme developer | 1.3.1 Info and Relationships (A) |
| ☐ | Interactive controls nested inside each other | product (1) |
1 | theme developer | 4.1.2 Name, Role, Value (A) |
| ☐ | Scrollable areas keyboard users cannot reach | product (1) |
1 | theme developer | 2.1.1 Keyboard (A) |
| ☐ | Pinch-zoom disabled on mobile | product (1) |
1 | quick fix (minutes per element) | 1.4.4 Resize Text (AA) |
Methodology
Each page in scope was rendered in a real browser at two sizes, desktop (1440×900) and mobile (390×844),
and inspected with axe-core, the open-source accessibility engine by Deque Systems, against
WCAG 2.1 A and AA rules.
Honest coverage disclosure: automated tools detect, on average, about 57% of accessibility
issues by volume (Deque's own study; older industry estimates were lower). The remainder needs a human; the section "What automated checks cannot see" lists exactly what that means.
No composite "compliance score" appears in this report, by design: a score implies
certification, which no tool can honestly provide. We report what fails, how much it matters, and how to fix it.
Findings in detail
CRITICAL
Images with no text description
WCAG 1.1.1 Non-text Content (A) · found on: product (2) ·
2 elements · quick fix (minutes per element)
Product and collection images have no alternative text. A blind shopper using a screen reader hears nothing at all, or a filename like "IMG_2041.jpg", instead of what the product looks like. In practice the product is invisible to them.
On your store now
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" width="120" height="90">Fixed (example)
<img alt="[describe this product photo]" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" width="120" height="90">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: In Shopify admin, open each product, go to Media, click the image and choose "Add alt text". Describe the product ("Green ceramic mug with bamboo lid"), not keywords. For banner and section images, the alt field is in the theme editor on each section. For images hardcoded in the theme, add alt="..." to the img tag.
CRITICAL
Invalid ARIA attributes
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
Elements carry ARIA attributes that are not valid for them. Screen readers can end up announcing wrong or contradictory information about a control.
How to fix: Remove or correct the flagged aria attribute in the theme or app markup. The failure summary in the appendix names the exact attribute.
CRITICAL
ARIA widgets missing required attributes
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
A custom widget declares an ARIA role but leaves out attributes that role requires, so screen readers cannot report its state, such as whether an option is selected.
How to fix: Add the required aria attribute named in the failure summary, or replace the custom widget with a native element like select or button, which handle this for free.
CRITICAL
Buttons with no accessible name
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · quick fix (minutes per element)
Icon-only buttons such as search, cart, menu and close are announced as just "button". A blind shopper cannot tell the add-to-cart button from the close button without pressing it to find out.
On your store now
<button>Fixed (example)
<button aria-label="[what this button does, e.g. Search]">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: Add aria-label="Search" (and so on) to each button, or put visually hidden text inside it. In most themes these buttons are in sections/header.liquid, snippets/cart-drawer.liquid, and the product form snippets.
CRITICAL
Form fields with no label
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · quick fix (minutes per element)
Input fields, commonly the newsletter signup in the footer, quantity boxes, or search, have no label. Screen reader users are handed an unnamed text box and have to guess what to type in it.
On your store now
<input type="email" name="email">Fixed (example)
<input aria-label="[what to type here, e.g. Email address]" type="email" name="email">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: Add a label element tied to the input's id, or aria-label on the input. The footer newsletter form is usually in sections/footer.liquid, and quantity inputs are in the product form snippet.
CRITICAL
Dropdown selectors with no label
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
A dropdown, typically the size or color picker, has no label. A screen reader announces an empty, unnamed menu, so a blind shopper cannot tell which option list they are changing. That leads to wrong sizes in the cart, or to giving up.
On your store now
<select>Fixed (example)
<select aria-label="[option name, e.g. Size]">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: In the product form snippet (often snippets/product-variant-picker.liquid), give each select element a label element naming the option ("Size", "Color"), or add aria-label. The sort-by dropdown on collection pages usually has the same problem.
SERIOUS
Hidden elements that can still be focused
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
Parts of the page are marked hidden from assistive technology (aria-hidden="true") but still contain buttons or links a keyboard can reach. A keyboard or screen reader user lands on a control that, as far as their software is concerned, does not exist.
How to fix: The usual culprits are carousels and quick-view modals from themes or apps: inactive slides are aria-hidden but their links stay tabbable. Add tabindex="-1" to controls inside aria-hidden regions, or put the inert attribute on the hidden container.
SERIOUS
Text with insufficient color contrast
WCAG 1.4.3 Contrast (Minimum) (AA) · found on: product (1) ·
1 element · quick fix (minutes per element)
Some text does not stand out enough from its background to meet the WCAG minimum of 4.5:1 for body text. Shoppers with low vision may be unable to read prices, product descriptions or button labels. This group is a meaningful share of online buyers.
How to fix: Most contrast failures trace back to theme settings. In the theme editor, open Theme settings, then Colors. Darken the failing text color or lighten the background, and check button and badge color pairs. A free contrast checker such as WebAIM's will tell you when a pair passes 4.5:1.
SERIOUS
Embedded frames with no title
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · quick fix (minutes per element)
Embedded content (videos, app widgets, maps) sits in an iframe with no title. Screen readers announce an anonymous "frame", so the shopper cannot tell whether it holds a size chart or a video.
On your store now
<iframe src="about:blank" width="200" height="80">Fixed (example)
<iframe title="[what this frame shows, e.g. Product video]" src="about:blank" width="200" height="80">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: Add title="Product video" (or whatever fits) to the iframe tag. For iframes injected by apps you cannot edit, ask the app vendor to fix it, and list it in your accessibility statement in the meantime.
SERIOUS
Page language not declared
WCAG 3.1.1 Language of Page (A) · found on: product (1) ·
1 element · quick fix (minutes per element)
The page does not declare its language, so screen readers guess. A wrong guess reads your English product names with, say, French pronunciation rules, which can be unintelligible.
Fixed (example)
<html lang="en">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: In layout/theme.liquid, set the lang attribute on the html tag: <html lang="{{ request.locale.iso_code }}">.
SERIOUS
Links with no accessible name
WCAG 2.4.4 Link Purpose (In Context) (A) · 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · quick fix (minutes per element)
Icon-only links (logo, cart, social icons) are announced by screen readers as just "link". A shopper who cannot see the icon has no way to know whether a link opens the cart or leaves the site.
On your store now
<a href="/cart">Fixed (example)
<a aria-label="[where this link goes, e.g. Cart]" href="/cart">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: Add a visually hidden label inside the link, like <span class="visually-hidden">Cart</span> (most Shopify themes ship this utility class), or set aria-label="Cart" on the a tag. Header, footer and social links live in sections/header.liquid and sections/footer.liquid in most themes.
SERIOUS
Broken list structure
WCAG 1.3.1 Info and Relationships (A) · found on: product (1) ·
1 element · theme developer
A list contains elements that are not list items. Screen readers announce lists by size ("list, 4 items"); broken structure makes counts wrong or splits one list into several, which is disorienting when navigating collections or menus.
How to fix: Inside <ul> or <ol>, only <li> elements are allowed as direct children. Move stray <div> or text nodes into an <li> or out of the list. Common in customized menus and footer link blocks.
SERIOUS
Interactive controls nested inside each other
WCAG 4.1.2 Name, Role, Value (A) · found on: product (1) ·
1 element · theme developer
A clickable element sits inside another clickable element, such as a button inside a product-card link. Common in app-generated cards. Screen readers and keyboards behave unpredictably here, and some users cannot reach the inner control at all.
How to fix: Restructure the card so the link and the button are siblings rather than nested. If the markup comes from an app (wishlist or quick-view buttons injected into cards), report it to the app vendor.
SERIOUS
Scrollable areas keyboard users cannot reach
WCAG 2.1.1 Keyboard (A) · WCAG 2.1.3 · found on: product (1) ·
1 element · theme developer
A region scrolls with a mouse or touch but cannot be reached or scrolled with a keyboard. Keyboard-only shoppers are locked out of whatever is inside, often product descriptions or size tables.
How to fix: Add tabindex="0" and an aria-label to the scrollable container so keyboard users can focus it and scroll with the arrow keys.
MODERATE
Pinch-zoom disabled on mobile
WCAG 1.4.4 Resize Text (AA) · found on: product (1) ·
1 element · quick fix (minutes per element)
The theme sets user-scalable=no or maximum-scale=1, which blocks pinch-to-zoom on phones. Shoppers with low vision literally cannot enlarge your product photos or text. This is a one-line fix.
On your store now
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">Fixed (example)
<meta name="viewport" content="width=device-width, initial-scale=1">
Bracketed text is yours to write; everything else is your actual markup.
How to fix: In layout/theme.liquid, find the meta name="viewport" tag and delete user-scalable=no and any maximum-scale value. The result should look like: content="width=device-width, initial-scale=1".
Items that need human review
Automated checks could not decide these (for example, text contrast over a background image).
They are not counted in the totals above. The Full Audit resolves each one by hand.
| Check | Where | Elements | Why it needs a human |
|---|
| Duplicated IDs on repeated sections | product | 1 | Fix any of the following:
Document has multiple elements referenced with ARIA with the same id attribute: size-hint |
| Text with insufficient color contrast | product | 1 | Fix any of the following:
Element's background color could not be determined due to a background image |
What automated checks cannot see
Automated tools detect about 57% of accessibility issues by volume. The other 43% live in the
checks below, which require a person. This is the exact scope of the Full Audit's human pass;
we list it so you know what this report does and does not cover.
| Check | Why automation cannot decide it |
|---|
| Focus visibility and order through the buying flow | Whether you can SEE where keyboard focus is, and whether it moves in a sensible order, is a judgment call. |
| Keyboard traps | Only actually tabbing through the store reveals a widget you can enter but not leave. |
| Cart drawer and modal behavior | Focus must move into the dialog, stay there, and return on close; tools cannot follow the interaction. |
| Alt text quality | Automation checks that alt text exists, not whether "IMG_2041" or "shoe" actually describes the product. |
| Variant selection announcements | Whether choosing a size is announced to a screen reader requires listening to one. |
| Add-to-cart feedback | A silent success is a failure for a blind shopper; only a screen-reader pass hears it. |
| Form error announcements | Errors must be announced and identify the field; tools cannot judge the experience. |
| 200% zoom and 320px reflow | Whether content survives zoom without loss or sideways scrolling needs eyes on it. |
| Contrast over images | Text over photos and gradients cannot be measured automatically; these appear in the needs-review list above. |
| Carousel and motion behavior | Whether moving content can actually be paused is an interaction test. |
Advisory notes (best practices)
These are not WCAG failures and are excluded from the counts above; they are improvements
recognized as good practice.
| Note | Where | Elements |
|---|
| tabindex | product | 1 |
| Heading levels that skip | product | 1 |
Appendix: technical details
For your developer: the exact elements behind each finding. Selectors are CSS paths
into your live theme; snippets are the failing HTML at scan time.
Images with no text description image-alt
Rule reference: https://dequeuniversity.com/rules/axe/4.12/image-alt?application=playwright
selector: img:nth-child(3)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" width="120" height="90">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
plus 1 more element(s) with the same pattern.
Invalid ARIA attributes aria-allowed-attr
Rule reference: https://dequeuniversity.com/rules/axe/4.12/aria-allowed-attr?application=playwright
selector: div:nth-child(11)
<div aria-checked="true">Subscribe and save</div>
Fix all of the following:
ARIA attribute is not allowed: aria-checked="true"
ARIA widgets missing required attributes aria-required-attr
Rule reference: https://dequeuniversity.com/rules/axe/4.12/aria-required-attr?application=playwright
selector: div[role="checkbox"]
<div role="checkbox" tabindex="0">Gift wrap</div>
Fix any of the following:
Required ARIA attribute not present: aria-checked
Buttons with no accessible name button-name
Rule reference: https://dequeuniversity.com/rules/axe/4.12/button-name?application=playwright
selector: header > button
<button><svg width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle></svg></button>
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"
Form fields with no label label
Rule reference: https://dequeuniversity.com/rules/axe/4.12/label?application=playwright
selector: input[type="email"]
<input type="email" name="email">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Dropdown selectors with no label select-name
Rule reference: https://dequeuniversity.com/rules/axe/4.12/select-name?application=playwright
selector: select
<select>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Hidden elements that can still be focused aria-hidden-focus
Rule reference: https://dequeuniversity.com/rules/axe/4.12/aria-hidden-focus?application=playwright
selector: div[aria-hidden="true"]
<div aria-hidden="true"><button>Hidden add to cart</button></div>
Fix all of the following:
Focusable content should be disabled or be removed from the DOM
Text with insufficient color contrast color-contrast
Rule reference: https://dequeuniversity.com/rules/axe/4.12/color-contrast?application=playwright
selector: .lowcontrast
<p class="lowcontrast visually-big">Sale! Everything 20% off with code GOLDEN.</p>
Fix any of the following:
Element has insufficient color contrast of 1.91 (foreground color: #bbbbbb, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1
Embedded frames with no title frame-title
Rule reference: https://dequeuniversity.com/rules/axe/4.12/frame-title?application=playwright
selector: iframe
<iframe src="about:blank" width="200" height="80"></iframe>
Fix any of the following:
Element has no title attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element's default semantics were not overridden with role="none" or role="presentation"
Page language not declared html-has-lang
Rule reference: https://dequeuniversity.com/rules/axe/4.12/html-has-lang?application=playwright
selector: html
<html>
Fix any of the following:
The <html> element does not have a lang attribute
Links with no accessible name link-name
Rule reference: https://dequeuniversity.com/rules/axe/4.12/link-name?application=playwright
selector: a[href$="cart"]
<a href="/cart"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 6h15l-1.5 9h-12z"></path></svg></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Broken list structure list
Rule reference: https://dequeuniversity.com/rules/axe/4.12/list?application=playwright
selector: ul
<ul>
<li>Free shipping</li>
<div>30-day returns</div>
</ul>
Fix all of the following:
List element has direct children that are not allowed: div
Interactive controls nested inside each other nested-interactive
Rule reference: https://dequeuniversity.com/rules/axe/4.12/nested-interactive?application=playwright
selector: main > button
<button>Quick view <a href="/products/golden-tee">details</a></button>
Fix any of the following:
Element has focusable descendants
Scrollable areas keyboard users cannot reach scrollable-region-focusable
Rule reference: https://dequeuniversity.com/rules/axe/4.12/scrollable-region-focusable?application=playwright
selector: .scrollbox
<div class="scrollbox">
<p>Care instructions line 1</p><p>line 2</p><p>line 3</p><p>line 4</p><p>line 5</p><p>line 6</p>
</div>
Fix any of the following:
Element should have focusable content
Element should be focusable
Pinch-zoom disabled on mobile meta-viewport
Rule reference: https://dequeuniversity.com/rules/axe/4.12/meta-viewport?application=playwright
selector: meta[name="viewport"]
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
Fix any of the following:
user-scalable=no on <meta> tag disables zooming on mobile devices
Duplicated IDs on repeated sections duplicate-id-aria (needs human review)
selector: span:nth-child(7)
<span id="size-hint">Runs small, so size up.</span>
Fix any of the following:
Document has multiple elements referenced with ARIA with the same id attribute: size-hint
Text with insufficient color contrast color-contrast (needs human review)
selector: .bg-image-text
<div class="bg-image-text">Members get early access to drops.</div>
Fix any of the following:
Element's background color could not be determined due to a background image
Prepared by WideAisle · wideaisle.com · This report is an accessibility assessment, not legal advice, and not a guarantee or certification of compliance with the ADA, the European Accessibility Act, or any other law. Fixing the issues it identifies reduces barriers for shoppers with disabilities and reduces legal risk, but nothing can eliminate that risk entirely.
