a11y/status-message-live

Why

"Added to cart", "12 results" or "Upload failed" shown on screen is silent for a screen reader user unless it is in a live region. They act again, or never learn it failed.

Fix

Render an empty live region with the page (<div role="status">, polite) and put the text into it when the event happens; use role="alert" only for urgent errors. Do not mount the region and its text at the same moment: many screen readers announce only changes to a region that already existed.

Examples

<!-- good: present from the start, filled later -->
<p role="status" id="cart-status"></p>
<script type="module">
  document.querySelector('#cart-status').textContent = 'Added to cart'
</script>

Sources

• WCAG 2.2, Understanding SC 4.1.3 Status Messages
• MDN, ARIA live regions

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/status-message-live