Accessibility for E-commerce: Where Buyers Fall Through

Most arguments for accessibility are moral, and they’re right, but there’s a colder argument that works better on store owners: every accessibility bug in an e-commerce site is a hole in the funnel, and the person falling through the hole was holding money. They found you. They wanted the thing. They were trying to pay. And somewhere between the product page and the receipt, your site ejected them.

It’s worth walking the path of a purchase and looking at where this actually happens, because the failures cluster at predictable spots.

Start at the product page. A shopper using a screen reader arrives and asks the page what the product looks like. The answer lives in the alt text of the images, and on a typical store the answer is “IMG_4823.jpg” or “product” or nothing at all. That’s the equivalent of a shop where the salesperson refuses to describe anything on the shelves. The fix isn’t poetry; it’s a sentence. “Blue canvas high-top sneaker with white sole, side view” does the job. Note that this same text is what search engines read, which is why sloppy alt text hurts you twice.

Next comes picking a variant, and here e-commerce has a signature failure: swatches. Size and color pickers are usually a row of small squares, and very often the selected one is indicated only by a subtle border, or the unavailable ones only by being slightly dimmed. If you can’t perceive that border, you don’t know what you selected. If the swatches are bare divs with click handlers instead of real buttons or radio inputs, a keyboard user can’t select anything at all, because divs don’t receive keyboard focus unless someone makes them. The shopper presses Tab and the swatches simply aren’t there. This is the moment they leave, and your analytics will file it under “viewed product, did not add to cart,” which tells you nothing.

Then the cart, which loves to slide in from the side. Slide-out drawers and modal dialogs are where keyboard and screen reader users get lost, because focus doesn’t move into the drawer when it opens. The shopper clicked “add to cart,” something happened visually, but their keyboard is still parked on the product page behind the drawer. They tab around a page they can’t see, behind an overlay they can’t reach. A correctly built drawer moves focus into itself, keeps Tab cycling inside it, and closes on Escape. Most aren’t built correctly, because the developer tested with a mouse.

Checkout is where the remaining holes concentrate, because checkout is forms, and forms are the most technically demanding thing most sites contain. The classic failure is the unlabeled field. Visually there’s a label, but it’s a placeholder inside the input, and placeholders vanish the moment you type. A screen reader user hears “edit text” with no hint of what goes in it. Someone with memory trouble types their city, glances away, and comes back to a row of filled boxes with no labels anywhere, unable to tell address line two from company name. Real labels, attached to their inputs with the for attribute, cost nothing and never vanish.

The second checkout classic is error handling. The shopper submits, something’s wrong with the card number, and the page indicates this by turning one field’s border red. Color alone, no text, no message a screen reader would announce, sometimes not even a scroll to the offending field. To a colorblind user the form just refuses to proceed, silently, forever. People do not debug your checkout. They have another tab open with a competitor, and the third silent failure is when they use it.

What strikes me, having watched scans of many stores through GazeSite, is that none of these fixes are hard. Alt text is writing sentences. Labels are one HTML attribute. Error messages are text instead of color. Focus management in a drawer is a few lines of JavaScript. The difficulty isn’t technical; it’s that nobody on the team ever experiences the purchase the way these customers do. The team tests with a mouse, sighted, on the happy path, with a card that works. Every failure above lives off that path.

There’s also a compounding effect that makes e-commerce special. A content site with an accessibility problem loses a reader. A store loses the sale, and the repeat sales, and the person the customer would have told. And the population affected isn’t small or static: vision, dexterity, and cognition all decline with age, and older customers are, in most categories, the ones with money. Building a store that’s hard to use with imperfect eyes or unsteady hands is building a store that turns away its wealthiest demographic.

So if you run a store, here’s the experiment I’d actually run. Unplug your mouse and buy something from yourself using only the keyboard. Tab through the product page, pick a size, get through the cart, complete checkout. Every place you get stuck, a real customer got stuck yesterday, wallet out, ready to pay. That’s not a compliance problem. That’s a hole in the boat.