This is a sample. It was generated by our real pipeline
against a demonstration storefront we seeded with common theme problems, so you can see exactly what
you receive. The store and URLs are fictional; the findings, screenshots and fix instructions are real
output. Back to wideaisle.com
WideAisle
Store Accessibility Audit
WideAisle Demo Store
demo.wideaisle.com · 2026-07-07
6critical
8serious
1moderate
0minor
Distinct issue types found by the automated pass, affecting 16 elements.
Scope
All pages on https://demo.wideaisle.com
Page sampled
Template
/products/canvas-tote
product
Shopify stores are template-driven: issues found on a sampled page apply to all
pages built from that template (an issue on the sampled product page exists on every product page).
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.
For the store owner
6critical
blocks a task entirely for some shoppers
8serious
makes a task very difficult for some shoppers
1moderate
causes frustration or confusion
0minor
polish 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 is "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.
Start here
Images with no text description (critical, on product (2); detail in section 01).
Quick: minutes per element.
Invalid ARIA attributes (critical, on product (1); detail in section 02).
One for your theme developer.
ARIA widgets missing required attributes (critical, on product (1); detail in section 03).
One for your theme developer.
While someone is in the theme anyway, these are minutes each: Buttons with no accessible name, Form fields with no label, Text with insufficient color contrast.
The three highest-impact issues
01
Images with no text description
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
<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.
02
Invalid ARIA attributes
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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.
03
ARIA widgets missing required attributes
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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. The # column matches the numbered sections in "Findings in detail".
#
Issue
Where
Elements
Effort
WCAG
01
Images with no text description
product (2)
2
quick fix (minutes per element)
1.1.1 Non-text Content (A)
02
Invalid ARIA attributes
product (1)
1
theme developer
4.1.2 Name, Role, Value (A)
03
ARIA widgets missing required attributes
product (1)
1
theme developer
4.1.2 Name, Role, Value (A)
04
Buttons with no accessible name
product (1)
1
quick fix (minutes per element)
4.1.2 Name, Role, Value (A)
05
Form fields with no label
product (1)
1
quick fix (minutes per element)
4.1.2 Name, Role, Value (A)
06
Dropdown selectors with no label
product (1)
1
theme developer
4.1.2 Name, Role, Value (A)
07
Hidden elements that can still be focused
product (1)
1
theme developer
4.1.2 Name, Role, Value (A)
08
Text with insufficient color contrast
product (1)
1
quick fix (minutes per element)
1.4.3 Contrast (Minimum) (AA)
09
Embedded frames with no title
product (1)
1
quick fix (minutes per element)
4.1.2 Name, Role, Value (A)
10
Page language not declared
product (1)
1
quick fix (minutes per element)
3.1.1 Language of Page (A)
11
Links with no accessible name
product (1)
1
quick fix (minutes per element)
2.4.4 Link Purpose (In Context) (A)
12
Broken list structure
product (1)
1
theme developer
1.3.1 Info and Relationships (A)
13
Interactive controls nested inside each other
product (1)
1
theme developer
4.1.2 Name, Role, Value (A)
14
Scrollable areas keyboard users cannot reach
product (1)
1
theme developer
2.1.1 Keyboard (A)
15
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.
Scan record: axe-core 4.12.1 in 149.0.7827.55 · completed 2026-07-07 01:25:27 UTC.
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
01
Images with no text description
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
<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.
02
Invalid ARIA attributes
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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.
03
ARIA widgets missing required attributes
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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.
04
Buttons with no accessible name
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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.
05
Form fields with no label
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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.
06
Dropdown selectors with no label
CRITICAL
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.
From your product page; where capture allowed, the element is outlined in red.
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.
07
Hidden elements that can still be focused
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
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.
08
Text with insufficient color contrast
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
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.
09
Embedded frames with no title
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
<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.
10
Page language not declared
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
On your store now
<html>
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 }}">.
11
Links with no accessible name
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
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.
12
Broken list structure
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
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.
13
Interactive controls nested inside each other
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
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.
14
Scrollable areas keyboard users cannot reach
SERIOUS
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.
From your product page; where capture allowed, the element is outlined in red.
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.
15
Pinch-zoom disabled on mobile
MODERATE
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.
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 them 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. One row per pattern.
Note
Where
Elements
tabindex
product (1)
1
Heading levels that skip
product (1)
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.
Why axe flags these: 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"
Why axe flags these: 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="p
Why axe flags these: 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"
Why axe flags these: 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"
07 · Hidden elements that can still be focused aria-hidden-focus
selector: .lowcontrast
<p class="lowcontrast visually-big">Sale! Everything 20% off with code GOLDEN.</p>
Why axe flags these: 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
Why axe flags these: 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"
Why axe flags these: 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
Why axe flags these: 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>
Why axe flags these: 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>
Why axe flags these: 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.
