Regioni live: aria-live aria-atomic aria-relevant

Che cosa sono le regioni live?

Creazione di una regione live

<!-- Polite: announce when user is idle -->
<div aria-live="polite" id="notifications"></div>

<!-- Inject text to announce: -->
<script>
document.getElementById('notifications').textContent = '5 new messages';
// Screen reader announces: '5 new messages' when user pauses
</script>

Riepilogo dei valori di aria-live

aria-atomic in dettaglio

<div aria-live="polite" aria-atomic="false">  <!-- default -->
  Items in cart: <span id="count">3</span>
</div>
<!-- Only the changed span is announced: '4' -->

<div aria-live="polite" aria-atomic="true">
  Items in cart: <span id="count">3</span>
</div>
<!-- The entire div is announced: 'Items in cart: 4' -->

<!-- aria-atomic="true" gives more context but is more verbose -->

Valori di aria-relevant

<!-- Default: additions text -->
<div aria-live="polite" aria-relevant="additions text">

<!-- Announce removals too: -->
<div aria-live="polite" aria-relevant="removals">

<!-- Announce everything: -->
<div aria-live="polite" aria-relevant="all">

<!-- Values: additions, removals, text, all
     'additions' = added nodes announced
     'removals' = removed nodes announced
     'text' = text content changes announced -->

Ruoli predefiniti delle regioni live

Stato di caricamento con una regione live

<div role="status" aria-live="polite" aria-atomic="true" id="load-status">
  <!-- empty initially -->
</div>

<script>
async function loadData() {
  document.getElementById('load-status').textContent = 'Loading...';
  const data = await fetchData();
  renderResults(data);
  document.getElementById('load-status').textContent =
    `${data.length} results loaded.`;
}
</script>

Feedback sull'invio del modulo

<form id="contact-form" novalidate>
  <input type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

<div role="status" aria-live="polite" id="form-status"></div>

<script>
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const status = document.getElementById('form-status');
  status.textContent = 'Submitting...';
  await submitForm(new FormData(form));
  status.textContent = 'Thank you! You are now subscribed.';
});
</script>

Numero dei risultati di ricerca

<label for="search">Search</label>
<input type="search" id="search">

<div role="status" aria-live="polite" aria-atomic="true" id="results-count"></div>
<div id="results"></div>

<script>
let debounceTimer;
search.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const results = filterResults(search.value);
    renderResults(results);
    document.getElementById('results-count').textContent =
      `${results.length} results for "${search.value}"`;
  }, 300);
});
</script>

Anti-pattern delle regioni live

Test delle regioni live

Verifica rapida

Riepilogo: regioni live