First 30 days
1. ARIA child roles are not inside their required parent
Critical severity. WCAG 1.3.1 (level A). Found on 72 elements across 4 pages: home page, content pages, articles, /es-US. Estimated effort: low.
- Who is affected
- Screen reader users hear orphaned items (e.g. "tab" or "menu item") without the surrounding widget context.
- Why it matters for the store
- Navigation menus and tabs may be confusing to screen reader users.
Found on your pages
https://example-store.com/ · section[data-testid="productDisplay-component"]:nth-child(3) > .product-carousel-block_section__5fbVd[data-testid="home product-display-carousel"] > .product-carousel_product-wrapper__IH_6k > div > .carousel_section__aQkWM[data-carousel-container="true"] > .carousel_carousel__mgqi_[data-children-to-show="5"] > li[aria-label="Slide 1 of 10"][data-is-active="true"][role="group"] > .product-card_product-card__1T7k9[aria-label="product"][role="listitem"]
<article class="product-card_product-card__1T7k9" data-testid="plp-productCard-6806745153738-select" aria-label="product" role="listitem">
https://example-store.com/pages/shop-men · section[data-testid="productDisplay-component"]:nth-child(3) > .product-carousel-block_section__5fbVd > .product-carousel_product-wrapper__IH_6k > div > .carousel_section__aQkWM[data-carousel-container="true"] > .carousel_carousel__mgqi_[data-children-to-show="5"] > li[aria-label="Slide 1 of 10"][data-is-active="true"][role="group"] > .product-card_product-card__1T7k9[aria-label="product"][role="listitem"]
<article class="product-card_product-card__1T7k9" data-testid="plp-productCard-6806745153738-select" aria-label="product" role="listitem">
https://example-store.com/blog/article/examplestore-leggings-fit-guide · .product-grid_container__3ktQ_:nth-child(30) > .product-grid_products-container__EVQlJ.product-grid_products-container--carousel-mobile__2q5W0 > .product-grid-row_container--two-column__CxeFr.product-grid-row_container__ez6Rg > .product-card_product-card__1T7k9[aria-label="product"][role="listitem"]:nth-child(1)
<article class="product-card_product-card__1T7k9" data-testid="plp-productCard-6535208435914-select" aria-label="product" role="listitem">
How to fix it
- Wrap child roles in the required parent (tab in tablist, menuitem in menu/menubar, option in listbox, listitem in list).
- Or remove the child role if the widget pattern is not intended.
Before
<ul><li role="menuitem"><a href="/new">New</a></li></ul>
After
<ul><li><a href="/new">New</a></li></ul>
- Shopify
- Often in header menu snippets; site navigation rarely needs menu roles, so removing them is usually correct.
- WooCommerce
- Often added by menu walker classes or mega-menu plugins; remove role="menuitem" from plain navigation links.
Check the fix: Navigate the menu with a screen reader and confirm items are announced as links in a list. Rule reference for aria-required-parent
2. Images are missing text alternatives
Critical severity. WCAG 1.1.1 (level A). Found on 24 elements across 8 pages: home page, collection pages, product pages, cart, content pages, blog, articles, /es-US. Estimated effort: low.
- Who is affected
- Screen reader users hear "image" or the file name instead of what the picture shows.
- Why it matters for the store
- Shoppers who cannot see images miss product details, and linked images may be impossible to identify.
Found on your pages
https://example-store.com/ · .button_button--white__RxQb0 > img[loading="lazy"]
<img src="/_next/static/media/ca.6f9bb158.svg" loading="lazy">
https://example-store.com/collections/bottoms · .button_button--white__RxQb0 > img[loading="lazy"]
<img src="/_next/static/media/ca.6f9bb158.svg" loading="lazy">
https://example-store.com/products/gift-card · .button_button--white__RxQb0 > img[loading="lazy"]
<img src="/_next/static/media/ca.6f9bb158.svg" loading="lazy">
How to fix it
- Add an alt attribute to every <img>.
- Describe meaningful images briefly (e.g. product name and key visual detail).
- Use alt="" for purely decorative images.
Before
<img src="linen-shirt-blue.jpg">
After
<img src="linen-shirt-blue.jpg" alt="Blue linen shirt, front view">
- Shopify
- Set alt text in Admin > Products > media (click the image > Add alt text); themes output it via image_tag or {{ image.alt | escape }}.
- WooCommerce
- Set Alternative Text in the Media Library for each image; product images use it automatically in most themes.
Check the fix: Navigate images with a screen reader and confirm meaningful ones are described and decorative ones are skipped. Rule reference for image-alt
3. Buttons have no name
Critical severity. WCAG 4.1.2 (level A). Found on 8 elements across 8 pages: home page, collection pages, product pages, cart, content pages, blog, articles, /es-US. Estimated effort: low.
- Who is affected
- Screen reader users hear only "button" and cannot tell what it does; voice control users cannot say its name.
- Why it matters for the store
- Icon buttons like add to cart, close, or quantity +/- may be unusable for some shoppers.
Found on your pages
https://example-store.com/ · .geolocation-region-selector_close__XRF6A
<button class="geolocation-region-selector_close__XRF6A" data-testid="storeSelector-close-select"><i class="icon-close"></i></button>
https://example-store.com/collections/bottoms · .geolocation-region-selector_close__XRF6A
<button class="geolocation-region-selector_close__XRF6A" data-testid="storeSelector-close-select"><i class="icon-close"></i></button>
https://example-store.com/products/gift-card · .geolocation-region-selector_close__XRF6A
<button class="geolocation-region-selector_close__XRF6A" data-testid="storeSelector-close-select"><i class="icon-close"></i></button>
How to fix it
- Add visible text inside the button, or visually hidden text.
- For icon-only buttons, add aria-label describing the action.
- Mark the icon with aria-hidden="true".
Before
<button class="qty-plus"><svg></svg></button>
After
<button class="qty-plus" aria-label="Increase quantity"><svg aria-hidden="true" focusable="false"></svg></button>
- Shopify
- Check header icons, cart drawer and quantity inputs (snippets/quantity-input or main-cart-items); add aria-label with a translation string, e.g. {{ 'products.product.quantity.increase' | t }}.
- WooCommerce
- Check header icons, mini-cart and quantity plugins; add aria-label in the template override.
Check the fix: Tab to each button with a screen reader and confirm it announces its purpose. Rule reference for button-name
4. Text has insufficient color contrast
Serious severity. WCAG 1.4.3 (level AA). Found on 794 elements across 8 pages: home page, collection pages, product pages, cart, content pages, blog, articles, /es-US. Estimated effort: low.
- Who is affected
- People with low vision, color deficiencies or using screens in bright light cannot read low-contrast text.
- Why it matters for the store
- Prices, buttons and product details may be hard to read for many shoppers, including on phones outdoors.
Found on your pages
https://example-store.com/ · .slick-active > div > .false.usp-revolving_usp__MSUC9[data-testid="usp-item-1-read"] > .usp-revolving_usp-inner__zNXD2.undefined > .usp-revolving_text-invert__dZOfX > a[rel="noopener noreferrer"][data-testid="usp-link-select"][target="_blank"]
<a href="https://support.https://example-store.com/en-US/article/delivery-information" data-testid="usp-link-select" rel="noopener noreferrer" target="_blank">Free standard shipping on orders over $75 </a>
https://example-store.com/collections/bottoms · div[data-index="0"] > div > .usp-revolving_usp--wrapped__1_c_H.usp-revolving_usp__MSUC9[data-testid="usp-item-0-read"] > .usp-revolving_usp-inner__zNXD2.undefined > .usp-revolving_text-invert__dZOfX > a[data-testid="usp-link-select"]
<a data-testid="usp-link-select" href="https://example-store.com/collections/last-chance">Last Chance Sale | Up to 50% off* Last Chance styles.</a>
https://example-store.com/products/gift-card · div[data-index="0"] > div > .usp-revolving_usp--wrapped__1_c_H.usp-revolving_usp__MSUC9[data-testid="usp-item-0-read"] > .usp-revolving_usp-inner__zNXD2.undefined > .usp-revolving_text-invert__dZOfX > a[data-testid="usp-link-select"]
<a data-testid="usp-link-select" href="https://example-store.com/collections/last-chance">Last Chance Sale | Up to 50% off* Last Chance styles.</a>
How to fix it
- Raise contrast to at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold).
- Adjust the text or background color in the theme settings or stylesheet.
- Check text on images and hover/sale states too.
Before
.price--sale { color: #ff8a8a; background: #fff; }
After
.price--sale { color: #c40000; background: #fff; }
- Shopify
- Adjust colors in Theme editor > Theme settings > Colors (color schemes); check each scheme used by sections.
- WooCommerce
- Adjust colors in Appearance > Customize (or the site editor Styles) and in page builder global colors.
Check the fix: Check the colors with a contrast checker (e.g. WebAIM) and confirm they meet the required ratio. Rule reference for color-contrast
5. Clickable targets are too small or too close together
Serious severity. WCAG 2.5.8 (level AA). Found on 92 elements across 3 pages: home page, content pages, /es-US. Estimated effort: low.
- Who is affected
- People with tremors, limited dexterity or using touch screens tap the wrong control.
- Why it matters for the store
- Mis-taps on small buttons (swatches, quantity, close) frustrate mobile shoppers.
Found on your pages
https://example-store.com/ · .seo-block_section__nzPbn > ul > li:nth-child(1) > ul > li:nth-child(1) > a
<a href="https://example-store.com/collections/leggings/womens">Gym Leggings</a>
https://example-store.com/pages/shop-men · .seo-block_section__nzPbn > ul > li:nth-child(1) > ul > li:nth-child(1) > a
<a href="https://example-store.com/collections/shorts/mens">Men's Workout Shorts</a>
https://example-store.com/es-US · .seo-block_section__nzPbn > ul > li:nth-child(1) > ul > li:nth-child(1) > a
<a href="https://example-store.com/es-US/collections/leggings/womens">Leggings de gimnasio</a>
How to fix it
- Make targets at least 24×24 CSS pixels, including padding.
- Or space small targets so a 24px circle centred on each does not overlap another target.
- Inline links within sentences are exempt.
Before
.swatch { width: 16px; height: 16px; margin: 2px; }
After
.swatch { min-width: 24px; min-height: 24px; margin: 4px; }
- Shopify
- Adjust swatch, pagination and icon button sizes in the theme CSS (assets/*.css) or Custom CSS.
- WooCommerce
- Adjust sizes for swatches, pagination and mini-cart remove links under Additional CSS.
Check the fix: Measure the flagged targets in DevTools and confirm each is at least 24×24px or adequately spaced. Rule reference for target-size
6. Custom input fields have no name
Serious severity. WCAG 4.1.2 (level A). Found on 16 elements across 8 pages: home page, collection pages, product pages, cart, content pages, blog, articles, /es-US. Estimated effort: low.
- Who is affected
- Screen reader users hear "edit text", "combo box" or "slider" without knowing what to enter.
- Why it matters for the store
- Custom search boxes, quantity pickers or price sliders may be unusable for some visitors.
Found on your pages
https://example-store.com/ · #dropdown-\:r0\:
<div id="dropdown-:r0:" data-testid="footer-storeSelector-select" class="dropdown_select__gtDIt store-selector_select__lTgwi store-selector_select--footer__PulPy" role="combobox" aria-labelledby="dropdown-label-:r0:" aria-expanded="false" aria-haspopup="listbox" tabindex="0">
https://example-store.com/collections/bottoms · #dropdown-\:r0\:
<div id="dropdown-:r0:" data-testid="footer-storeSelector-select" class="dropdown_select__gtDIt store-selector_select__lTgwi store-selector_select--footer__PulPy" role="combobox" aria-labelledby="dropdown-label-:r0:" aria-expanded="false" aria-haspopup="listbox" tabindex="0">
https://example-store.com/products/gift-card · #dropdown-\:r0\:
<div id="dropdown-:r0:" data-testid="footer-storeSelector-select" class="dropdown_select__gtDIt store-selector_select__lTgwi store-selector_select--footer__PulPy" role="combobox" aria-labelledby="dropdown-label-:r0:" aria-expanded="false" aria-haspopup="listbox" tabindex="0">
How to fix it
- Give the element a name with aria-labelledby pointing to its visible label, or aria-label.
- Prefer native <input>, <select> with a <label> where possible.
Before
<div role="combobox" aria-expanded="false"></div>
After
<span id="sort-lbl">Sort by</span>
<div role="combobox" aria-expanded="false" aria-controls="sort-list" aria-labelledby="sort-lbl"></div>
- Shopify
- Check custom search or filter app widgets; theme ones are in snippets/facets.liquid or predictive-search.
- WooCommerce
- Check price-filter and search plugins; add aria-labelledby in their templates or ask the vendor.
Check the fix: Focus the field with a screen reader and confirm it announces a descriptive label. Rule reference for aria-input-field-name
7. Lists contain invalid children
Serious severity. WCAG 1.3.1 (level A). Found on 10 elements across 3 pages: home page, content pages, /es-US. Estimated effort: low.
- Who is affected
- Screen reader users may hear the wrong item count or lose list structure.
- Why it matters for the store
- Navigation menus and product lists may be announced inaccurately.
Found on your pages
https://example-store.com/ · section[data-testid="productDisplay-component"]:nth-child(3) > .product-carousel-block_section__5fbVd[data-testid="home product-display-carousel"] > .product-carousel_product-wrapper__IH_6k > div > .carousel_section__aQkWM[data-carousel-container="true"] > .carousel_carousel__mgqi_[data-children-to-show="5"]
<ul class="carousel_carousel__mgqi_" data-children-to-show="5" style="--childrenToShow:5">
https://example-store.com/pages/shop-men · section[data-testid="productDisplay-component"]:nth-child(3) > .product-carousel-block_section__5fbVd > .product-carousel_product-wrapper__IH_6k > div > .carousel_section__aQkWM[data-carousel-container="true"] > .carousel_carousel__mgqi_[data-children-to-show="5"]
<ul class="carousel_carousel__mgqi_" data-children-to-show="5" style="--childrenToShow:5">
https://example-store.com/es-US · ul[data-children-to-show="5"]
<ul class="carousel_carousel__mgqi_" data-children-to-show="5" style="--childrenToShow:5">
How to fix it
- Only put <li>, <script> or <template> directly inside <ul> and <ol>.
- Move other elements inside an <li>.
Before
<ul><div><a href="/new">New</a></div></ul>
After
<ul><li><a href="/new">New</a></li></ul>
- Shopify
- Check menu and product grid snippets for wrappers directly inside <ul>.
- WooCommerce
- Check product loop templates (loop-start.php) and menu output for extra wrappers.
Check the fix: Navigate the list with a screen reader and confirm it announces the correct number of items. Rule reference for list
8. Links have no text
Serious severity. WCAG 2.4.4, 4.1.2 (level A). Found on 1 element across 1 page: articles. Estimated effort: low.
- Who is affected
- Screen reader users hear "link" or the URL, and cannot tell where it goes.
- Why it matters for the store
- Linked product images, logos and social icons may be impossible to identify for screen reader users.
Found on your pages
How to fix it
- Add link text, or alt text on an image inside the link.
- For icon-only links, add aria-label describing the destination.
- Hide decorative icons with aria-hidden="true".
Before
<a href="https://instagram.com/acme"><svg class="icon-instagram"></svg></a>
After
<a href="https://instagram.com/acme" aria-label="Acme on Instagram"><svg class="icon-instagram" aria-hidden="true" focusable="false"></svg></a>
- Shopify
- Check social icons, logo and product card links; many themes include visually hidden text in snippets/social-icons.liquid.
- WooCommerce
- Check social icon widgets, logo markup and linked product thumbnails.
Check the fix: Open the screen reader links list and confirm every link has a meaningful name. Rule reference for link-name