Cuando una acción finaliza sin cambiar la página o mover el foco, alguien que utilice un lector de pantalla puede perderse un mensaje visual. Una pequeña región de estado permite que la tecnología de asistencia anuncie una actualización mientras el usuario permanece donde está.

<p id="save-status" role="status"></p>
saveButton.addEventListener("click", async () => {
  await saveSettings();
  document.querySelector("#save-status").textContent = "Settings saved.";
});

Mantenga los anuncios útiles

  • Utilice el estado para actualizaciones de aviso que no deberían interrumpir la tarea actual.
  • No anuncie cada pulsación de tecla o evento de progreso repetido.
  • Mantenga el texto visible sincronizado con lo que recibe la tecnología de asistencia.

Un mensaje de estado no sustituye la gestión de errores ni la explicación de lo que el usuario puede hacer a continuación. Utilice un patrón de error apropiado cuando falle una acción.

Pruebe con navegación por teclado y un lector de pantalla. La actualización debe anunciarse una vez sin que el foco se mueva inesperadamente.