Image without an alt attribute
WCAG 2.2 1.1.1 Non-text content, Level A
28 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- A screen reader skips the image or reads out its file name, so a blind shopper does not learn what the product photo shows.
- Where it usually lives in a Shopify theme
- Product card and product media snippets, image banners, slideshow and image-with-text sections, and sometimes the logo in the header.
- Direction for a fix
- Output the alt text stored with the image, fall back to the product or section title, and give purely decorative images an empty alt="".
- Examples from the demo store
img.image__itemimg.news-drawer__image
Button without a name
WCAG 2.2 4.1.2 Name, role, value, Level A
4 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- The shopper hears “button” with no hint whether it closes a drawer, adds to cart or opens the menu.
- Where it usually lives in a Shopify theme
- Icon-only buttons: drawer close, slider arrows, quantity plus and minus, menu and search toggles.
- Direction for a fix
- Put an aria-label or visually hidden text on the button and hide the icon inside it with aria-hidden="true".
- Examples from the demo store
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
86 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- Labels, error messages and aria references can point at the wrong element, so a field or control may lose its name.
- Where it usually lives in a Shopify theme
- Sections rendered twice on one page, such as desktop and mobile headers, cart drawer and cart page, or country and language selectors in both header and footer.
- Direction for a fix
- Make generated ids unique, for example by adding the section id to them.
- Examples from the demo store
"localization_form", 3×"Search-in-quick-view", 2×"cart-link", 3×
No skip link
WCAG 2.2 2.4.1 Bypass blocks, Level A
4 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- A keyboard user has to tab through the whole header and menu on every page before reaching the content.
- Where it usually lives in a Shopify theme
- Right after the opening body tag in layout/theme.liquid.
- Direction for a fix
- Make “Skip to content” the first focusable link, pointing at the main element, and show it when it receives focus.
Page without an h1 heading
WCAG 2.2 1.3.1 Info and relationships, Level A
2 occurrences, found on: Home page, Product page
- Why it matters for shoppers
- Screen reader users often jump to the first-level heading to learn what a page is about.
- Where it usually lives in a Shopify theme
- The main title of a template: collection banner, product title in the main product section, cart title. Some templates style the title as a heading without using an h1.
- Direction for a fix
- Render the main title of every template as one h1.
aria-labelledby or aria-describedby points to a missing element
WCAG 2.2 4.1.2 Name, role, value, Level A
1 occurrence, found on: Collection page
- Why it matters for shoppers
- The element was meant to take its name or description from another element that is not on the page, so the screen reader has nothing to read.
- Where it usually lives in a Shopify theme
- Product cards that point at sale or sold-out badges which are only rendered in some cases, form error messages, dialogs.
- Direction for a fix
- Output the reference only when the target element is rendered, or always render the target.
- Examples from the demo store
aria-describedby → "a11y-refresh-page-message"
Alt text over 125 characters
WCAG 2.2 1.1.1 Non-text content, Level A
176 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- A screen reader user has to listen to a whole paragraph before reaching the price or the next product.
- Where it usually lives in a Shopify theme
- Product media alt text, often filled with the full product description.
- Direction for a fix
- Keep alt text to what the image shows in one short sentence and leave the details to the product description.
- Examples from the demo store
img.image__itemimgimg.banner-gallery__image