Why checkouts fail for keyboard and screen-reader users

Why does my checkout fail for screen readers and keyboard users?

Written by Even Entry, Last reviewed October 18, 2026, About 7 minutes to read

Make the cart table headings dark enough to read

assets/component-cart-items.css

11 .cart-items th {

12 text-align: left;

13 padding-bottom: 1.8rem;

14 − opacity: 0.85;

15 font-weight: normal;

16 }

We removed the one line that faded the cart's headings a second time.

Live since October 10, 2026. Our checks no longer find the problem.

In short

Keyboard and screen-reader shoppers get stuck in a few familiar places, like a cart drawer they can’t leave or a button with no name. You can find many of them yourself in a few minutes. Wherever you get stuck, that part of the page wasn’t built to work without a mouse. Each has a fix. Some are yours, and some are Shopify’s.

Try it yourself

Put the mouse aside. This takes a few minutes.

Using Safari on a Mac? Out of the box, pressing Tab skips links and buttons. That’s Safari, not your store. In Safari’s settings, under Advanced, turn on “Press Tab to highlight each item on a webpage.” Then in your Mac’s System Settings, under Keyboard, turn on “Keyboard navigation.”

Start on your homepage. Tab moves ahead, and Shift-Tab goes back. Each thing you land on should show an outline, so you can see where you are.
Open a product. When you reach the sizes, the arrow keys should pick one, and Tab should move past them. That’s the standard way for a group of options, and Dawn, Shopify’s free theme, works like that.
Press Enter or Space on Add to cart. If a drawer opens, you should land inside it and be able to leave.
Keep going until you reach the first page of checkout, and note where you get stuck. The fix for each is below.

Where shoppers get stuck, and the fix for each

Whoever edits your theme makes these changes, or we do. Each part ends with the rules it covers in the Web Content Accessibility Guidelines (WCAG) 2.2, for your developer.

A drawer they can get into and out of

The cart drawer opens, but the keyboard stays on the page behind. Or Tab goes in and can’t get back out.

Fixed: shoppers land inside the drawer and can close it from the keyboard, usually with Escape. Then they’re back on the button they pressed. It’s fine if Tab stays inside while it’s open, as long as they can leave.

For your developer: 2.1.2 No Keyboard Trap, 2.4.3 Focus Order

An outline they can see

Some themes hide the outline, so shoppers can’t tell where they are. Or a sticky header or cookie banner completely covers the button they’re on.

Fixed: the outline shows on every button, link and field, and nothing sits fully on top of it.

For your developer: 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured (Minimum)

Changes they can hear

A shopper adds to cart, the count changes, and their screen reader says nothing.

Fixed: their screen reader reads out the change, like “three items in your cart”, without losing their place.

For your developer: 4.1.3 Status Messages

Buttons that say what they are

Something that looks like a button but isn’t built as one can’t tell a screen reader it’s a button. An icon-only cart or close button with no name leaves shoppers guessing.

Fixed: each is a real button or link that says what it’s for.

For your developer: 4.1.2 Name, Role, Value

Fields with labels, and errors in words

Some fields have no label. Others show one on screen, but the code doesn’t connect it to the field. And a red border alone doesn’t tell everyone there’s an error.

Fixed: every field is tied to its label. When a shopper makes a mistake, the store says in words which field is wrong, why, and where it can, how to fix it.

For your developer: 3.3.2 Labels or Instructions, 1.3.1 Info and Relationships, 3.3.1 Error Identification, 1.4.1 Use of Color, 3.3.3 Error Suggestion

Buttons big enough to tap, and sliders you don’t have to drag

Tiny quantity buttons are crammed together. Or a price slider moves only by dragging.

Fixed: every button is easy to tap. And shoppers don’t have to drag the price slider. They can tap anywhere on it, or type the amount.

For your developer: each button at least 24 by 24 CSS pixels, or with enough space around it. 2.5.8 Target Size (Minimum), 2.5.7 Dragging Movements

Text dark enough to read

Pale gray text is hard to read. That includes the gray hint text inside a field.

Fixed: text stands out clearly from its background.

For your developer: a contrast of at least 4.5:1, or 3:1 for large text. 1.4.3 Contrast (Minimum)

When a fix is bigger, or isn’t yours to make

If a drawer or menu is built from plain boxes, your developer may need to rebuild it with real buttons and links.

If the problem sits inside an app’s own code, your theme can’t fix it. A setting in the app may sort it out, or the app’s maker can. If neither works, you can swap it for another app.

Which parts are yours, and which are Shopify’s

Your product page, cart page and cart drawer are part of your theme, so you or your developer can change them. But a theme update can cost you those changes. As Shopify’s Help Center puts it, if your code changes don’t fit an update, the new version of your theme won’t have any of them. So keep a note of your changes, and your developer can put them back, or we can.

The checkout is different. It’s Shopify’s code, and no store can change it, whatever the plan. What you can change is how it looks: add your logo, and pick your colors and fonts. Shopify suggests high-contrast colors, so shoppers can read everything easily. On Shopify Plus, apps can add to the information, shipping and payment pages, but even they can’t touch the checkout’s code.

With its newer customer accounts, Shopify runs signing in too. It’s retiring the older theme-based accounts. Customers get a six-digit code, no password. If they can paste it, they don’t have to type it out. Try signing in yourself and see whether it pastes. If it doesn’t, tell Shopify at accessibility@shopify.com.

For your developer: 3.3.8 Accessible Authentication (Minimum)

Shopify’s March 2026 report on its own checkout says the checkout only partly meets 13 WCAG criteria. Two of them: the order you move through the page with a keyboard, and how easy text is to read against its background. Shopify says it’s still working on them. The same address takes any other problem you find.

The report also says it’s up to each store owner to make sure their store meets the law. Your lawyer can tell you what that means for your store.

Yours to change

Your theme's pages: you or your developer can fix them

Product page
Cart page
Cart drawer

Shopify's to change

No store can change these, whatever plan you're on

Checkout
Signing in

You still pick the logo, colors and fonts

If you use Shopify's newer customer accounts, Shopify runs the sign-in page. A theme update can undo your changes, so keep notes. Sources: three Shopify Help Center pages, read October 18, 2026.

How we help

On Shopify, every day, we check the pages your customers buy from, up to the start of checkout. We shop your store by keyboard alone, like a shopper who can’t use a mouse, when you join, every month and after each new theme. A person signs off each test.

Each fix goes in your theme’s own code: your developer publishes it on Engage, and we do on Resolve and Defend, once you say yes. If an app is the cause, on Engage we write a message and you send it to the app’s maker. On Resolve and Defend, we take it to the maker ourselves and follow it up.

See our cart drawer and checkout walkthrough, or read how Engage works.

Sources

We checked this guide against its sources on the date at the top, and laws and court decisions can change after that. It's general information, not advice for your own store, so your lawyer or tax preparer has the final word.