Link without a name
WCAG 2.2 2.4.4 Link purpose (in context), Level A
76 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
a.icona.small-block-topa.logo-list-block
Image without an alt attribute
WCAG 2.2 1.1.1 Non-text content, Level A
73 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
imgimg.desktop-only-mediaimg.loader-target
Clickable element that is not a button or link
WCAG 2.2 4.1.2 Name, role, value, Level A
13 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- A div or span with a click handler cannot be reached with the Tab key and is not announced as clickable.
- Where it usually lives in a Shopify theme
- Custom colour swatches, accordions, tabs and quick view triggers built from div or span elements.
- Direction for a fix
- Use a button element for actions and a link for navigation.
- Examples from the demo store
div#block-template--19306870014233__26b67f67-cbc4-447f-b308-ff82b4953c74-1686433379655462fe-2div#block-41a7a086-72e1-41dd-a950-33b6c4358f31div#block-template--18194487083289__067e8ff0-4076-4e93-8118-d38b0bf41e6e-1678466762b1d973a2-2
Dropdown without a label
WCAG 2.2 1.3.1 Info and relationships, Level A
6 occurrences, found on: Home page, Product page
- Why it matters for shoppers
- A shopper who cannot see the page does not know whether the dropdown chooses a size, a colour, a sort order or a country.
- Where it usually lives in a Shopify theme
- Variant pickers on the product page, the sort menu on collections, country and language selectors.
- Direction for a fix
- Name each dropdown with a label element (for and id) or an aria-label such as “Size” or “Sort by”.
- Examples from the demo store
select#option1select#option2select.barracuda
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
21 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", 2×"-1", 2×"-2", 2×
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
3 occurrences, found on: Home page, Collection page, Cart 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.
Heading levels skip a step
WCAG 2.2 1.3.1 Info and relationships, Level A
2 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
Empty heading
WCAG 2.2 1.3.1 Info and relationships, Level A
1 occurrence, found on: Collection 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
Icon without a text alternative or a decorative mark
WCAG 2.2 1.1.1 Non-text content, Level A
35 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- If the icon carries meaning, such as a payment method or “free shipping”, a screen reader user misses it. If it is decoration, it should be hidden from screen readers.
- Where it usually lives in a Shopify theme
- Icon snippets, payment icons in the footer, trust and feature icons.
- Direction for a fix
- Hide decorative icons with aria-hidden="true". Give meaningful icons role="img" and an aria-label or a title element.
- What the test can see
- The test cannot tell a decorative icon from a meaningful one, so each of these needs a quick look.
- Examples from the demo store