Praxisleitfaden Messanzeigen beschriften
Messwerte zugänglich benennen
Erkennen Sie, warum sichtbarer Text einer Messanzeige als Beschriftung fehlen kann.
aria-meter-nameWCAG 1.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-meter-name.html
Befund verstehen
„Papierfeuchte“ ist sichtbar, der Name fehlt
Die übertragene Zeichenmaschinen-Notiz enthält eine Messanzeige mit dem Text „Papierfeuchte“. Ihr HTML übermittelt einen Wert von 3 zwischen 0 und 5. Der Inhalt des div-Elements benennt die Rolle meter jedoch nicht automatisch.
Warum das relevant ist
Wer die Messanzeige über assistive Technik liest, braucht neben dem Wert eine eindeutige Zuordnung: Was wird hier gemessen? Genau diese Beschriftung fehlt an der ausgewählten Fundstelle.
Scanner-Signal
aria-meter-name meldet .field-note [role="meter"]: kein zugänglicher Name.
- Regel
aria-meter-name- Referenz
- WCAG 1.1.1
Kritisch fasst die Axe-Stufen critical und serious zusammen.
Diagnose vor der Korrektur
Rolle: meter
Sichtbarer Text: Papierfeuchte
Zugänglicher Name: fehlt
Wert: 3 · Minimum: 0 · Maximum: 5
aria-meter-name: Verstoß (Axe-Auswirkung: serious)Messanzeigen gemeinsam nachprüfen
Prüfen Sie wiederverwendete Anzeigen mit ihren jeweiligen Messgrößen. Der Zahlenwert ersetzt keine Benennung.
- Papierprüfung× Befund im Beispiel
- Materialprüfung× Befund im Beispiel
- Prüfprotokoll Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenVergleichen Sie an jeder Anzeige Namen, Messwert und Skala.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welcher Text benennt den Messwert?
Der Name beschreibt die Messgröße. Der aktuelle Messwert bleibt eine eigene Information.
Die Lehrskizze zeigt die Namenskorrektur an derselben Messanzeige. Der Wert bleibt 3 auf der Skala von 0 bis 5.
Passende Umsetzung auswählen
Fundstelle betrachten
Die gesamte Notiz bleibt im Blick
Der Ausschnitt zeigt die vollständige importierte Notiz mit Überschrift, Blattregister und benachbarten Feldern. Die Markierung liegt auf der Zeile „Papierfeuchte“, nicht auf dem leeren Textfeld darüber.
Die Zeile wirkt beschriftet. Der Fehler steckt in ihrer programmatischen Benennung und ist am Screenshot allein nicht erkennbar. Die Diagnose zeigt deshalb zusätzlich Rolle, Namen und Werte.
Namen ergänzen
Die vorhandene Messanzeige ausdrücklich benennen
Am selben Element kommt ausschließlich aria-label="Papierfeuchte" hinzu. Text, Messwert, Skala und Darstellung bleiben gleich. Der Codeauszug lässt nur die unveränderte Abstandsformatierung weg.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
aria-label="Papierfeuchte"
In Ihrer Komponente Pflegen Sie sichtbare Beschriftung und ARIA-Namen aus derselben Textquelle, damit Änderungen und Übersetzungen nicht auseinanderlaufen.
Vollständigen Code vergleichen
Vorher
<div role="meter"
aria-valuenow="3"
aria-valuemin="0"
aria-valuemax="5">Papierfeuchte</div>Nachher
<div role="meter"
aria-valuenow="3"
aria-valuemin="0"
aria-valuemax="5"
aria-label="Papierfeuchte">Papierfeuchte</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Name, Wert und Skala getrennt prüfen
Eine benannte Messanzeige muss auch die fachlich richtige Messgröße und Skala vermitteln.
- 1
Verwenden Sie einen stabilen Namen für die Messgröße; ändern Sie bei neuen Messungen den Wert, nicht den Namen.
- 2
Prüfen Sie, ob Minimum, Maximum und aktueller Wert zum Datenmodell passen. Das Beispiel enthält bereits 0, 5 und 3.
- 3
Ergänzen Sie bei Bedarf aria-valuetext für eine verständliche Wertausgabe. Diese Eigenschaft ersetzt den Namen nicht.
- 4
Prüfen Sie, ob tatsächlich ein Messwert innerhalb einer Skala dargestellt wird. Für den Fortschritt einer Aufgabe ist progressbar vorgesehen.
Fehlversuche vermeiden
Was den fehlenden Namen nicht zuverlässig behebt
Nur auf den sichtbaren Inhalt vertrauen
„Papierfeuchte“ steht schon vor der Korrektur im Element. Genau diese unveränderte Ausgangslage löst den Befund aus.
Den Zahlenwert als Namen verwenden
aria-label="3" erklärt nicht, was gemessen wird. Die Zahl gehört in die Wertangabe; der Name benennt die Papierfeuchte.
Auf eine fehlende ID verweisen
aria-labelledby funktioniert nur mit einem vorhandenen, geeigneten Beschriftungsziel. Eine nicht auflösbare Referenz liefert keinen Namen.
Die Rolle entfernen, um den Befund auszublenden
Damit verliert die Anzeige ihre Messwertsemantik. Entscheiden Sie zuerst, welche Aufgabe das Element erfüllen soll.
Gleiche Anzeige, nachgewiesener Name
Die erneute Axe-Prüfung besteht für aria-meter-name am selben Element. Das überprüfte aria-label lautet „Papierfeuchte“; die unveränderten Bildpunkte bestätigen, dass die Korrektur keine sichtbare Umgestaltung ist.
So prüfen Sie die Korrektur nach
- Öffnen Sie die veröffentlichte Seite und prüfen Sie im Accessibility-Baum Rolle meter und Name Papierfeuchte.
- Führen Sie aria-meter-name erneut aus und vergleichen Sie die Fundstelle mit dem ursprünglichen Selektor.
- Prüfen Sie mit dem eingesetzten Screenreader, ob Name, Wert und Skala zusammen verständlich ausgegeben werden.
Der Nachweis gilt für diese Regel an der ausgewählten Messanzeige. Er bestätigt weder die fachliche Bedeutung der Skala noch die Barrierefreiheit der übrigen Notiz.
Nachgewiesener Zustand nach der Korrektur
Rolle: meter
aria-label: Papierfeuchte
Wert: 3 · Minimum: 0 · Maximum: 5
aria-meter-name: am selben Element bestanden
Sichtbare Darstellung: unverändertPrüfgrenzen kennen
Ein vorhandener Name ist der technische Anfang
Der Scan findet die fehlende Benennung. Ihre Bedeutung braucht eine Prüfung im Nutzungskontext.
Automatisch prüfbar
- Einen fehlenden zugänglichen Namen an role="meter" erkennen
- Die betroffene Messanzeige im Seitenkontext zuordnen
- Nach der Korrektur einen tatsächlichen Regel-Pass am selben Ziel nachweisen
Im Kontext zu entscheiden
- Bewerten, ob „Papierfeuchte“ die tatsächliche Messgröße korrekt bezeichnet
- Prüfen, ob Einheit, Skala und Wertausgabe für die Zielgruppe verständlich sind
- Weitere Anzeigen, dynamische Zustände und die Ausgabe mit assistiver Technik prüfen