You click Add item. The cart count ticks from zero to one. You click Save. The status flips to Saved. Sighted users see it instantly. On that button with VoiceOver, what do you hear?
Often: still the button hint - and nothing about the cart or Saved. Static text on the page is not a status message.
WCAG 4.1.3 Status Messages is about announcing that kind of update without moving focus.
Why this trips people up
Two failure patterns show up a lot:
- No live region at all - the DOM updates, the screen updates, assistive tech stays quiet.
-
The trap -
aria-live(orrole="status") is on a wrapper, but the changing text sits outside that node. The live region never sees a relevant update.
What to put on the changing node
-
aria-live="polite"and/orrole="status"on the element whose text content actually changes - Prefer polite for non-urgent cart/status UI; keep assertive for rare urgent cases
- Do not assume "I added aria-live somewhere nearby" is enough - verify with a screen reader
Practice it
I published a walkthrough on A11Y in Practice with broken vs fixed paths on the same free lab:
- Video: https://www.youtube.com/watch?v=td4DaFK8AYw
- Lab: https://wasexamprep.com/labs/live-regions/polite-live-regions
- Short: https://www.youtube.com/shorts/4sUPQ2snbHU
Part of WAS Exam Prep / WAS Lab study notes (independent; not affiliated with IAAP or W3C).
Takeaway: put the live region on the changing text node, not on a silent wrapper.
Top comments (0)