Cart Live Regions: When a Polite Announcement Arrives Too Late

When a shopper removes an item from the cart, the page changes and the screen reader says nothing, because a DOM change is not an announcement. The shopper has to go hunting for the new total, and by the time they find it, they have lost track of what they just did. That is the failure, and it is a common one: most carts update the total visually and never tell the screen reader at all.

WCAG 2.2 criterion 4.1.3, Status Messages, Level AA, is the rule that covers it. Status changes must be announced to assistive technology without moving focus. The cart total is a status message. So is the item count, the free-shipping progress, and the error when a promo code fails. If the page changes it and the screen reader does not say it, the cart fails 4.1.3.

The cart updates, the screen reader does not

A polite live region waits for a pause in whatever the screen reader is currently saying, then announces the change. An assertive region cuts in immediately, interrupting the current speech. The difference is timing, and the choice is a judgement about urgency, not about importance. A cart total is information. A blocked checkout is an emergency.

Most carts get this backwards. They mark the total assertive, so every quantity change interrupts the shopper mid-sentence, and they mark the promo code error polite, so the shopper hears about the failed code three sentences later. The rule that settles it: assertive is for errors that block the next step, and everything else is polite.

Polite waits its turn, assertive interrupts

Open the cart with NVDA or VoiceOver running, remove an item, and listen. You should hear one sentence with the new total, once, and then silence. If you hear nothing, there is no live region. If you hear the old total, the region is updating before the calculation finishes. If you hear the announcement twice, the region is being re-rendered on every state change, and the screen reader is announcing each render.

Check the quantity stepper the same way. Increase the quantity and listen for the new total. Then apply a promo code that fails, and listen for the error. The error should come through assertive, because it blocks the shopper, and it should name the code that failed. If the error appears visually at the top of the page and the screen reader never mentions it, the cart fails 3.3.1, Error Identification, as well as 4.1.3.

Test it with the sound on

Announce the result once, in one sentence, with the new total. Never announce the same change twice, and never announce a change that has not happened yet. The live region should hold the result, not the process: item removed, cart total now 48 dollars, not updating, please wait, updating, done.

Keep reading: Quantity Steppers That Announce Themselves: Live Regions in the Cart, When a Cart Item Is Removed, Where Does Focus Go?.

The rule that settles it

One more thing to check: the region must exist in the page before the change happens, or the screen reader may miss the first announcement entirely. A live region created at the same moment as the update is a race the shopper usually loses. Put the region in the markup, leave it empty, and fill it when the cart changes.

Frequently asked questions

What is the difference between aria-live polite and assertive?

Polite waits for a pause in the current speech, then announces. Assertive interrupts immediately. Use assertive only for errors that block the next step, and polite for everything else.

Which WCAG criterion covers cart status announcements?

Criterion 4.1.3, Status Messages, Level AA. Status changes must be announced to assistive technology without moving focus.

Should a cart total update be polite or assertive?

Polite. It is information, not an emergency, and an assertive total interrupts the shopper and drowns out real errors.

How do I test live regions in a cart?

With NVDA or VoiceOver running, remove an item and listen. The announcement should come once, with the new total, and the region must exist in the markup before the change happens.