Normes · ARIA

État État de région dynamique

aria-atomic

Contrôle si les technologies d'assistance annoncent l'intégralité du contenu d'une région live lors d'une mise à jour ou seulement la partie modifiée. La valeur par défaut est "false" (seulement le diff). Définissez "true" lorsque le contexte n'a de sens que comme phrase complète.

Quand l’utiliser

Sur une région live dont les mises à jour n’ont de sens que lorsqu’elles sont lues comme un tout. L’exemple classique est un statut sur une seule ligne comme « 3 résultats trouvés » — si la région live est aria-atomic="false" (par défaut) et que seul le nombre change, le lecteur d’écran peut n’annoncer que « 3 », sans contexte. Avec aria-atomic="true", il annonce la phrase entière.

Définissez aria-atomic="false" (ou omettez-le) lorsque :

  • La région est un journal ou un panneau de chat où chaque nouvelle ligne est autonome — « Alice : bonjour », « Bob : salut ». Annoncer l’intégralité du journal à chaque fois serait insupportable.
  • Seul le nouveau contenu porte la nouvelle information.

Définissez aria-atomic="true" lorsque :

  • La région est une phrase courte et stable dont le sens dépend des mots voisins — « Total du panier : 42,18 € », « Page 3 sur 12 », « Filtres appliqués : 2 ».
  • Un petit changement DOM à l’intérieur de la région a peu de sens seul.

aria-atomic est indépendant de aria-live et aria-busy. Ils fonctionnent ensemble mais règlent des aspects différents.

Comment le maintenir cohérent

Les valeurs valides sont "true" et "false". La valeur par défaut est "false".

Définissez l’attribut une fois sur la région live et laissez-le en l’état — c’est une propriété de la façon dont la région doit être annoncée, pas un état qui change dans le temps. Il est également hérité : appliquer aria-atomic="true" à un parent rend les régions live descendantes atomiques, sauf remplacement explicite.

Si votre stratégie de mise à jour consiste à « remplacer tout le texte de la région », aria-atomic="true" produit l’annonce la plus naturelle. Si votre stratégie est « ajouter une nouvelle ligne », vous voulez généralement aria-atomic="false" afin que seule la ligne ajoutée soit lue.

Erreurs courantes

  • Laisser aria-atomic à sa valeur par défaut sur un statut stable d’une seule ligne, puis n’entendre que « 5 » annoncé à la place de « 5 résultats trouvés ».
  • Définir aria-atomic="true" sur un journal de chat — chaque nouveau message provoque la relecture de l’intégralité du journal.
  • Mettre à jour uniquement un <span> à l’intérieur d’une région atomique et être surpris que le texte environnant soit également annoncé. C’est exactement ce que signifie atomique.
  • Utiliser aria-atomic sur une région qui n’a ni aria-live ni rôle live implicite — sans effet.
  • Définir aria-atomic sur un contrôle focusable. Les attributs de région live appartiennent aux conteneurs de statut, pas aux éléments interactifs.

Exemple

<!-- Atomique : la phrase entière est le message -->
<p aria-live="polite" aria-atomic="true">
  Cart total: <span id="cart-total">$0.00</span>
</p>

<!-- Non atomique : seule la nouvelle ligne est annoncée -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hi there</li>
</ul>