Accessible cart drawers and mini-carts: focus, roles and announcements

Slide-out carts are everywhere — and one of the most frequent points where keyboard and screen-reader users get lost.

Failures to look for

1. The drawer opens but focus stays on the product page behind it.
2. It has no dialog role, so screen readers do not announce it.
3. Escape does nothing, and the close button is an unlabeled icon.
4. When closed, it is only moved off-screen — focus can still land inside it.

Recommended pattern

<div role="dialog" aria-modal="true" aria-labelledby="cart-title" id="cart-drawer" hidden>
  <h2 id="cart-title">Your cart (2 items)</h2>
  <button type="button" aria-label="Close cart">×</button>
  …
</div>

• On open: remove hidden, move focus to the heading (with tabindex="-1") or the close button, keep focus inside while open.
• On Escape or close: add hidden back and return focus to the add-to-cart button.
• If you use a toast instead of a drawer, announce it: <div role="status">Added to cart</div>.

The native <dialog> element with showModal() handles most of this for you in modern browsers.