For the past 18 months, the developer community has been obsessed with Core Web Vitals. We’ve all chased milliseconds in Largest Contentful Paint (LCP) and shaved points off our Cumulative Layout Shift (CLS), all in service of a better user experience and, of course, better Google rankings. But as we’ve focused on performance, a different, more critical user experience mandate has emerged from the shadows: digital accessibility.
It’s no longer a “nice-to-have” or a bullet point for a “future sprint.” In 2022, accessibility is a legal, financial, and ethical imperative.
As a frontend developer and UI designer at a digital agency, I’ve spent the last two years “under the hood” of over 100 websites, many of them e-commerce stores built on platforms like Shopify and WordPress. The pattern is consistent: accessibility is almost always an afterthought. It’s the technical debt nobody wants to pay until a demand letter arrives.
And those letters are arriving. In 2021, over 2,300 digital accessibility lawsuits were filed in the U.S. alone, and 2022 is on track to surpass that. The e-commerce and retail industry is the single most targeted sector, accounting for over 77% of all lawsuits in some reports.
This isn’t a scare tactic; it’s a new reality. The “move fast and break things” motto has left a significant portion of the population behind. The good news? We, the developers, are the ones who can fix it. This isn’t a high-level theoretical guide. This is a practical, in-the trenches guide to auditing and retrofitting the e-commerce sites you’re working on right now.
The Business Case: Why “Retrofit” is a Euphemism for “Unlock Revenue”
Before we dive into code, we need to speak the language of our stakeholders. Many see “accessibility retrofit” as a pure cost center. It’s our job to reframe it as a revenue driver. The business case in 2022 is built on three pillars:
1. Legal Risk (The Stick): This is the most obvious one. Lawsuits are expensive, time consuming, and damaging to a brand’s reputation. Fixing your site is infinitely cheaper than settling a class-action lawsuit.
2. Market Expansion (The Carrot): This is the point that leaders often miss. Globally, people with disabilities and their families control trillions of dollars in annual disposable income. When your site is inaccessible, you are actively turning away paying customers. You wouldn’t build a physical store with no wheelchair ramp; why is your digital store any different?
3. The SEO & UX Halo Effect: Google’s Page Experience update, which was fully rolled out for desktop in March 2022, is about measuring how users perceive their experience. Guess what? Good accessibility is good UX. A logical heading structure, keyboard-navigable links, and clear form labels don’t just help screen reader users— they help all users. These are strong, positive signals that crawlers and users alike reward.
The “Big 5” Failures: An E-commerce Audit Checklist
Based on my experience fixing client sites, the vast majority of critical errors fall into five categories. Here’s your checklist. Open your site and your developer tools.
1. Low Contrast Text: This is the most common failure on the web. In e-commerce, it’s often an intentional design choice: “subtle” gray-on-white text for pricing, or promotional banners using brand colours (like red on green) that are completely unreadable for users with colour blindness.
• How to Test: Use the Lighthouse audit in Chrome DevTools. It will flag every instance. For spot-checks, use the WAVE browser extension.
• How to Fix: The WCAG 2.1 AA standard requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Work with your designer to find a compliant shade. This is a non-negotiable fix.
2. Missing or Useless Alt-Text: Alt-text is the lifeblood of an e-commerce experience for a screen reader user. Yet, 77% of retail pages have images lacking descriptive alt-text.
• How to Test: Use a tool like the axe DevTools extension. It will flag all images missing an alt attribute.
• How to Fix: This isn’t just about presence; it’s about quality.
-
- Bad: <img src=”prod1.jpg” alt=”IMG_2847.jpg”>
- Also Bad (for decorative images): <img src=”divider.png” alt=”divider line”> (Should be alt=””)
- Good (for products): <img src=”prod1.jpg” alt=”Red knit sweater with ribbed sleeves and a crew neck”>
- Good (for functional icons): <img src=”cart.png” alt=”View your shopping cart”>
3. Missing Form Input Labels: This is a checkout-killer. Nearly one-third of retail checkouts fail basic keyboard navigation, often due to unlabelled fields. Designers love a clean, “placeholder-only” label, but it’s an accessibility nightmare. When a user clicks in, the label vanishes, and a screen reader has nothing to announce.
- How to Test: Tab through your checkout form. Does the screen reader announce what each field is for? Click on the label (not the box). Does your cursor jump into the input? If not, it’s broken.
- How to Fix: The for attribute on the <label> must match the id of the <input>. It’s that simple. If you must have a visually hidden label, use a sr-only (screen-reader only) class, not display: none;.
- How to Test: Use the WAVE extension to view all links on the page.
- How to Fix:
- Best: Rewrite the link text to be descriptive: “Read more about our summer collection.”
- Good (for icon buttons): If a “quick view” button is just an eye icon, add an aria-label to give it an accessible name:<button aria-label=”Quick view for Red Knit Sweater”> … </button>
- How to Test: Unplug your mouse. Try to buy a product using only the Tab, Shift+Tab, Enter, and Spacebar keys. Pay attention:
- Can you see where you are at all times? (This is the :focus state).
- Is the tab order logical, or does it jump all over the page?
- Do you get trapped in any element, like a pop-up?
- How to Fix: This is often a structural CSS/HTML issue.
-
- Focus State: Add a clear :focus-visible { outline: 2px solid blue; } to your global CSS.
- Tab Order: Ensure your HTML is in a logical order. Don’t use tabindex with a positive number.
- Pop-ups: Ensure any modal or pop-up can be closed with the Esc key and that focus is “trapped” inside it until it’s closed.
My agency experience is dominated by these two platforms. Retrofitting them presents unique challenges.
Retrofitting WordPress: The challenge here is that you’re at the mercy of themes and plugins.
- Audit the Theme: Start with an accessibility-ready theme if possible. If not, you’ll be fixing the header.php and footer.php files. Your first fix should be adding a “Skip to Content” link, a “WP Accessibility” plugin can often do this for you.
- Fix the Menus: Many themes use custom JavaScript for mega-menus that are totally inaccessible. Test keyboard navigation. You may need to replace the theme’s menu JS or the menu itself.
- Fix “Read More” Links: This is a classic blog issue. A screen reader user hears “Read more” repeatedly. You can use a WordPress filter in your functions.php file to add context:
PHP
// Adds the post title to “Read More” links for screen readers
function my_read_more_link($link) {
$title = get_the_title();
$sr_text = sprintf(
‘<span class=”sr-only”> about %s</span>’,
$title
);
return $link . $sr_text;
}
add_filter( ‘the_content_more_link’, ‘my_read_more_link’ );
Retrofitting Shopify (Liquid): Shopify is a bit easier as the structure is more controlled, but the “Liquid” templates can be tricky.
- Fix Product Pages: The #1 issue is product variants. Often, color or size swatches are unlabelled <div> or <span> elements. You must change these to <button> elements so they are keyboard-focusable.
- Fix Product Images: Ensure your product template correctly pulls the alt-text from the Shopify admin. It’s a simple Liquid call:<img src=”{{ image | img_url: ‘large’ }}” alt=”{{ image.alt | escape }}”>
- Fix the Checkout: This is the hard part. Shopify’s checkout is mostly a “black box”. You can control some styling via checkout.liquid (on Plus plans), but you can’t fix the underlying HTML. This makes it critical that the parts you can control (header, product pages, cart) are perfect. Your job is to get the user to the checkout barrier-free.
Conclusion: Looking Ahead (from 2022)
We are at an inflection point. The draft for WCAG 2.2 is already circulating, and it places an even stronger emphasis on users with cognitive and motor disabilities, things like larger minimum target sizes and more consistent help mechanisms. The direction of the web is clear: it is becoming more inclusive, not less.