Fix silent status messages

A message that is only painted on screen is not heard by a screen reader.

The person thinks the button did nothing.

Steps

  1. Trigger the message without moving focus.
  2. Listen with a screen reader, or inspect for aria-live.
  3. Use role status or alert.

Failing example

The cart count changes with no live region.

Better example

A status region says Added to basket.

Shopify

When the Shopify cart drawer updates, write the result into an aria-live region.

WooCommerce

Keep WooCommerce notices in a container that can be announced.

WordPress

Put WordPress form success text in a role=status element.

Wix

Use a Wix form success state that is announced, or a live region in custom HTML.

WCAG

Shopify steps · Shopify · Missing alt text