html-einfach.de

Barrierefreie Komponenten · ARIA-Techniken

Status, Fortschritt & Benachrichtigungen

Von Zuletzt geändert am

„Wird geladen“, „Schritt 3 von 5“, „Gespeichert“ – Statusinformationen sind für sehende Nutzer oft ein beiläufiges Detail, für andere unsichtbar, wenn man sie nicht ankündigt. Dieser Artikel baut auf den Live-Regionen auf und wendet sie auf drei konkrete Muster an: Fortschritt, Ladezustand und Toasts.

Fortschrittsbalken

Für einen bestimmbaren Fortschritt gibt es das native <progress> – fertig ausgezeichnet:

<label for="upload">Upload</label>
<progress id="upload" value="60" max="100">60 %</progress>

Baust du den Balken selbst, übernimm die Semantik per ARIA:

<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Upload">
  <span style="width:60%"></span>
</div>

Aktualisiere value bzw. aria-valuenow synchron zum Sichtbaren – sonst stimmt die Ansage nicht.

Ladezustand (unbestimmt)

Wenn die Dauer unbekannt ist (Spinner), gibt es keinen Wert. Hier hilft eine höfliche Statusmeldung plus aria-busy am Bereich, der gerade lädt:

<section aria-busy="true">
  <p role="status">Ergebnisse werden geladen …</p>
</section>

aria-busy="true" signalisiert „in Arbeit“, role="status" sagt es höflich an. Nach dem Laden setzt du aria-busy="false" und meldest das Ergebnis („12 Treffer“).

Toasts & Benachrichtigungen

Ein Toast ist eine kurz eingeblendete Meldung. Damit Screenreader sie mitbekommen, ist er eine Live-Region – meist role="status", für Dringendes role="alert":

<!-- liegt dauerhaft im DOM, wird bei Bedarf befüllt -->
<div id="toast" role="status" aria-live="polite" class="visually-hidden"></div>

Randnotiz – genug Zeit lassen. Ein Toast, der nach zwei Sekunden verschwindet, ist für langsames Lesen, Vergrößerung oder Screenreader zu schnell weg. WCAG 2.2.1 („Zeiteinteilung anpassbar“) verlangt, dass solche Einblendungen nicht zu flüchtig sind. Biete bei wichtigen Meldungen eine Möglichkeit, sie erneut zu sehen oder aktiv zu schließen – verlasse dich nie allein auf einen Toast für kritische Infos.

Häufige Fehler

  • Spinner ohne Textansage – „lädt“ bleibt unsichtbar für Screenreader.
  • aria-valuenow nicht aktualisiert – der Balken steht still in der Ansage.
  • Toast als einzige Quelle für eine wichtige Bestätigung.
  • Toast zu kurz sichtbar ohne Möglichkeit, ihn wiederzubekommen.
  • Alles assertive – ständige Unterbrechungen statt höflicher Hinweise.

Häufige Fragen

<progress> oder role="progressbar"?

Nimm das native <progress>, wann immer es passt – es bringt die Semantik mit. role="progressbar" ist für Eigenbauten, bei denen <progress> gestalterisch nicht reicht.

Wie kündige ich einen Spinner an?

Mit einer höflichen Statusmeldung (role="status") und aria-busy am ladenden Bereich. Nach Abschluss meldest du das Ergebnis und setzt aria-busy="false".

Wie lange sollte ein Toast sichtbar bleiben?

Lang genug zum Lesen – Faustregel einige Sekunden plus Lesezeit, mit Schließen-Knopf. Für Wichtiges nicht allein auf den Toast setzen.

Fazit

Status muss hörbar sein: bestimmter Fortschritt über <progress> bzw. role="progressbar", unbestimmtes Laden über aria-busy plus role="status", Toasts als Live-Region mit genügend Zeit. Werte synchron halten, sparsam ankündigen – und für kritische Meldungen nie allein auf eine flüchtige Einblendung verlassen.