Standards · ARIA

Zustand Live-Region-Zustand

aria-atomic

Steuert, ob assistive Technologie bei einer Aktualisierung den gesamten Inhalt einer Live-Region oder nur den geänderten Teil ankündigt. Der Standardwert ist "false" (nur die Änderung). "true" wird gesetzt, wenn der Kontext nur als vollständiger Satz verständlich ist.

Wann zu verwenden

Auf einer Live-Region, deren Aktualisierungen nur als vollständige Einheit verständlich sind. Das klassische Beispiel ist eine einzeilige Statusmeldung wie „3 Ergebnisse gefunden“ — ist die Live-Region aria-atomic="false" (der Standard) und ändert sich nur die Zahl, kündigt der Screenreader möglicherweise nur „3“ an, ohne den Kontext. Mit aria-atomic="true" wird der gesamte Satz vorgelesen.

aria-atomic="false" wird gesetzt (oder weggelassen), wenn:

  • Die Region ein Protokoll oder ein Chat-Panel ist, bei dem jede neue Zeile für sich steht — „Alice: Hallo“, „Bob: Hi“. Bei jeder neuen Nachricht das gesamte Protokoll vorzulesen wäre nicht zumutbar.
  • Nur der neue Inhalt die neue Information trägt.

aria-atomic="true" wird gesetzt, wenn:

  • Die Region eine kurze, stabile Phrase ist, deren Bedeutung von benachbarten Wörtern abhängt — „Warenkorbsumme: 42,18 €“, „Seite 3 von 12“, „Aktive Filter: 2“.
  • Eine kleine DOM-Änderung innerhalb der Region für sich allein wenig Bedeutung trägt.

aria-atomic ist unabhängig von aria-live und aria-busy. Sie wirken zusammen, steuern aber unterschiedliche Aspekte.

Synchron halten

Gültige Werte sind "true" und "false". Der Standardwert ist "false".

Das Attribut wird einmal auf der Live-Region gesetzt und danach nicht mehr verändert — es ist eine Eigenschaft der Ankündigungsweise der Region, kein Zustand, der sich im Laufe der Zeit ändert. Es wird außerdem vererbt: aria-atomic="true" auf einem übergeordneten Element macht nachgelagerte Live-Regionen atomisch, sofern nicht überschrieben.

Wenn die Aktualisierungsstrategie „gesamten Text der Region ersetzen“ lautet, erzeugt aria-atomic="true" die natürlichste Ankündigung. Wenn die Strategie „eine neue Zeile anhängen“ lautet, ist in der Regel aria-atomic="false" gewünscht, damit nur die angehängte Zeile vorgelesen wird.

Häufige Fehler

  • aria-atomic auf seinem Standard bei einer stabilen einzeiligen Statusmeldung zu belassen, woraufhin nur „5“ statt „5 Ergebnisse gefunden“ angekündigt wird.
  • aria-atomic="true" auf einem Chat-Protokoll zu setzen — jede neue Nachricht führt dazu, dass das gesamte Protokoll erneut vorgelesen wird.
  • Nur ein <span> innerhalb einer atomischen Region zu aktualisieren und überrascht zu sein, dass auch der umgebende Text angekündigt wird. Genau das ist die Bedeutung von „atomisch“.
  • aria-atomic auf einer Region zu verwenden, die weder aria-live noch eine implizite Live-Rolle hat — es hat keine Wirkung.
  • aria-atomic auf einem fokussierbaren Steuerelement zu setzen. Attribute für Live-Regionen gehören auf Status-Container, nicht auf interaktive Elemente.

Beispiel

<!-- Atomisch: der gesamte Satz ist die Nachricht -->
<p aria-live="polite" aria-atomic="true">
  Cart total: <span id="cart-total">$0.00</span>
</p>

<!-- Nicht-atomisch: nur die neue Zeile wird angekündigt -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hi there</li>
</ul>