Button without a name
WCAG 2.2 4.1.2 Name, role, value, Level A
54 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
button.offcanvas-close-btnbutton.nav-link-iconbutton.swiper-nav
Link without a name
WCAG 2.2 2.4.4 Link purpose (in context), Level A
16 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.header-promo-linka.header-button
Form field without a label
WCAG 2.2 1.3.1 Info and relationships, Level A
4 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.facet-range (type="range")
Dropdown without a label
WCAG 2.2 1.3.1 Info and relationships, Level A
2 occurrences, found on: Collection 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#SortBy-mobileselect#SortBy
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
37 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
"quickview-template--20576824557820__collection_tabs_d6DhJn-9074202345724", 2×"template--20576824557820__collection_tabs_d6DhJn-1-0", 12×"template--20576824557820__collection_tabs_d6DhJn-1-1", 12×
Heading levels skip a step
WCAG 2.2 1.3.1 Info and relationships, Level A
3 occurrences, found on: Home page, Collection 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
aria-labelledby or aria-describedby points to a missing element
WCAG 2.2 4.1.2 Name, role, value, Level A
2 occurrences, 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-labelledby → "verticalTitle"aria-describedby → "a11y-refresh-page-message"
Page without an h1 heading
WCAG 2.2 1.3.1 Info and relationships, Level A
2 occurrences, found on: Product 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.
Icon without a text alternative or a decorative mark
WCAG 2.2 1.1.1 Non-text content, Level A
46 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
svg.icon-shippingsvg.icon-dropdownsvg.icon-arrow-left-lg
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.
Alt text over 125 characters
WCAG 2.2 1.1.1 Non-text content, Level A
1 occurrence, found on: Product 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