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
Dropdown without a label
WCAG 2.2 1.3.1 Info and relationships, Level A
1 occurrence, found on: 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#product-select-6588533953
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
16 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×"country-heading-181", 2×"country-list-181", 2×
Empty heading
WCAG 2.2 1.3.1 Info and relationships, Level A
4 occurrences, found on: Home 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
h2.countdown__item-heading
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.
No main landmark
WCAG 2.2 1.3.1 Info and relationships, Level A
3 occurrences, found on: Home page, Product page, Cart page
- Why it matters for shoppers
- Screen reader users jump to the main landmark to skip the header on every page.
- Where it usually lives in a Shopify theme
- The layout file (layout/theme.liquid), around the page content.
- Direction for a fix
- Wrap the page content in a main element with an id, for example id="MainContent".
Heading levels skip a step
WCAG 2.2 1.3.1 Info and relationships, Level A
1 occurrence, found on: Home 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
Icon without a text alternative or a decorative mark
WCAG 2.2 1.1.1 Non-text content, Level A
10 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