Quantity Steppers That Announce Themselves: Live Regions in the Cart

A sighted shopper taps the plus button and sees the quantity change and the total update. A screen reader user taps the same button and hears nothing, because nothing on the page told their screen reader that anything changed. The button still says 'Increase quantity', the total is somewhere else on the page, and the connection between the two is invisible.

This is a WCAG 4.1.3 problem. Status messages, the criterion that covers this, requires changes in status to be announced without moving focus. A quantity change is a status change. A cart that updates its total silently is failing it, and the failure is invisible to every test that does not use a screen reader.

The silent change problem

Put a live region on the page with aria-live set to polite, and update its text when the quantity changes. Polite means the screen reader finishes what it is saying first, then announces the change. That is the right urgency for a cart total: it matters, but it does not interrupt.

The announcement itself should be one sentence: 'Blue linen shirt, quantity 2, line total 86 dollars.' Item, quantity, total. That is everything the shopper needs to confirm the change worked, and it is short enough to hear in full before the next thing happens.

aria-live polite, and what goes in it

Do not announce the whole cart. A shopper who changes one quantity does not need to hear every item, every price, and the shipping total read back. That is noise, and noise trains people to stop listening, which is worse than silence.

Do not use assertive either. aria-live assertive interrupts whatever the screen reader is saying, and it is meant for errors and emergencies. A quantity change is not an emergency. An assertive announcement on every plus tap turns a routine cart edit into a shouting match between the page and the reader.

What not to announce

Open the cart with a screen reader running, tab to a quantity stepper, and press the plus button. You should hear the new quantity and the new total within a second or two. If you hear nothing, the live region is missing or it is not updating. If you hear the whole cart, the region is too broad.

Keep reading: Mini cart keyboard traps: the focus test that catches them, Cart error messages that name the field that failed.

Testing it with a screen reader in five minutes

Test the minus button too, and test it at quantity one, where minus usually removes the item or disables itself. The announcement should say what actually happened, including when the item left the cart. A live region that announces the happy path and goes quiet on the edge cases is a live region that lies by omission.

Frequently asked questions

What is a live region?

An element with aria-live that tells screen readers to announce its text when it changes. A polite live region waits for the reader to finish speaking first. An assertive one interrupts, and is meant for errors only.

Should a quantity change move focus?

No. Moving focus would drag the shopper away from the button they are using. The quantity change is a status update, so it belongs in a live region, and focus stays exactly where the shopper put it.

What should the announcement say?

One sentence: the item, the new quantity, and the new line total. For example, 'Blue linen shirt, quantity 2, line total 86 dollars.' That is everything needed to confirm the change worked.

Which WCAG criterion covers cart announcements?

WCAG 4.1.3, Status Messages, at Level AA. It requires status changes to be announced to assistive technology without moving focus. A quantity change and a line total update are both status changes.