Form field without a label
WCAG 2.2 1.3.1 Info and relationships, Level A
225 occurrences, found on: Collection page
- Why it matters for shoppers
- Without a label a screen reader only says “edit text”, so the shopper cannot tell whether the field is for an e-mail address, a quantity or a discount code.
- Where it usually lives in a Shopify theme
- Newsletter sign-up in the footer, the search field in the header, quantity fields in the cart, price range filters on collections.
- Direction for a fix
- Connect every field to a label element with for and id (it may be visually hidden) or give it an aria-label. A placeholder is not a label.
- Examples from the demo store
input.filter-item__checkbox (type="checkbox")input.input (type="number")input.filter-item__radio (type="radio")
Dropdown without a label
WCAG 2.2 1.3.1 Info and relationships, Level A
17 occurrences, found on: Home page, Collection page, Product page, Cart 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.quick-search__type-selectselect#variant-selector-template--26660740301081__main
Link without a name
WCAG 2.2 2.4.4 Link purpose (in context), Level A
2 occurrences, found on: Product 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
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
216 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
"baby-detergent", 4×"bags", 4×"baskets", 4×
Empty heading
WCAG 2.2 1.3.1 Info and relationships, Level A
9 occurrences, found on: Home page, Collection page, Product 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
h1.header__logoh2.ff-body
Positive tabindex changes the tab order
WCAG 2.2 2.4.3 Focus order, Level A
4 occurrences, found on: Home page, Collection page, Product page, Cart page
- Why it matters for shoppers
- The keyboard focus jumps to these elements first, out of reading order.
- Where it usually lives in a Shopify theme
- Sliders, pop-ups, newsletter modals and custom widgets.
- Direction for a fix
- Remove positive tabindex values. Use tabindex="0" where needed and order elements in the markup.
- Examples from the demo store
Heading levels skip a step
WCAG 2.2 1.3.1 Info and relationships, Level A
2 occurrences, found on: Product page, Cart 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
Page without an h1 heading
WCAG 2.2 1.3.1 Info and relationships, Level A
1 occurrence, found on: Collection 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.
Icon without a text alternative or a decorative mark
WCAG 2.2 1.1.1 Non-text content, Level A
49 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
More than one h1 heading on the page
WCAG 2.2 1.3.1 Info and relationships, Level A
1 occurrence, found on: Home 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.