0PricingLogin
React Academy · Lesson

Announcements for Accessibility (aria-live)

Use aria-live regions to announce changes without stealing focus. Pick polite vs assertive, set aria-atomic, and centralize announcements.

Why announcements?

Goal: Announce changes for screen readers without stealing focus.

  • aria-live: polite vs assertive
  • role="status" / role="alert"
  • aria-atomic for complete messages

Polite vs assertive

  • Polite: announce soon; do not interrupt
  • Assertive: urgent; may interrupt
  • Atomic: read whole node when it changes
  • Prefer status for success info; alert for errors

All lessons in this course

  1. Portals, Focus Trap, Escape-to-Close
  2. Global Overlay Manager (Context + Reducer)
  3. Announcements for Accessibility (aria-live)
← Back to React Academy