Level AAWCAG 2.2
4.1.3 Status Messages
Status messages can be programmatically determined through role or properties so they can be presented to assistive technologies.
Why it matters
Screen readers
Without a live region, status messages for success, error, or progress are not announced.
E-commerce
If 'Added to cart' feedback isn't conveyed, users can't confirm whether their action succeeded.
Forms
Without announcements for validation errors or submission completion, users don't know the next step.
Dynamic content
Updates like search result counts or loading state need to be announced without a full navigation.
Live demo
Status message announcement
Sample product
$19.80 (tax included)
The message is visible on screen, but assistive technologies do not get an announcement.
Code:
Code:
<div>Added to cart</div>Persona perspective
Suzuki (29) — Totally blind, screen reader user
On an online shop, pressing 'Add to cart' announces nothing. I'm never sure it worked, so I go to the cart page to check every time. With role='status', I'd hear 'Added to cart' the moment I press the button.