Regiones dinámicas: aria-live, aria-atomic y aria-relevant

¿Qué son las regiones dinámicas?

Creación de una región dinámica

<!-- 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>

Resumen de los valores de aria-live

aria-atomic en profundidad

<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 -->

Valores de 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 -->

Roles predefinidos de regiones dinámicas

Estado de carga con una región dinámica

<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>

Comentarios del envío del formulario

<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>

Cantidad de resultados de búsqueda

<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>

Antipatrones de las regiones dinámicas

Pruebas de regiones dinámicas

Comprobación rápida

Resumen: regiones dinámicas