Hidden from screen readers but still reachable with Tab
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
- A keyboard user lands on an element that the screen reader does not announce.
- Where it usually lives in a Shopify theme
- Cloned carousel slides, off-screen drawers and mobile menus hidden with aria-hidden, quick add buttons inside hidden slides.
- Direction for a fix
- When a region is hidden with aria-hidden, take its controls out of the tab order too, with tabindex="-1" or the inert attribute.
- Examples from the demo store
button.layout--closebutton.layout--previousbutton.layout--next
Link without a name
WCAG 2.2 2.4.4 Link purpose (in context), Level A
10 occurrences, found on: Home page, Collection 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.featured-grid--item--media
Button without a name
WCAG 2.2 4.1.2 Name, role, value, Level A
10 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.account--rootbutton.logo-list--imagebutton.product-media--thumb
aria-labelledby or aria-describedby points to a missing element
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
- 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 → "search--x-view--4634275315767-color"aria-labelledby → "search--y-view--4634275315767-color"
The same id is used more than once
WCAG 2.2 4.1.2 Name, role, value, Level A
5 occurrences, found on: Product 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
"collapsible-row-1", 2×"collapsible-row-2", 2×"collapsible-row-3", 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
h1.header--logoh2.header--logo
Page without an h1 heading
WCAG 2.2 1.3.1 Info and relationships, Level A
1 occurrence, found on: 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
32 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