# Dynamic content — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-dynamic-content

> Announce updates to screen reader users via ARIA live regions.

## ARIA live regions

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

```html
<!-- 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.

```html
<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.