Hidden from screen readers but still reachable with Tab
WCAG 2.2 4.1.2 Name, role, value, Level A
6 occurrences, found on: Home page, Product 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
a.promo-grid__slide-linka.hero__slide-linktextarea.hide
Link without a name
WCAG 2.2 2.4.4 Link purpose (in context), Level A
2 occurrences, found on: Home 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
Form field 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
- 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.price-range__input (type="text")
Image without an alt attribute
WCAG 2.2 1.1.1 Non-text content, Level A
1 occurrence, found on: Home 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
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-single__variants
Button without a name
WCAG 2.2 4.1.2 Name, role, value, Level A
1 occurrence, found on: Product 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.product__thumb-arrow
aria-labelledby or aria-describedby points to a missing element
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
- 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 → "Sublabel-2"aria-labelledby → "Sublabel-3"aria-labelledby → "Sublabel-4"
Heading levels skip a step
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
- 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.