Millions of people in the UK live with a disability, and many more have a temporary injury, eyesight that is not what it was, or a phone screen in bright sunlight. An online shop that is hard to use with a keyboard, a screen reader or enlarged text does not just inconvenience those customers. It loses the sale, usually without anyone ever finding out why.
In the UK, the Equality Act 2010 requires businesses that provide services to the public to make reasonable adjustments for disabled people, and that applies to a website as much as to a shop. The duty is anticipatory: you are expected to think ahead, not wait for someone to complain.
Since June 2025, the European Accessibility Act has also applied to e-commerce services sold to consumers in the EU, including by businesses based outside it. Microenterprises, with fewer than ten staff and annual turnover or balance sheet of no more than two million euros, are exempt from its requirements for services. If you sell to EU customers and are larger than that, it applies to you.
The usual yardstick for both is the Web Content Accessibility Guidelines, WCAG, at level AA. You do not need to read the whole standard to get most of the way there. The fixes below deal with the problems that come up again and again on shop sites.
Put the mouse aside and try to buy something using only Tab, Shift and Tab, Enter and the arrow keys. Can you see where you are on the page at every step? Can you open the menu, choose a size, add to basket and complete the checkout? Custom drop-down menus, pop-ups that cannot be closed, and focus outlines removed because they spoiled the look are the usual failures.
A screen reader user hears the alt text in place of the image. For a product photo, describe what matters to the buying decision. “Navy wool jumper with a round neck, front view” is useful. “IMG_2231” and “product image” are not. Purely decorative images should have an empty alt attribute, so they are skipped rather than read out.
Pale grey text on a white background is the most common design choice that fails. Normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. A free contrast checker will tell you in seconds. Also check the page still works when the browser is zoomed to 200 percent, without text overlapping or content disappearing off the edge.
“Items shown in red are out of stock” means nothing to someone who cannot tell red from green. Pair colour with text or an icon: “Out of stock” beside the option, not just a red outline around it.
Quantity buttons, close icons and small links packed tightly together are awkward on a phone for anyone, and very hard for someone with a tremor. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, or enough space around smaller targets to have the same effect.
Free automated checkers such as WAVE and the Lighthouse tool built into Chrome find a useful share of problems, including missing alt text, poor contrast and unlabelled fields, in a few minutes. They cannot tell you whether the site actually makes sense to use, so follow them with the keyboard test above.
Fix the checkout first. It is the part of the site where an accessibility problem costs money most directly, and the improvements there, clearer labels, clearer errors and bigger buttons, make it easier for every customer. Accessible pages also tend to be faster and better understood by search engines, which our basic introduction to website SEO explains.