Statusmeldungen, die auch ankommen

Kriterium 4.1.3 ist das, was zuletzt auffällt, weil optisch nichts kaputt wirkt: Der Toast erscheint, die Trefferzahl aktualisiert sich, der Filter greift. Nur erfährt das niemand, der gerade nicht auf diese Stelle schaut. Genau diese Fälle findet unsere Ebene für dynamische Inhalte, indem sie die Interaktion auslöst und beobachtet, was semantisch danach passiert.

Die drei typischen Fehler

<!-- 1. Toast wird samt Text neu ins DOM gehaengt:
     oft kommt gar keine Ansage an, weil die Live-Region
     im selben Moment erst entsteht -->
<script>
  const toast = document.createElement("div");
  toast.className = "toast";
  toast.textContent = "In den Warenkorb gelegt";
  document.body.appendChild(toast);
</script>

<!-- 2. Ergebniszahl aendert sich stumm -->
<p class="results">42 Treffer</p>

<!-- 3. Alles laut: assertive fuer eine harmlose Bestaetigung
     unterbricht die laufende Ausgabe -->
<div aria-live="assertive">Filter angewendet</div>

Der erste Fall ist der häufigste und der tückischste: Die Live-Region entsteht im selben Moment wie ihr Inhalt. Viele Screenreader beobachten aber nur Regionen, die es schon gab, und melden deshalb nichts. Im Prüfbericht steht dann „Live-Region mit Inhalt eingefügt“, und genau das ist gemeint.

Die verlässliche Umsetzung

<!-- Die Live-Region steht von Anfang an im DOM und ist leer.
     Spaeter wird nur ihr Text gesetzt: das loest die Ansage aus. -->
<div id="status" role="status" aria-live="polite" class="sr-only"></div>

<p class="results">
  <span id="result-count" role="status">42 Treffer</span>
</p>

<script>
  function announce(message) {
    const region = document.getElementById("status");
    // Leeren und im naechsten Frame setzen: identische Texte
    // hintereinander werden sonst nicht erneut angesagt.
    region.textContent = "";
    requestAnimationFrame(() => {
      region.textContent = message;
    });
  }

  announce("In den Warenkorb gelegt");
</script>

/* Visuell versteckt, aber im Accessibility-Tree vorhanden.
   Nicht display:none verwenden: das entfernt die Region komplett. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

polite, assertive oder Fokus

• role="status" (polite): Bestätigungen, Trefferzahlen, Ladezustände. Wartet, bis die laufende Ausgabe fertig ist.
• role="alert" (assertive): Fehler und Warnungen, die sofort ankommen müssen. Unterbricht, deshalb sparsam einsetzen.
• Fokuswechsel: für Ereignisse, bei denen sich auch die Bedienposition ändern soll, etwa eine Fehlerzusammenfassung nach dem Absenden.

Details, die den Unterschied machen

• Zweimal derselbe Text hintereinander wird oft nicht erneut angesagt: vorher leeren, dann im nächsten Frame setzen.
• Halte die Meldung kurz und vollständig: „In den Warenkorb gelegt: Laufschuh 4711“ ist besser als „Erfolg“.
• Verschwindet ein Toast nach drei Sekunden, ist die Information für langsamere Ausgaben weg. Lass wichtige Meldungen stehen oder wiederhole sie an einer bleibenden Stelle.
• Eine einzige Live-Region pro Zweck reicht. Mehrere gleichzeitig erzeugen Überlagerungen.

Testen

1. Screenreader starten, Aktion mit der Tastatur auslösen, wegsehen: Kommt eine Ansage?
2. Prüfen, ob der Fokus dort geblieben ist, wo er war (Statusmeldungen dürfen ihn nicht stehlen).
3. Dieselbe Aktion zweimal auslösen: Wird beim zweiten Mal wieder angesagt?