Appearance

Accessibility ​

How shoppers who use a keyboard or a screen reader get around the side cart, and how to keep it easy for everyone to use.

ShapedCart builds its WooCommerce side cart so that shoppers can use it without a mouse, and so screen readers can describe what's happening. It behaves like a proper dialog, the same way a well-built popup does. You don't need to switch anything on.

This page explains what shoppers get, and what you can do to keep the cart accessible when you change its look.

How the cart behaves ​

When the ShapedCart side cart opens, it behaves like a dialog, a window that sits on top of the page:

  • Focus moves into the cart. Keyboard focus jumps to the cart's close button, so keyboard users start inside the cart instead of somewhere behind it.
  • Focus stays inside while it's open. Pressing Tab cycles through the cart's links, buttons and fields, and wraps round from the last one to the first. It never wanders off into the page behind.
  • Focus goes back when it closes. Close the cart and focus returns to whatever opened it, like the floating cart, so shoppers don't lose their place.
  • The page behind stays put. The page can't scroll while the cart is open, and screen readers are told to treat the cart as the only active part of the page.

Keyboard support ​

Everything in the ShapedCart side cart and its triggers can be reached and used with a keyboard:

KeyWhat it does
Tab / Shift + TabMove forward or back between the cart's controls
Enter or SpaceOpen the cart from the floating cart, close it from the ×, open or fold the coupon field, and press any button
EnterOpen the cart from the menu cart icon, which is a link
EscClose the cart

In the quantity box, shoppers can type a new number and press Tab to update it, or use the − and + buttons.

Screen readers ​

ShapedCart labels every control in the side cart, so screen readers can say what each one does:

  • The cart itself is announced as a dialog, named after your cart heading, for example "Your cart, dialog".
  • The floating cart and menu cart are announced as Open cart, and the header's × as Close cart.
  • Each item's controls are announced as Remove item, Decrease quantity, Increase quantity, and a Quantity box. The − button is marked as unavailable when the quantity is already 1.
  • The coupon field's heading says whether it's open or folded, and the code box is labelled with your Coupon heading text.
  • Changes are announced. After a shopper changes a quantity, removes an item or applies a coupon, a screen reader announces the new count, like "3 items in cart.", without moving focus. This announcement is in English on every store. See Translation.
  • Icons are hidden from screen readers, because they're decoration. The text next to them says the same thing.

Keep it accessible when you customize it ​

Most of what makes the cart accessible is built in and can't be switched off. Your settings affect a few things, though: colors, sizes and wording.

Choose readable colors ​

Text needs enough contrast against its background to be readable for shoppers with low vision, or anyone on a phone in bright sunlight. WCAG, the web's accessibility guidelines, recommends a contrast ratio of at least 4.5 to 1 for normal-sized text. You can check any pair of colors with a free online contrast checker.

In the side cart's Colors, check these pairs against your Background color:

Color settingUsed forTip
Primary textProduct names, prices, most textThe default near-black is very readable.
Secondary textVariation details, add-on details, the shipping noteThis small text is the one to watch. The default grey is on the light side. A darker grey like #646970 is easier to read on white.
Regular price and Savings textThe crossed-out price and the savings badgeThese are small too. Slightly deeper shades of the defaults, like #b93d1c and #23793f, read better on white.
Accent text on AccentThe text on your checkout buttonCheck it against your accent color. White on a deep color works best.

The floating cart and menu cart count badges use small numbers too, so give Count Color strong contrast against Count Badge Background.

Keep tap targets comfortable ​

Keep the floating cart at 44px or larger. ShapedCart warns you if you go below that, because smaller buttons are hard to hit with a thumb, especially for shoppers with limited hand movement.

Use clear wording ​

  • Don't leave the cart heading blank. Screen readers use it to name the cart when it opens.
  • Make button labels say what they do. Checkout and Continue shopping are clearer than Go or OK.
  • Keep the coupon heading descriptive. It's also the label screen readers read for the code box.
  • Say it in words, not just color. The savings badge and low-stock badge already use text, so they work for shoppers who can't tell colors apart. Keep their wording meaningful.

Check keyboard focus in your header ​

When you tab to the menu cart icon, you should be able to see where focus is. How that looks depends on your theme's styles for menu links. If you can't see a focus outline on the icon, add one with a line of custom CSS. See Custom CSS.

Test it yourself ​

You don't need special tools for a quick check:

  1. Open your store, click in the browser's address bar, then press Tab until you reach the floating cart or menu cart. Press Enter.
  2. Check that the cart opens and you can see which control has focus.
  3. Press Tab through the whole cart. Focus should stay inside it.
  4. Press Esc. The cart should close, and focus should go back to where you opened it from.

For a screen reader check, use VoiceOver on a Mac or iPhone (built in) or NVDA on Windows (free), and listen to what's announced as you open the cart and change a quantity.