Accessibility Compliance for UK E-Commerce — What Online Retailers Must Know

E-commerce sites have unique accessibility challenges. Blind users can’t see product images. Keyboard users struggle with complex size/colour selectors. Motor-impaired users get trapped in dropdown menus. Deaf users see videos with no captions. Colourblind users can’t distinguish “sold out” from “in stock” if it’s only colour-coded.

For online retailers, accessibility isn’t a compliance nicety — it’s a commercial imperative. Disabled people have money. They use e-commerce. A fully accessible e-commerce site converts disabled customers that competitors are locking out.

This guide covers the e-commerce-specific accessibility challenges, common failures, and practical steps to address them.

Why E-Commerce Is Different

E-commerce sites rely on visual information and interactive elements far more than informational sites. This creates accessibility barriers that require specific attention:

Product Images: E-commerce sites are image-heavy. A product page might have 5–10 images from different angles. Blind users need descriptive alt text for every one, not just generic “product photo” labels.

Size, Colour, and Variant Selectors: Choosing a size, colour, or style requires interactive elements. These must be keyboard-accessible and screen-reader-compatible. A selector that’s mouse-only or doesn’t announce selected values to screen readers locks out motor-impaired and blind users.

Shopping Cart and Checkout: The checkout process is where conversion happens. An inaccessible checkout (forms without labels, multi-step processes without clear step indicators, error messages that aren’t announced) costs sales directly.

Pricing and Deals: Discount prices, sale tags, and “out of stock” status are often colour-coded. Colourblind users and screen reader users need text alternatives or icons.

Search and Filtering: A complex product filter (checkboxes, dropdowns, price sliders) needs to be keyboard-accessible and semantically correct so screen reader users understand what options they’re filtering by.

Product Reviews and Ratings: Star ratings and review text need alt text. Customer reviews aren’t just usability content — they’re key decision-making information.

The Three E-Commerce-Specific Legal Obligations

UK Equality Act 2010: All UK retailers must make reasonable adjustments for disabled people. Websites are a service provision. A disabled customer who can’t navigate your site or complete checkout has experienced discrimination.

European Accessibility Act: If you sell to EU customers (and most e-commerce sites do), the EAA requires WCAG 2.2 Level AA compliance. Penalties up to €3M per member state.

WCAG 2.2 Level AA: The technical standard for both. E-commerce sites have no exemption — you must meet all 78 WCAG Level AA success criteria.

If you sell internationally (especially to EU customers), both the Equality Act and EAA apply. Your site must comply with both.

The 10 Most Common E-Commerce Accessibility Failures

1. Missing Alt Text on Product Images

The problem: Product pages have 5–10 images from different angles. Many retail sites include only generic alt text (or no alt text) on all but the first image.

Why it matters: A blind user using a screen reader on your product page gets one image description, then nothing. They can’t see colours, textures, fit, or other visual details that influence purchase decisions.

How to fix:

• Write descriptive alt text for every product image
• First image: descriptive overview (“Red sleeveless A-line dress, size 10”)
• Additional images: describe what they show (“Back view showing high neckline and pockets,” “Fabric closeup showing cotton-linen blend”)
• Don’t repeat the same alt text on every image
• Avoid generic text like “dress” or “product photo”

2. Colour-Only Information on Stock Status and Pricing

The problem: “In stock” is green, “sold out” is red. Sale prices are red, regular prices are black. A colourblind user can’t tell the difference.

Why it matters: A colourblind user can’t determine whether an item is available or if there’s a discount without additional cues.

How to fix:

• Use text labels in addition to colour (“In Stock,” “Sold Out”)
• Use icons or symbols in addition to colour
• Ensure text has adequate contrast (4.5:1 for normal text)
• Don’t rely on colour alone to convey information

3. Non-Keyboard-Accessible Size/Colour Selectors

The problem: Size and colour options are selected via JavaScript that only responds to clicks. Tab key doesn’t work. Arrow keys don’t navigate options. Selected value isn’t announced to screen readers.

Why it matters: Motor-impaired users, keyboard navigators, and screen reader users can’t select product variants. They can’t complete checkout.

How to fix:

• Use native <select> elements or properly-coded custom dropdowns
• Ensure all options are reachable via Tab and Arrow keys
• Announce selected value to screen readers using aria-live or native input events
• Provide clear visual feedback (highlight, background change) for selected options
• Test with keyboard only and with NVDA/JAWS screen readers

4. Multi-Step Checkout Without Clear Step Indicators

The problem: Checkout has multiple steps (billing, shipping, payment) but no clear indicator of current step, progress, or what comes next.

Why it matters: A screen reader user navigating step-by-step checkout doesn’t know where they are in the process or how many steps remain.

How to fix:

• Use a visible progress indicator (step 1 of 4, etc.)
• Use semantic HTML <ol> for the step list, not just text
• Announce the current step to screen readers
• Use heading hierarchy to mark each section (H2 or H3 for step title)
• Use error messages that are linked to relevant fields

5. Form Fields Without Associated Labels

The problem: Billing address form fields (street, city, postcode) lack <label> elements.

Why it matters: Screen reader users can’t tell which field is which. They don’t know if a field expects an apartment number, suite number, or is optional.

How to fix:

• Every <input>, <select>, and <textarea> needs an associated <label> with matching for attribute
• Don’t use placeholder text as a substitute for labels
• Mark required fields with both visual indicator and aria-required="true"
• Provide clear help text (“e.g., Suite 100”) for fields that need format guidance

