Zustand Globaler Zustand

`aria-busy`

Kennzeichnet einen Bereich als mitten in einer Aktualisierung, sodass assistive Technologie Zwischenmeldungen unterdrückt. Beim Laden oder während umfangreicher DOM-Änderungen auf "true" setzen; nach Abschluss auf "false" zurücksetzen.

Verwendung

Dieses Attribut kommt zum Einsatz, wenn ein Bereich asynchron neu aufgebaut wird — etwa eine Suchergebnisliste, die schrittweise eingeblendet wird, eine Tabelle, die sich neu sortiert, oder ein Chat-Bereich, der auf eine Netzwerkantwort wartet. Ohne aria-busy können Screenreader, die mit einer Live-Region verbunden sind, jeden Zwischenzustand ankündigen, was störend und häufig verwirrend ist.

Das empfohlene Muster lautet:

aria-busy="true" am Container setzen, bevor mit der Mutation begonnen wird.
Die Arbeit ausführen (Kindelemente entfernen, Daten laden, neu rendern).
aria-busy="false" setzen, sobald das DOM stabil ist.

Handelt es sich beim Container auch um eine Live-Region (aria-live="polite" oder aria-live="assertive"), hält der Screenreader Ankündigungen zurück, solange aria-busy="true" gesetzt ist, und gibt nach dem Zurücksetzen von aria-busy eine einzige zusammenhängende Meldung aus.

Außerhalb einer Live-Region ist das Attribut weiterhin nützlich: Es signalisiert assistiver Technologie, dass der Inhalt noch nicht interagiert werden sollte, und harmoniert gut mit Fortschrittsanzeigen.

Synchronisierung

Gültige Werte sind "true" und "false". Der Standardwert ist "false" (oder das Attribut wird weggelassen).

Das Attribut muss die Mutation umschließen. Ein verbreiteter Fehler ist, aria-busy="true" zu setzen, das DOM zu verändern und das Zurücksetzen zu vergessen — der Bereich erscheint dann für assistive Technologie dauerhaft als „wird geladen“, obwohl alles visuell korrekt ist.

Das Attribut sollte mit einem sichtbaren Ladeindikator (Spinner, Skeleton, Fortschrittstext) kombiniert werden, damit auch sehende Nutzende dasselbe Signal erhalten. aria-busy ist ausschließlich für assistive Technologie bestimmt und rendert selbst nichts.

Häufige Fehler

aria-busy="true" setzen und nie auf "false" zurücksetzen.
aria-busy nach der bereits abgeschlossenen Mutation setzen — zu spät, die Zwischenmeldungen wurden bereits ausgegeben.
aria-busy ohne aria-live und ohne sichtbaren Spinner verwenden. Sehende Nutzende erhalten kein Signal; AT-Nutzende hören nichts.
aria-busy am gesamten <body> für die gesamte App-Laufzeit setzen. Der Geltungsbereich sollte dem tatsächlich veränderten Bereich entsprechen.
aria-busy anstelle von role="progressbar" für einen bestimmten Fortschrittsindikator verwenden. Beide ergänzen sich, sind aber keine Alternativen.
Vergessen, interaktive Steuerelemente innerhalb des beschäftigten Bereichs zu deaktivieren — sehende Nutzende können diese weiterhin sehen und anklicken.

Beispiel

<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>