État État global

`aria-busy`

Marque une région en cours de mise à jour afin que les technologies d'assistance suppriment les annonces intermédiaires. Définissez à "true" pendant le chargement ou lors de modifications DOM importantes ; repassez à "false" lorsque la région est stable.

Quand l’utiliser

Lorsqu’une région est reconstruite de manière asynchrone — une liste de résultats de recherche qui se charge progressivement, un tableau qui se re-trie, un panneau de chat en attente d’une réponse réseau. Sans aria-busy, les lecteurs d’écran connectés à une région live peuvent annoncer chaque état partiel à mesure qu’il apparaît, ce qui est bruyant et souvent déroutant.

Le pattern est le suivant :

Définissez aria-busy="true" sur le conteneur avant de commencer à le modifier.
Effectuez le travail (effacer les enfants, récupérer les données, re-rendre).
Définissez aria-busy="false" une fois que le DOM est stable.

Si le conteneur est aussi une région live (aria-live="polite" ou aria-live="assertive"), le lecteur d’écran retient les annonces tant que aria-busy="true" et produit une annonce unique et cohérente après que aria-busy repasse à "false".

En dehors d’une région live, l’attribut reste utile : il signale aux technologies d’assistance que l’utilisateur ne doit pas encore agir sur le contenu, et il s’intègre bien aux indicateurs de progression.

Comment le maintenir cohérent

Les valeurs valides sont "true" et "false". La valeur par défaut est "false" (ou l’attribut peut être omis).

L’attribut doit encadrer la mutation. L’erreur courante est de définir aria-busy="true", de muter le DOM, puis d’oublier de le remettre à "false" — la région semble alors en « chargement permanent » pour les technologies d’assistance même si tout est visuellement correct.

Associez-le à un indicateur de chargement visible (spinner, squelette, texte de progression) afin que les utilisateurs voyants reçoivent le même signal. L’attribut aria-busy est destiné aux technologies d’assistance uniquement ; il n’affiche rien par lui-même.

Erreurs courantes

Définir aria-busy="true" et ne jamais le remettre à "false".
Définir aria-busy après que la mutation a déjà eu lieu — trop tard, les annonces intermédiaires ont déjà été déclenchées.
Utiliser aria-busy seul sans aria-live ni spinner visible. Les utilisateurs voyants ne voient rien ; les utilisateurs de technologies d’assistance n’entendent rien.
Définir aria-busy sur tout le <body> pour toute la durée de vie de l’application. La portée doit correspondre à la région qui change réellement.
Utiliser aria-busy à la place de role="progressbar" pour un indicateur de progression déterministe. Les deux sont complémentaires, pas alternatifs.
Oublier de désactiver aussi les contrôles interactifs à l’intérieur de la région occupée — les utilisateurs voyants les voient toujours et peuvent cliquer dessus.

Exemple

<section
  id="results"
  aria-live="polite"
  aria-busy="true"
>
  <p>Loading results…</p>
</section>

<script>
  fetch('/api/search')
    .then((r) => r.json())
    .then((data) => {
      const region = document.getElementById('results');
      region.innerHTML = renderResults(data);
      region.setAttribute('aria-busy', 'false');
    });
</script>