E-commerce Accessibility: Make Your Store Usable for Everyone

Ecommerce accessibility means designing and building your store so that people with disabilities can find products, understand them and complete a purchase, whether they use a screen reader, navigate by keyboard, need larger text, have limited colour vision or find complex layouts hard to follow. It matters for a large number of potential customers, it is increasingly required by law in many markets, and it tends to improve the store for everyone: clearer labels, better contrast and simpler forms help every shopper on every device. Most problems are well understood and fixable, especially if accessibility is considered from the start.

Who benefits from an accessible store

Disabilities take many forms, and many affect how people use the web:

• Visual: blindness, low vision and colour blindness. Many people use screen readers or magnification.
• Motor: difficulty using a mouse or touchscreen; many people navigate with a keyboard or switch device.
• Hearing: people who need captions for video content.
• Cognitive: difficulty with complex layouts, memory or reading long text.

Disabled people and their families also have significant spending power, and they tend to stay loyal to stores that work well for them. A store that is hard to use simply loses those customers to competitors who have made the effort.

Many more people have temporary or situational limitations: a broken arm, bright sunlight on a phone screen, a noisy train or simply older eyes. Accessible design helps all of them. It also tends to support search engine optimisation, because clear structure, headings and image descriptions help search engines understand pages too.

The standard: WCAG

The Web Content Accessibility Guidelines, published by the W3C, are the widely recognised standard for web accessibility. They are organised around four principles: content must be perceivable, operable, understandable and robust. Each guideline has success criteria at levels A, AA and AAA. Most laws and policies point to level AA. The W3C's WCAG overview explains the guidelines and the current version.

New versions of WCAG add criteria rather than replacing earlier ones, so a store built to a recent version also meets the older ones. Recent additions focus on things such as minimum target sizes for buttons, clearer focus indicators and easier authentication, all of which matter on phones.

WCAG can look technical, but much of it comes down to common-sense design: text that is easy to read, controls that are easy to use, and information that does not depend on a single sense such as colour or sound.

Common problems in online stores

Images without useful alt text

Screen reader users rely on alt text to know what an image shows. Product images need descriptive text, such as "Navy waterproof jacket with hood, front view". Decorative images should be marked so screen readers skip them.

Controls that do not work with a keyboard

Menus, filters, image galleries, size pickers and pop-ups often work only with a mouse. Every control should be reachable and usable with the keyboard, with a visible focus indicator showing where the user is.

Missing or unclear labels

Form fields need labels that screen readers announce, not just placeholder text that disappears when typing starts. Buttons should say what they do: "Add to cart", not just an icon.

Low colour contrast

Light grey text on white, or text over busy images, is hard to read for many people. Check contrast ratios against WCAG requirements, and never rely on colour alone, for example to show which size is out of stock.

Pop-ups and overlays

Newsletter pop-ups, cookie banners and chat widgets can trap keyboard users or hide content from screen readers. They should be announced properly, easy to close with the keyboard and should return focus to a sensible place when closed.

Error messages

Errors shown only in red, or only at the top of a long form, are easy to miss. Show errors next to the field, in text, and announce them to screen readers.

Making checkout accessible

Checkout is where accessibility problems cost the most, because a shopper who cannot complete it cannot buy at all.

• Every field has a clear, visible label and the correct input type.
• The whole process can be completed with a keyboard alone.
• Errors are described in text, next to the field, and announced.
• Time limits are avoided or can be extended.
• Payment fields from your provider are accessible; test them, as embedded forms vary.
• Strong customer authentication screens work with assistive technology.
• The order confirmation is clear and readable by screen readers.

Many of these changes also reduce errors for every shopper. Our guide to one-page versus multi-step checkout covers other checkout design choices.

Legal requirements

Accessibility is increasingly a legal requirement for online stores, though the rules differ by country:

• European Union: the European Accessibility Act applies to many e-commerce services offered to consumers, with requirements that apply from June 2025. Our guide to selling online in Europe covers this alongside other EU rules.
• United States: many businesses have faced legal claims that their websites are not accessible under disability rights law.
• Other markets: the UK, Canada, Australia and others have their own equality and accessibility laws that can apply to websites.

Beyond legal risk, an accessibility statement and a clear way to report problems show customers you take their needs seriously, and give you early warning of barriers you have missed.

This is a summary, not legal advice. Take advice for the markets you serve, and treat WCAG level AA as the practical target in the meantime.

How to test your store

1. Automated checks: browser extensions and testing tools find many issues quickly, such as missing alt text, low contrast and unlabelled fields. They cannot find everything.
2. Keyboard test: unplug the mouse and try to find a product, choose options, add to cart and complete checkout using only the keyboard.
3. Screen reader test: use a free screen reader to listen to your key pages. Does each page make sense without seeing it?
4. Zoom test: zoom the browser to 200% and check that content still fits and works.
5. Real users: where possible, ask people who use assistive technology to try key tasks. They find issues no checklist or tool covers.

Keep a simple list of the issues you find, with the page, the problem, how serious it is and who will fix it. Re-test after each fix, because one change can affect several pages that share the same template.

Prioritise fixes on the pages and journeys that matter most: navigation, search, product pages, cart and checkout.

Building accessibility into your process

• Design: check colour contrast, focus states and layouts at the design stage.
• Content: train the team to write alt text and clear link text.
• Development: use semantic HTML, proper labels and tested components.
• Testing: include accessibility checks in every release, not just once a year.
• Third parties: ask app and widget providers about accessibility before adding them.
• Statement: publish an accessibility statement explaining your commitment and how customers can report problems.

Ecommerce accessibility in product content

Much of a store's accessibility depends on content that the team adds every day, not just on the code.

Product images and video

Write alt text that describes what matters for buying: the product, its colour and key features visible in the image. For galleries, describe what each image adds, such as "close-up of zip and inner pocket". Add captions to product videos, and a short text summary of anything important shown only in the video.

Descriptions and specifications

Use headings, short paragraphs and lists, which screen readers can navigate. Put specifications in a proper table rather than an image of a table. Avoid putting important information, such as sizes or care instructions, only inside images.

Size guides and charts

Size charts are often images or complex graphics. Provide them as accessible tables, with clear headings, so screen reader users can understand them.

Links and buttons

Write link text that makes sense on its own: "View delivery options" rather than "click here". Screen reader users often move from link to link, so each one needs to say where it goes.

A short content guide for your team, with examples, keeps these habits consistent as new products are added.

Accessibility on phones

Most shoppers use phones, and many disabled people rely on the accessibility features built into their devices, such as screen readers, voice control and larger text settings. Check that:

• Text grows properly when the phone's text size setting is increased, without overlapping or cutting off.
• Buttons and links are large enough to tap accurately, with space between them.
• Gestures such as swiping galleries have a simple alternative, like arrow buttons.
• The page works in both portrait and landscape orientation.
• Pop-ups and sticky bars do not block content when the screen is zoomed.

Test with the screen readers built into iPhone and Android phones as well as on desktop. Our list of mobile UX mistakes overlaps closely with common mobile accessibility problems.

Frequently asked questions

Want to know how accessible your store really is? Ask us for an accessibility review, or see how our e-commerce design team builds accessible stores from the start.