Dynamic content

ARIA live regions

aria-live announces dynamic changes. Use polite for non-critical updates, assertive for urgent alerts.

<!-- Polite: announce when done -->
<div aria-live="polite" aria-label="Search results">
  <p id="result-count">Loading...</p>
  <ul id="results"></ul>
</div>

<!-- Assertive: urgent alert -->
<div aria-live="assertive" aria-label="Error message">
  <!-- Will be announced immediately -->
</div>

aria-atomic and aria-relevant

aria-atomic="true" announces the entire region. aria-relevant="additions removals" specifies what changes to announce.

aria-busy for loading states

Use aria-busy="true" while loading, aria-busy="false" when done.

<button aria-busy="false" disabled>Saving...</button>

<!-- JavaScript -->
btn.setAttribute('aria-busy', 'true');
await save();
btn.setAttribute('aria-busy', 'false');

Polite vs Assertive

Use aria-live="polite" for normal updates (search results). Use aria-live="assertive" for urgent alerts (error messages). Default is polite.