Praxisleitfaden ARIA-Attributnamen prüfen
Ungültige ARIA-Attribute korrigieren
Ein fehlender Buchstabe verhindert hier die Beschriftung der Wetterkarten-Schaltfläche.
aria-valid-attrWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-valid-attr.html
Befund verstehen
Der Text ist vorhanden, sein Attribut ist ungültig
Der Button der alten Meldestation hat keinen sichtbaren Text. Seine vorgesehene Beschriftung steht in aria-labl. Dieser Name ist in ARIA nicht definiert; die Regel aria-valid-attr meldet den Schreibfehler.
Warum das relevant ist
Das unbekannte Attribut liefert keinen zugänglichen Namen. Wer mit einem Screenreader durch die Bedienelemente navigiert, erhält daraus keine Information über die Wetterkarte.
Scanner-Signal
.weathered-station button enthält aria-labl="Wetterkarte öffnen".
- Regel
aria-valid-attr- Referenz
- WCAG 4.1.2
Diagnose vor der Korrektur
Attribut: aria-labl
Wert: Wetterkarte öffnen
Axe: Invalid ARIA attribute name: aria-labl
Die beabsichtigte Beschriftung wird nicht als aria-label erkannt.Attributnamen an der Quelle korrigieren
Ein Tippfehler im Buttonbaustein kann mehrere Seiten erreichen. Prüfen Sie alle betroffenen Ausgaben und verbleibende Wertfehler separat.
- Wetterübersicht× Befund im Beispiel
- Stationsarchiv× Befund im Beispiel
- Textlinkseite Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie nach der Vorlagenkorrektur die Attributnamen der betroffenen Buttons erneut.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welches Attribut war beabsichtigt?
Prüfen Sie die Aufgabe des Attributs, bevor Sie seinen Namen ändern.
Fundstelle ansehen
Der kleine Button links vor der Pfadkennung
Der Beleg zeigt die gesamte alte Meldestation mit Überschrift, Erläuterung, Eingabefeld und Audiosteuerung. Die Markierung ordnet den unsichtbaren Schreibfehler dem kleinen, textlosen Button zu.
Die Aktion „Wetterkarte öffnen“ lässt sich aus dem unbeschrifteten Button nicht ablesen. Der falsch geschriebene ARIA-Name verhindert zusätzlich, dass der hinterlegte Text als zugänglicher Name verwendet wird.
Attribut korrigieren
Den Namen berichtigen und den Text erhalten
Die gezeigte Korrektur ersetzt nur aria-labl durch aria-label. Der separate Fehler aria-pressed="maybe" bleibt im Beispiel sichtbar im Code und muss anschließend geklärt werden. Der Re-Test unten bewertet ausschließlich die Attributnamen.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
aria-labl- Kommt hinzu
aria-label
In der Komponente Korrigieren Sie die Vorlage, die diesen Button erzeugt. Prüfen Sie anschließend das gerenderte HTML: Auch eine richtig benannte Komponenten-Eigenschaft muss als korrektes DOM-Attribut ankommen.
Vollständigen Code vergleichen
Vorher
<button type="button"
aria-labl="Wetterkarte öffnen"
aria-pressed="maybe"></button>Nachher
<button type="button"
aria-label="Wetterkarte öffnen"
aria-pressed="maybe"></button>Markierte Zeilen wurden geändert
Änderung umsetzen
Vom Tippfehler zur brauchbaren Beschriftung
Kontrollieren Sie sowohl die Schreibweise als auch die Ausgabe des Buttons.
- 1
Entfernen Sie das fehlerhafte aria-labl vollständig; ein zusätzliches korrektes Attribut allein beseitigt den Verstoß nicht.
- 2
Prüfen Sie, dass der Button im Browser den zugänglichen Namen „Wetterkarte öffnen“ erhält.
- 3
Suchen Sie dieselbe Schreibweise in gemeinsamen Vorlagen und prüfen Sie die daraus erzeugten Varianten.
- 4
Klären Sie zusätzlich, ob der Button eine Aktion oder einen Umschaltzustand darstellt, bevor Sie aria-pressed berichtigen oder entfernen.
- 5
Ergänzen Sie für den realen Nutzerweg eine verständliche sichtbare Beschriftung und prüfen Sie die tatsächliche Funktion.
Fehlversuche vermeiden
Warum ein verschwundener Befund allein nicht reicht
Nur den Text im Attribut ändern
Ein besserer Text in aria-labl bleibt unerreichbar: Der ungültige Name ist die Ursache dieses Befunds.
Das Attribut ersatzlos löschen
Der ungültige Name wäre entfernt, die beabsichtigte Beschriftung aber ebenfalls. Der leere Button braucht weiterhin einen verständlichen Namen.
ARIA nur nach Schreibweise prüfen
aria-pressed ist ein gültiger Name. Ob seine Verwendung zum Button passt und sein Wert gültig ist, beantworten andere Prüfungen.
Beschriftung mit Funktion verwechseln
aria-label implementiert keine Wetterkarte. Ob Aktivierung, Fokusführung und Rückkehr funktionieren, muss am tatsächlichen Nutzerweg geprüft werden.
Die Attributnamen bestehen den Re-Test
Axe meldet nach der Korrektur einen tatsächlichen Pass für aria-valid-attr am selben Button. Die zusätzliche Prüfung findet ihn unter dem zugänglichen Namen „Wetterkarte öffnen“. Die sichtbare Darstellung bleibt unverändert.
So prüfen Sie die Korrektur nach
- Am gerenderten Button fehlt aria-labl; aria-label enthält „Wetterkarte öffnen“.
- Die Regel aria-valid-attr liefert am ausgewählten Element keine Verletzung und keinen unvollständigen Befund, sondern einen Pass.
- Die separate Wertprüfung und die Bedienprüfung bleiben erforderlich; aria-pressed="maybe" ist noch nicht behoben.
Dieser Nachweis betrifft nur die Attributnamen an diesem Button. Er bestätigt weder einen korrekten Umschaltzustand noch die Bedienbarkeit oder die Barrierefreiheit der gesamten Meldestation.
Diagnose nach der Korrektur
aria-labl: entfernt
aria-label: Wetterkarte öffnen
Zugänglicher Name: Wetterkarte öffnen
Axe aria-valid-attr: Pass
Separat offen: aria-pressed="maybe" und BedienprüfungPrüfgrenzen kennen
Was der Scan erkennt und was Sie beurteilen
Gültige Attributnamen sind eine Grundlage für die weitere Prüfung der Semantik.
Automatisch prüfbar
- Unbekannte oder falsch geschriebene aria-Attributnamen im untersuchten DOM erkennen.
- Die betroffene Stelle mit Selektor und Kontext zuordnen.
- Nach einer Änderung dieselbe Regel am selben Element erneut prüfen.
Im Kontext zu entscheiden
- Die beabsichtigte Funktion eines erfundenen oder vertippten Attributs klären.
- Bewerten, ob Beschriftung und sichtbare Darstellung die tatsächliche Aktion verständlich machen.
- Den Nutzerweg mit Tastatur und Screenreader einschließlich Zustandsänderungen prüfen.