Check your online store's accessibility in 5 minutes (and what to fix first)
We ran an automated accessibility scan on the homepages of 14 small US online stores (boutiques, coffee roasters, a pet shop). 12 of the 14 had at least one serious problem, and most were the same handful of issues, all
We ran an automated accessibility scan on the homepages of 14 small US online stores (boutiques, coffee roasters, a pet shop). 12 of the 14 had at least one serious problem, and most were the same handful of issues, all fixable in an afternoon.
Here's how to check your own store for free, and which issues to fix first.
The 5-minute check
- Open your store's homepage in Chrome.
- Press F12 to open DevTools, go to the Lighthouse tab, tick only Accessibility, and click Analyze page load.
- For more detail, install the free axe DevTools extension, open its tab in DevTools and run a scan. It uses the same rules engine (axe-core) that most professional audits start from.
- Repeat on one product page and on the cart. Those are where problems cost you sales.
What we found most often (fix these first)
1. Text that's too faint (low colour contrast). This was the most common issue by far, on 9 of 14 stores. Light-grey text, pastel buttons with white text and announcement bars were the usual offenders. WCAG asks for a contrast ratio of 4.5:1 for normal text. Fix: darken the text colour or the button background in your theme settings, and check it with any contrast checker.
2. Links and icons with no name. These were on 10 of 14 stores. Search, cart and wishlist icons, social icons, and the "Powered by" footer link often have no text, so a screen reader announces just "link". Fix: add a visually hidden label or an aria-label such as "Search" or "Cart".
3. Images with no alt text. "As featured in" press logos and product images were the usual cases. Fix: in Shopify, open the image in the media library and fill in "Alt text". Describe what matters ("NBC logo", "Linen wide-leg pants in olive").
4. Form fields and dropdowns with no label. Product option pickers and quantity boxes sometimes have no label, so a blind shopper can't tell what they're choosing. These were the most severe issues we saw. Fix: make sure each <select> and <input> has a <label> or an aria-label.
5. Zoom disabled on mobile. Some themes ship user-scalable=no in the viewport tag. Fix: remove maximum-scale=1 and user-scalable=no from theme.liquid.
Why bother?
About 1 in 4 US adults has a disability. ADA-related demand letters to small online stores have also become common, and they usually cite exactly these automated-scan issues. Fixing the basics makes the store easier for everyone to use and removes the easy targets.
One caveat: automated tools catch only part of what WCAG covers. Keyboard navigation and screen-reader testing still need a human look.
Want it done for you?
We run a multi-page scan (homepage, a product page, a collection page and the cart) and send a plain-English, step-by-step fix guide your developer, or you, can follow, then re-scan after the changes: accessibility check-up, $99. Questions: [email protected].
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.