6. Search Bar Without Proper Labelling

The problem: A search box input with no associated label.

Why it matters: Screen reader users don’t know what the input does. They just hear “textbox” with no context.

How to fix:

<label for="search">Search products</label>
<input type="search" id="search" name="search" placeholder="Search...">

• Use a proper label, not just placeholder text
• Or use aria-label if a visible label isn’t possible:

<input type="search" aria-label="Search products" placeholder="Search...">

7. Product Filters Without Proper Structure

The problem: Complex filters (category checkboxes, price slider, rating filter) are implemented as divs and JavaScript with no semantic structure.

Why it matters: Screen reader users can’t understand what filtering options exist or how to apply them.

How to fix:

• Use proper form structure (<fieldset> and <legend> for grouped filters)
• Use <label> for each filter option
• Ensure price slider is keyboard-accessible and announces current/selected range
• Update results and announce changes to screen readers (aria-live="polite")
• Provide a way to clear all filters with keyboard navigation

8. Insufficient Colour Contrast on Text Overlays

The problem: Product images with text overlays (discount badges, “New” labels) have low contrast. White text on a light product image, for example.

Why it matters: Users with low vision can’t read the text. It’s inaccessible to approximately 22% of the UK population.

How to fix:

• Text must have 4.5:1 contrast against its background
• Use semi-transparent backgrounds behind text (dark overlay, light text; light overlay, dark text)
• Test contrast on the actual product images, not just a white background
• Use the Chrome DevTools contrast checker to verify

9. Out-of-Stock Items Without Clear Indication

The problem: Products that are sold out are still clickable and add to cart, but the page doesn’t clearly state they’re unavailable.

Why it matters: A blind user attempting to buy an out-of-stock item won’t know until checkout that it’s unavailable.

How to fix:

• Clearly state “Out of Stock” or “Sold Out” in the product heading
• Disable the “Add to Cart” button with an explanation
• Announce unavailability to screen readers at the start of the product description
• Consider filtering out-of-stock items from search results

10. Video Product Demonstrations Without Captions or Audio Description

The problem: Product videos showing how something works (clothing fit, assembly, features) have no captions or audio descriptions.

Why it matters: Deaf users can’t hear narration. Blind users can’t see visual demonstrations.

How to fix:

• Provide captions/subtitles for all spoken content
• Provide audio description for important visual content (“the fabric drapes smoothly,” “assembly takes 15 minutes with included tools”)
• Use a video platform that supports captions (YouTube, Vimeo, etc.)
• Provide a text alternative describing what the video shows

E-Commerce-Specific Checklist

Beyond the general checklist, focus on:

Product Pages

• Every product image has descriptive alt text
• Colour variants have both colour display and text label
• Size selector is keyboard-accessible and announces selected size
• Price and discount pricing use both colour and text
• Stock status is clearly stated (not just colour-coded)
• Product description includes all key information (material, dimensions, care instructions)
• Product videos have captions and audio descriptions

Search and Filtering

• Search input has a label
• Filter options are structured with <fieldset> and <legend>
• Price slider is keyboard-accessible
• Filter results update without full page reload (or changes are announced to screen readers)
• “Clear filters” option is available and keyboard-accessible

Shopping Cart

• Cart is structured as a proper table or list
• Quantity controls are keyboard-accessible
• Cart total is clearly announced
• Remove item button is properly labeled
• Cart updates announce changes to screen readers

Checkout

• Each step is clearly labeled and numbered
• Progress indicator shows current step
• All form fields have associated labels
• Error messages are linked to relevant fields
• Address fields have appropriate format hints
• Payment method selection is keyboard-accessible
• Order review page is clear and accessible

The Commercial Case for E-Commerce Accessibility

Beyond legal obligation, accessible e-commerce converts customers:

Disabled customers have money. 16 million people in the UK (22% of the population) have a disability. That’s significant purchasing power. An accessible checkout means disabled customers can buy.

Better for everyone. Mobile users benefit from accessible design. Keyboard users (who might just prefer keyboard navigation) benefit. Older users with various impairments benefit. An accessible site is a better site for all users.

Better SEO. Many accessibility improvements also improve SEO. Clear heading structure, alt text on images, fast performance (which improves with accessibility fixes) all help search rankings.

Competitive advantage. Most competitors aren’t accessible. If you are, you reach customers they can’t.

Lower refund rate. Customers who can actually use your site are more satisfied customers.

Next Steps

If you run an e-commerce site and want to know your accessibility baseline:

Step 1: Run an automated scan with Bartram Web. We screen your product pages, checkout flow, search, and filters against WCAG 2.2 Level AA and deliver a prioritised action plan specific to e-commerce.

Step 2: Fix the quick wins (alt text, colour contrast, form labels). Most e-commerce sites can address 70% of automated failures in under 20 hours.

Step 3: Test with assistive technologies. An hour with NVDA navigating your checkout flow will reveal barriers that automation can’t catch.

Step 4: Maintain accessibility in future updates. New products, new features, and design changes should be tested and maintained for accessibility.

Step 5: Publish an accessibility statement. Tell customers you’re committed to accessibility, what standard you’re meeting (WCAG 2.2 Level AA), and how to report issues.

For context on the legal frameworks, see Equality Act Website Obligations, European Accessibility Act, and WCAG 2.2 Explained.

E-commerce accessibility is increasingly expected. The businesses that get ahead of it will have a competitive advantage and reach customers that less accessible competitors are losing.