Lorsqu'une action se termine sans changer de page ni déplacer le focus, un message visuel peut manquer à une personne utilisant un lecteur d'écran. Une petite région d'état permet à la technologie d'assistance d'annoncer une mise à jour pendant que l'utilisateur reste là où il se trouve.

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

Gardez les annonces utiles

  • Utilisez le statut pour les mises à jour consultatives qui ne doivent pas interrompre la tâche en cours.
  • N'annoncez pas chaque frappe de touche ou événement de progression répété.
  • Gardez le texte visible synchronisé avec ce que la technologie d’assistance reçoit.

Un message d'état ne remplace pas la gestion des erreurs ou l'explication de ce que l'utilisateur peut faire ensuite. Utilisez un modèle d'erreur approprié lorsqu'une action échoue.

Testez avec la navigation au clavier et un lecteur d'écran. La mise à jour doit être annoncée une fois sans déplacer le focus de manière inattendue.