Praxisleitfaden Fortschrittsanzeigen beschriften
Der Fortschritt braucht einen Namen
Ein Wert beschreibt den Stand. Der Name erklärt, wozu er gehört.
aria-progressbar-nameWCAG 1.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-progressbar-name.html
Befund einordnen
Der Balken hat einen Wert, aber keinen Namen
Scanner-Signal
Axe meldet aria-progressbar-name an .progress[role="progressbar"]: Eine zugängliche Benennung fehlt.
Technische Einordnung
- Regel
aria-progressbar-name- Referenz
- WCAG 1.1.1
Die Zeitleiste zur Ortsgeschichte von Baška zeigt das erste von sieben Zeitfenstern. Ihr Balken besitzt eine Rolle und Zahlenwerte, aber weder aria-label noch aria-labelledby oder title. Die benachbarte Überschrift benennt ihn nicht automatisch.
Bedeutung im Nutzungskontext
Wer die Seite mit einem Screenreader erkundet, kann den Wert der Anzeige erhalten, ohne ihren Bezug zur Ortsgeschichte zu erkennen. Besonders bei mehreren Anzeigen fehlt damit die Zuordnung.
Diagnose vor der Korrektur
Rolle: progressbar
Zugänglicher Name: leer
Aktueller Wert: 1 · Minimum: 1 · Maximum: 7
Axe: aria-progressbar-name verletztAnzeigen in jedem Ablauf benennen
Derselbe Balken kann unterschiedliche Vorgänge darstellen. Prüfen Sie seine Benennung im jeweiligen Ablauf.
- Ortsgeschichte× Befund im Beispiel
- Ausstellungsrundgang× Befund im Beispiel
- Dateiübertragung Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie Namen, aktualisierte Werte und Eignung der Rolle getrennt.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Benennen Sie den dargestellten Vorgang
Entscheiden Sie zuerst, was die Anzeige bedeutet und ob bereits eine passende sichtbare Beschriftung existiert.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Passender Text ist sichtbar | Ein Text außerhalb des Balkens benennt genau den dargestellten Vorgang. | Geben Sie dem Text eine eindeutige ID und verknüpfen Sie den Balken über aria-labelledby damit. |
| Eine eigene Beschriftung fehlt | Wie in dieser Zeitleiste gibt es keine gezielte Beschriftung für den Balken selbst. | Ergänzen Sie einen präzisen Namen über aria-label. Im Beispiel lautet er „Position in der Ortsgeschichte“. |
| Es ist kein Fortschritt | Die Grafik zeigt einen Messwert oder nur eine Auswahlposition, keinen laufenden oder abgeschlossenen Vorgang. | Prüfen Sie die Rolle separat. Ein passender Name allein macht progressbar noch nicht zur richtigen Semantik. |
Fundstelle ansehen
Jahresauswahl, Detailkarte und Balken zusammen lesen
Der vollständige Abschnitt zeigt links die Jahresauswahl und rechts die zugehörige Karte. Unter den Quellenangaben liegt die betroffene Anzeige. Im erfassten Zustand ist 1247 ausgewählt.
Die Markierung betrifft ausschließlich den schmalen Balken am Fuß der Detailkarte. Seine Position ist sichtbar, sein zugänglicher Name fehlt. Die Korrektur ändert die Benennung im HTML und hat daher keinen sichtbaren Bildeffekt.
Namen ergänzen
Den Zweck direkt am Balken hinterlegen
Für diesen Nachweis erhält das vorhandene Element aria-label="Position in der Ortsgeschichte". Die Rolle, die vorhandenen Werte und die Darstellung bleiben erhalten. So lässt sich die Wirkung der Benennung gezielt nachprüfen.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
aria-label="Position in der Ortsgeschichte"
In der Komponente Tragen Sie die Benennung am Element mit role="progressbar" ein. Ein Label am inneren Füllbalken oder am umgebenden Container benennt dieses Element nicht automatisch.
Vollständigen Code vergleichen
Vorher
<div class="progress" role="progressbar"
aria-valuemin="1" aria-valuemax="7"
aria-valuenow="1">
<div class="progress-bar" id="timelineProgress"></div>
</div>Nachher
<div class="progress" role="progressbar"
aria-valuemin="1" aria-valuemax="7"
aria-valuenow="1"
aria-label="Position in der Ortsgeschichte">
<div class="progress-bar" id="timelineProgress"></div>
</div>Markierte Zeilen wurden geändert
Im Produkt umsetzen
Name und veränderlichen Wert getrennt pflegen
Die Benennung soll auch dann stimmen, wenn sich der angezeigte Stand ändert.
- 1
Benennen Sie den Bezug konkret, etwa den Datei-Upload oder den bearbeiteten Vorgang. „Fortschritt“ allein unterscheidet mehrere Balken nicht.
- 2
Aktualisieren Sie den Wert über aria-valuenow. Eine Prozentzahl im Namen ersetzt den strukturierten Wert nicht.
- 3
Bei aria-labelledby muss die referenzierte ID im gerenderten Zustand existieren und auf einen passenden Text zeigen.
- 4
Prüfen Sie jede wiederverwendete Instanz: Ihre Beschriftung muss zum jeweiligen Vorgang gehören.
Fehlversuche vermeiden
Was den Namen nicht zuverlässig ersetzt
Nur den Zahlenwert setzen
aria-valuenow="1" sagt nichts darüber aus, wozu der Wert gehört. Genau diese Lücke zeigt das Beispiel.
Text nur in den Balken schreiben
Die Rolle progressbar erhält ihren Namen nicht automatisch aus ihrem Inhalt. Verwenden Sie eine explizite Benennung.
Auf die falsche Überschrift verweisen
Eine existierende ID kann den automatischen Namenstest bestehen, obwohl ihr Text einen anderen Vorgang beschreibt.
Den bestandenen Test mit richtiger Semantik gleichsetzen
Die Zeitleiste zeigt eine auswählbare Position. Ob dafür eine Fortschrittsrolle sinnvoll ist, braucht eine eigene fachliche Entscheidung; der Namenstest beantwortet sie nicht.
Derselbe Balken besteht jetzt die Namenprüfung
Axe bestätigt nach der Änderung einen nicht leeren aria-label-Wert am unveränderten Zielknoten. Für diesen Balken ist aria-progressbar-name bestanden; die beiden Rohaufnahmen sind pixelgleich.
Nachgewiesen ist die Reparatur des fehlenden Namens an einer Fundstelle. Andere Verstöße der Kalibrierseite, die Rollenwahl und die Verständlichkeit der dynamischen Ausgabe sind damit nicht erledigt.
Diagnose nach der Korrektur
Rolle: progressbar
Zugänglicher Name: Position in der Ortsgeschichte
Aktueller Wert: 1 · Minimum: 1 · Maximum: 7
Axe: aria-progressbar-name bestandenPrüfumfang verstehen
Ein Namenstest erkennt die Lücke, nicht die ganze Nutzung
Die Regel prüft die zugängliche Benennung von ARIA-Fortschrittsanzeigen. Ihr Ergebnis braucht eine Einordnung im Ablauf.
Automatisch prüfbar
- Fehlende oder leere Benennungen an Elementen mit role="progressbar" erkennen
- Ungültige oder leere Beschriftungsreferenzen als fehlende Namensquelle erkennen
- Die gleiche Fundstelle nach der Änderung erneut auf diese Regel prüfen
Im Kontext zu entscheiden
- Bewerten, ob der Name den dargestellten Vorgang treffend beschreibt
- Entscheiden, ob Fortschrittsrolle, Auswahlposition oder Messwert zum Inhalt passen
- Wertänderungen und die tatsächliche Screenreader-Ausgabe während der Bedienung prüfen