Your Slide-Out Cart Is Probably Broken for Screen Readers (And Costing You Sales)

You have almost certainly used one without thinking about it. You are on an online store, you click “Add to Cart,” and a panel slides in from the right showing what you just added, the subtotal, and a big “Checkout” button. It saves you a trip to a separate cart page, and it nudges you toward buying. Shopify calls it a cart drawer. Other platforms call it a mini-cart, a slide-out cart, or a cart flyout. Whatever the name, it is now the default on a huge share of stores.

It is also one of the most reliably broken components for people who use a keyboard or a screen reader to browse the web. The slide-out cart looks slick, works perfectly with a mouse, and quietly fails the exact shoppers who are furthest along in the buying process — the ones who just clicked “Add to Cart.” When that panel opens and a screen reader user has no idea it appeared, or a keyboard user gets trapped behind it, you do not just have a compliance problem. You have an abandoned sale.

This guide explains, in plain English, what goes wrong with cart drawers, why it matters legally and commercially, and how to check your own store without touching code.

Why the cart drawer is uniquely risky

Most accessibility problems on a store are static: a low-contrast button, an image without a description, a heading in the wrong order. They are real issues, but they sit still and you can find them one at a time.

A cart drawer is different because it is interactive and it appears suddenly. Three things happen the instant it opens, and all three are invisible to someone who is not looking at the screen:

  1. New content appears that was not there a moment ago.
  2. The rest of the page is supposed to become unavailable — you should not be able to tab into the products behind the drawer while it is open.
  3. Something changed as a result of the click — the item count went up, the subtotal changed.

For a sighted mouse user, all of this is obvious. The panel visibly slides in, the background dims, and their eye goes straight to the new content. For a screen reader user, none of it is obvious unless the site was built to announce it. The panel can open in complete silence. Their screen reader keeps reading the product page as if nothing happened. They think their click did nothing, so they click again, and again, adding three of the same item without ever knowing the cart exists.

This is why the cart drawer punches above its weight. It sits at the most valuable moment in the entire shopping journey, and it fails in a way the store owner will never notice, because the store owner is looking at the screen.

The five things that go wrong

Here are the specific breakdowns, in the order you are most likely to have them.

1. Opening the cart is announced to no one

When the drawer opens, a screen reader should say something — ideally it should move the user’s attention into the drawer and announce it, for example “Your cart, dialog.” Many drawers do neither. The panel becomes visible, but as far as assistive technology is concerned, the page has not changed. The shopper is left reading the product description while their cart silently fills up behind the scenes.

The related failure is the “added to cart” confirmation. Even a small announcement like “Added to cart. Cart total: 2 items” makes the difference between a shopper who knows their click worked and one who assumes the site is broken.

2. Focus is left behind the drawer

“Focus” is the invisible highlight that shows a keyboard user where they are on the page. When you press Tab, focus moves to the next link or button. When a drawer opens, focus is supposed to move into the drawer, so the next thing the user interacts with is the cart, not the product grid behind it.

On a broken cart drawer, focus stays exactly where it was — on the “Add to Cart” button on the product page. The keyboard user presses Tab expecting to reach the checkout button, and instead they tab through the entire rest of the product page: related products, footer links, newsletter signup. The checkout button is visually right in front of them and completely out of reach.

3. You can tab out of the drawer into the page behind it

This is the flip side of the same problem, and it is called a missing “focus trap.” While a drawer or modal is open, the keyboard should not be able to reach anything behind it. Tabbing forward from the last button in the drawer should loop back to the first, keeping the user inside the panel until they close it.

When the trap is missing, a keyboard user tabs off the “Checkout” button and lands on a product link underneath the dimmed overlay — a link they cannot even see clearly, that may open a new page and lose their place entirely. It feels, to them, like falling through the floor.

4. Escape does nothing, and there is no clear close button

Every drawer and pop-up should close when the user presses the Escape key. It is the universal “get me out of here” for keyboard users. A surprising number of cart drawers ignore Escape completely, so a keyboard user who opened the cart by accident, or who is done looking, has no obvious way out.

The visible close control matters too. If the only way to dismiss the drawer is a small “X” icon with no text label, a screen reader will announce it as “button” with no indication of what it does. The user hears “button, button, button” and has to guess.

