Accessible Quantity Steppers in the Cart: The Buttons Nobody Labels

The quantity stepper is three small elements, a minus button, a number, a plus button, and it is where cart accessibility quietly falls apart. The buttons are often just a dash and a plus sign drawn in a font, with no accessible name at all, so a screen reader announces button, button, and the shopper guesses which one deletes their item.

WCAG 2.2 has a name for part of this problem. Target size minimum, success criterion 2.5.8, sets 24 by 24 CSS pixels as the floor at Level AA, and plenty of production steppers ship at 18. Small target, no name, high consequence: the control that changes what you pay is the control least usable by the people who most need it labelled.

The accessible name is the whole feature

A minus button needs a name that says what it does to which item: Decrease quantity, linen shirt, not minus, and definitely not a hyphen character a screen reader may skip entirely. The same applies to the plus. The quantity itself should be an input with a proper label, or a live region that announces the new quantity and the updated line total when it changes.

That announcement matters more than the button label, in practice. A blind shopper who increases quantity needs to hear the new count and ideally the new total without hunting the page for it. A polite live region on the quantity and line total does this. Silence does not mean nothing happened, it means the shopper re navigates the cart to verify, every single time. Our focus return work on cart drawers in When the Cart Drawer Closes, Focus Has to Go Somewhere covered the same principle from the keyboard side.

Delete by stepper is a trap

Many steppers turn the minus button into a remove button at quantity one, silently. The control the shopper trusts to mean one less becomes the control that removes the item entirely, sometimes with no undo and no confirmation. For a keyboard or screen reader user who cannot see the icon change from minus to a trash can, this is a data loss bug wearing a design pattern's clothes.

Keep remove as its own labelled control. If the design insists on the stepper reaching zero, announce the change of function and confirm the removal, and provide an undo that restores the item at the same quantity. The loyalty points messaging problems in Loyalty Points in the Cart: The Message Screen Readers Never Hear are the polite cousin of this failure: the cart changing state without saying so, in words the shopper can actually perceive.

Test it the way it will be used

Three checks cover most stepper failures. Tab to the stepper and operate it entirely by keyboard, checking focus stays visible and never jumps to the top of the drawer. Run a screen reader pass and listen to what each button announces before pressing it. Then zoom to 200 percent and confirm the targets did not collapse into each other.

Write the failures down as defects with the criterion attached, 4.1.3 status messages for the silent quantity change, 2.5.8 for the target. A named criterion gets fixed in a sprint. A note that the cart feels fiddly gets closed as subjective, and the stepper ships again in the next theme update.

Frequently asked questions

What should cart quantity buttons be called for screen readers?

Use a full accessible name that includes the action and the product, such as Decrease quantity, linen shirt. A bare minus or plus symbol is not a name, and some screen readers skip punctuation entirely. The quantity value itself should also announce changes through a live region.

How big should quantity stepper buttons be?

WCAG 2.2 success criterion 2.5.8 sets a minimum target size of 24 by 24 CSS pixels at Level AA, with spacing exceptions. In practice 32 to 44 pixels is kinder and safer for touch users. Steppers below 24 pixels are a measurable conformance failure, not a style choice.

Should the minus button delete the item at quantity one?

Not silently. Changing a control's function at zero is a trap for anyone who cannot see the icon change. Keep a separate, clearly labelled remove control, or announce the change and confirm the removal with an undo option that restores the item.

How do I test a cart stepper for accessibility?

Operate it by keyboard alone, checking visible focus throughout. Do a screen reader pass and note what each button announces. Zoom to 200 percent and recheck target size and spacing. Then log any failure against its WCAG criterion so it is tracked as a defect.