Guides
Fixing Shopify accessibility warnings
The messages below come straight from Google PageSpeed Insights and Lighthouse. Each guide explains what the warning means, where it comes from in a Shopify theme and how to fix it in code. Percentages show how many of the 3,151 Shopify homepages in our study had the issue.
“Background and foreground colors do not have a sufficient contrast ratio.”
Fix “Background and foreground colors do not have a sufficient contrast ratio” in Shopify
The most common accessibility failure on Shopify stores. Usually a handful of theme colors cause dozens of flagged elements. Found on 75.3% of stores.
“Links do not have a discernible name.”
Fix “Links do not have a discernible name” in Shopify
Icon links for cart, account, search and social media are announced as just “link” by screen readers. Found on 45% of stores.
“Image elements do not have [alt] attributes.”
Fix “Image elements do not have [alt] attributes” in Shopify
Missing alt text has two sources in Shopify: theme code that drops the alt attribute, and product images without descriptions. Found on 29.8% of stores.
“Buttons do not have an accessible name.”
Fix “Buttons do not have an accessible name” in Shopify
Quantity plus and minus, slider arrows, close icons and menu toggles are the usual culprits. This one can block purchases. Found on 11.4% of stores.
“[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.”
Fix “user-scalable=no / maximum-scale” in Shopify: let shoppers zoom
A one-line fix in layout/theme.liquid. Older themes and some apps block pinch-to-zoom on phones. Found on 19.1% of stores.
“Lists do not contain only <li> elements and script supporting elements (<script> and <template>).”
Fix “Lists do not contain only <li> elements” in Shopify menus and footers
A structural error in menus and footer blocks. Screen readers can no longer announce how many items a menu has. Found on 8.3% of stores.