5. The quantity and remove controls are unlabeled

Inside the drawer, the little ”+” and ”-” steppers and the “remove” trashcan icon are usually icon-only. Without a text label, a screen reader announces them as “button” or reads the raw icon name. A shopper who wants to change two of an item to one, or remove something they added by mistake, cannot tell which button does what. Faced with that, most people just leave.

What this costs you

It is tempting to file this under “compliance,” but the business case comes first. The cart drawer is the last step before checkout. Every shopper who reaches it has already decided they want to buy. If the drawer fails them there, you are losing customers at the single most expensive point to lose them — after all the work of getting them to the product and getting them to add it.

Around one in six people has a disability, and a large share of them use exactly the assistive technology that cart drawers break. These are not fringe users; they shop online at the same rates as everyone else, and they spend real money. A drawer that silently swallows their clicks sends them to a competitor whose cart actually works.

Then there is the legal side. Under the Americans with Disabilities Act (ADA) in the United States, inaccessible online stores are a well-established target for demand letters and lawsuits, and checkout-related failures are among the most cited because they block a core function: buying. In the European Union, the European Accessibility Act (EAA) has applied since June 2025 to e-commerce services sold to EU consumers, and it expects sites to meet the WCAG 2.1 AA standard. A cart drawer that cannot be operated by keyboard or announced to a screen reader falls short of several WCAG requirements at once — keyboard operability (2.1.1), managing focus when things change (2.4.3), and telling users about status changes like “added to cart” (4.1.3), among others.

(This is general information, not legal advice. If you are worried about your specific exposure, talk to a qualified professional.)

How to check your own cart drawer in five minutes

You do not need any tools or code for this. You need a keyboard and, ideally, five minutes with your computer’s built-in screen reader.

The keyboard-only test. Put your mouse aside. Using only the Tab key, Enter, and the arrow keys, try to do the following on your live store:

  • Navigate to a product and add it to the cart using only the keyboard.
  • When the drawer opens, press Tab. Does focus move into the drawer, or are you still stranded on the product page?
  • Tab through the drawer. Can you reach the quantity controls, the remove button, and the checkout button?
  • Keep tabbing past the last button. Do you stay inside the drawer, or do you fall out into the page behind it?
  • Press Escape. Does the drawer close?

If any of those steps fails, so does your cart drawer.

The screen reader test. Turn on the screen reader that came free with your computer — VoiceOver on a Mac (press Command + F5) or Narrator on Windows (press Windows + Ctrl + Enter). Then add a product to the cart the way a customer would.

  • When you click “Add to Cart,” does the screen reader say anything at all? Silence is a failure.
  • When the drawer opens, are you told about it — ideally something like “Your cart, dialog”?
  • As you move through the drawer, are the quantity and remove buttons announced with real words, or just “button”?
  • Is the close control announced as “Close cart” or similar, rather than an unlabeled “button”?

Listening to your own store this way is uncomfortable the first time, and that discomfort is the point. It is the experience a real customer is having right now.

What to do about what you find

If you are on a hosted platform like Shopify, BigCommerce, or a WordPress store with WooCommerce, the cart drawer usually comes from your theme or from a cart app, not from you. That is good news: it means the fix is often a matter of choosing a better-built theme or app, or asking the developer who made yours to correct the drawer’s focus and announcement behavior. When you evaluate a theme or a cart upgrade, the keyboard and screen reader tests above are the questions to ask before you buy: “When the cart opens, does focus move into it? Can I close it with Escape? Are the buttons labeled?”

If the drawer is custom-built for your store, share this list with whoever built it. The fixes are well understood by anyone who knows accessible components: move focus into the drawer on open, trap it there while open, return focus to the “Add to Cart” button on close, wire up the Escape key, announce the “added to cart” status, and give every icon button a text label. None of it is exotic — it is the standard behavior of an accessible dialog, applied to your cart.

The one thing not to do is assume that because the drawer looks good and works with your mouse, it works for everyone. The whole trap of the cart drawer is that it fails invisibly, for the customers you can least afford to lose, at the exact moment they were ready to pay.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.