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.drawer__logo-imageimg.logo__imageimg.is-loading
Link without a name
WCAG 2.2 2.4.4 Link purpose (in context), Level A
8 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- A screen reader announces “link” and nothing else, so the shopper cannot tell where it leads.
- Where it usually lives in a Shopify theme
- Icon links in the header (account, cart), social media icons in the footer, image-only links on product cards and collection tiles.
- Direction for a fix
- Add visually hidden text or an aria-label to icon links, for example “Cart” or “Instagram”. For an image link, give the image an alt text.
- Examples from the demo store
Alt text is a file name or a placeholder word
WCAG 2.2 1.1.1 Non-text content, Level A
148 occurrences, found on: Home page, Collection page, Cart page
- Why it matters for shoppers
- Hearing “IMG_2841.jpg” or “image” tells a screen reader user nothing about the product.
- Where it usually lives in a Shopify theme
- Mostly content: alt text entered in the Shopify admin for product media and section images. Some themes fall back to the file name when the alt text is empty.
- Direction for a fix
- Describe the image in the admin, and in the theme fall back to the product or section title instead of the file name.
- Examples from the demo store
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
8 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
"customer_login_link", 2×"customer_register_link", 2×
Empty heading
WCAG 2.2 1.3.1 Info and relationships, Level A
4 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- A screen reader announces a heading with nothing in it.
- Where it usually lives in a Shopify theme
- Heading blocks left blank in the theme editor, or heading tags that wrap only an icon.
- Direction for a fix
- Do not output the heading tag when its setting is empty.
- Examples from the demo store
Heading levels skip a step
WCAG 2.2 1.3.1 Info and relationships, Level A
3 occurrences, found on: Home page, Product page
- Why it matters for shoppers
- People who move through a page by headings expect the levels to nest. A jump from h2 to h4 suggests a missing part.
- Where it usually lives in a Shopify theme
- Section headings, product card titles and footer column headings, where the level is chosen for its font size.
- Direction for a fix
- Choose heading levels from the structure of the page and set the size with a class.
- Examples from the demo store
More than one h1 heading on the page
WCAG 2.2 1.3.1 Info and relationships, Level A
2 occurrences, found on: Product page, Cart page
- Why it matters for shoppers
- With two or more first-level headings it is harder to tell which one names the page.
- Where it usually lives in a Shopify theme
- A logo wrapped in an h1 on every page, or section headings that can be set to h1 in the theme editor.
- Direction for a fix
- Keep h1 for the main title of the page. Wrap the logo in an h1 only on the home page and let sections start at h2.