Standards · ARIA

Rolle Widget

progressbar

Kennzeichnet ein Element als Fortschrittsanzeige. Bevorzugt wird <progress> — es liefert die Semantik, die bestimmte visuelle Darstellung und die Wertattribute nativ. role="progressbar" kommt zum Einsatz, wenn das native Element stilistisch nicht ausreicht.

Einsatzbereiche

Empfohlen wird <progress value="42" max="100">. Das native Element ist browserübergreifend schwierig zu gestalten — das ist der Hauptgrund, stattdessen role="progressbar" auf einem benutzerdefinierten <div> zu verwenden.

Zwei Varianten:

  • Bestimmt — der Gesamtfortschritt ist bekannt. aria-valuemin, aria-valuemax werden gesetzt, und aria-valuenow wird während des Fortschritts aktualisiert.
  • Unbestimmt — der Gesamtfortschritt ist nicht bekannt. aria-valuenow wird weggelassen (oder nicht gesetzt). Der Screenreader kündigt „beschäftigt“ / „lädt“ an, ohne einen Prozentwert.

aria-valuetext wird eingesetzt, wenn die bloße Zahl nicht aussagekräftig ist — z. B. liest sich aria-valuetext="Foto 3 von 8 wird hochgeladen" besser als „37 Prozent“.

Eine Fortschrittsanzeige ist KEIN Live-Bereich — Screenreader kündigen nicht jede Änderung von aria-valuenow an. Soll die Änderung vorgelesen werden, ist zusätzlich role="status" auf einem Begleitelement mit dem menschenlesbaren Fortschrittstext zu verwenden.

Häufige Fehler

  • role="progressbar" auf einem Spinner ohne aria-label. Die Rolle wird angekündigt, aber es fehlt ein Name für die laufende Aufgabe.
  • role="progressbar" für einen unbestimmten Spinner verwenden UND aria-valuenow="0" setzen. Das kündigt dauerhaft „0 Prozent abgeschlossen“ an.
  • Vergessen, die Fortschrittsanzeige (oder ihr aria-busy) zu entfernen, wenn die Aufgabe abgeschlossen ist. Einige Screenreader fragen weiter ab.
  • Eine Fortschrittsanzeige mit einem visuell versteckten Prozentwert kombinieren, ohne beides zu aktualisieren, wenn der Upload stockt. Nutzende erhalten einen eingefrorenen Zustand ohne Ankündigung.
  • role="progressbar" sowohl auf den äußeren Container als auch auf den inneren Füllbalken setzen. Doppelte Rollen — es ist eine zu wählen.

Beispiel

<!-- Bevorzugt -->
<label for="upload">Hochladen</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- Benutzerdefiniert, bestimmt -->
<div id="uploadLabel">Foto 3 von 8 wird hochgeladen</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>