enum Valeurs : true,false

aria-busy

Indique qu'une région est en cours de mise à jour et que les technologies d'assistance doivent attendre la fin du chargement avant d'annoncer les changements.

Description

aria-busy="true" signale que le contenu d’une région est en train d’être chargé ou mis à jour. Les lecteurs d’écran attendent que aria-busy repasse à false (ou soit retiré) avant d’annoncer les modifications. Cela évite d’annoncer du contenu partiel ou incomplet.

Syntaxe

<div aria-live="polite" aria-busy="true" id="resultats">
  Chargement…
</div>

Exemples

Chargement de résultats de recherche :

<section aria-live="polite" aria-busy="false" id="resultats">
  <!-- Résultats ici -->
</section>

<script>
  async function rechercher(query) {
    const section = document.getElementById('resultats');
    section.setAttribute('aria-busy', 'true');
    const data = await fetch(`/api/search?q=${query}`);
    section.innerHTML = await renderResultats(data);
    section.setAttribute('aria-busy', 'false');
  }
</script>

Tableau en cours de tri :

<table aria-busy="true" aria-label="Liste des produits">
  <!-- Données en cours de rechargement -->
</table>

Notes

Retirer ou passer à false : une fois le chargement terminé, passer aria-busy à false ou retirer l’attribut pour que l’annonce se déclenche.

Combiner avec aria-live : aria-busy est particulièrement utile dans les régions live pour battre les mises à jour multiples en une seule annonce.

Indicateur visuel : accompagner aria-busy="true" d’un indicateur de chargement visible (spinner, barre de progression) pour les utilisateurs voyants.

Support navigateurs