Praxisleitfaden ARIA-Attributwerte
Gültige ARIA-Werte setzen
Ungültige Zustände erkennen, im Code korrigieren und erneut prüfen.
aria-valid-attr-valueWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-valid-attr-value.html
Befund verstehen
„maybe“ beschreibt keinen gültigen Aufklappzustand
Die Schaltfläche „Schichtnotiz öffnen“ steuert einen zunächst ausgeblendeten Bereich. Ihr Attributname ist richtig geschrieben, sein Wert jedoch ungültig: „maybe“ gehört nicht zu den Werten von aria-expanded.
Warum das relevant ist
Wer die Seite mit einem Screenreader bedient, benötigt den Aufklappzustand zusätzlich zum Namen der Schaltfläche. Der ungültige Wert beschreibt nicht verlässlich, dass die Notiz geschlossen ist.
Scanner-Signal
aria-valid-attr-value meldet aria-expanded="maybe" an #drawer-toggle.
- Regel
aria-valid-attr-value- Referenz
- WCAG 4.1.2
Diagnose im Ausgangszustand
#drawer-toggle
aria-controls="drawer-content"
aria-expanded="maybe" → ungültig
#drawer-content: hidden → Notiz geschlossenAufklappzustände nach jedem Laden prüfen
Ein falscher Anfangswert kann aus derselben Vorlage stammen. Geschlossener und geöffneter Zustand müssen jeweils zur Sichtbarkeit passen.
- Geschlossene Notiz A× Befund im Beispiel
- Geschlossene Notiz B× Befund im Beispiel
- Korrekt initialisierte Notiz Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie nach Neuladen und erneutem Öffnen sowie Schließen, ob aria-expanded mit dem Inhalt übereinstimmt.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Der passende Wert folgt aus dem echten Zustand
Prüfen Sie zuerst, was die Schaltfläche steuert und ob dieser Inhalt sichtbar ist.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Bereich geschlossen | Die Schaltfläche kann einen momentan ausgeblendeten Bereich öffnen. | Verwenden Sie aria-expanded="false". Das entspricht der geschlossenen Schichtnotiz im Beispiel. |
| Bereich geöffnet | Der gesteuerte Inhalt ist aufgeklappt und sichtbar. | Setzen Sie aria-expanded="true" und ändern Sie den Wert beim Schließen zurück auf false. |
| Keine Aufklappfunktion | Das Element blendet keinen Inhalt ein oder aus. | Prüfen Sie, ob aria-expanded überhaupt benötigt wird. Ein entbehrliches Attribut zu entfernen ist sinnvoller, als einen erfundenen Zustand zu setzen. |
Fundstelle ansehen
Die Schichtnotiz im vollständigen Kontext
Der Ausschnitt enthält die gesamte geschlossene Schichtnotiz mit Überschrift, Erklärung und zugehöriger Schaltfläche. Die Notiz selbst ist im Ausgangszustand ausgeblendet.
Die Markierung weist auf „Schichtnotiz öffnen“. Der Fehler liegt im unsichtbaren Wert aria-expanded="maybe"; aus der Darstellung allein lässt er sich nicht ablesen.
Ausgangszustand korrigieren
Die geschlossene Notiz erhält false
Ändern Sie den Anfangswert am vorhandenen Button zu false. aria-controls verweist bereits auf drawer-content, und dieser Bereich ist mit hidden geschlossen. Die vorhandene Klickfunktion setzt beim Öffnen true und beim Schließen false; korrigiert wird hier die Initialisierung.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
Im Komponenten-Template Suchen Sie die Vorlage der Aufklappfunktion. Leiten Sie Sichtbarkeit und aria-expanded aus derselben Zustandsvariable ab, damit auch der erste gerenderte Zustand übereinstimmt.
KorrekturvergleichHTML der vorhandenen Schaltfläche Vorher
<button id="drawer-toggle" type="button" aria-controls="drawer-content" aria-expanded="maybe"> Schichtnotiz öffnen </button> <div id="drawer-content" hidden>…</div>Nachher
<button id="drawer-toggle" type="button" aria-controls="drawer-content" aria-expanded="false"> Schichtnotiz öffnen </button> <div id="drawer-content" hidden>…</div>Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie die geänderte Seite erneut mit dem Scanner und kontrollieren Sie das Element im Nutzungskontext.
Werte sauber ausgeben
Initialisierung und Zustandswechsel zusammen prüfen
Ein syntaktisch gültiger Wert muss auch nach einer Bedienaktion noch zum Inhalt passen.
- 1
Prüfen Sie das gerenderte HTML direkt nach dem Laden. Im Beispiel ist nur dieser Anfangszustand fehlerhaft.
- 2
Geben Sie für die geschlossene Notiz den String false und für die offene Notiz true aus. ARIA-Werte werden nicht in „ja“ oder „nein“ übersetzt.
- 3
Ändern Sie beim Umschalten sowohl die Sichtbarkeit des Bereichs als auch aria-expanded am steuernden Button.
- 4
Kontrollieren Sie den Werttyp jedes weiteren Attributs gesondert: Zustandswerte, Zahlen und ID-Verweise haben unterschiedliche Anforderungen.
Fehlkorrekturen vermeiden
Gültig geschrieben bedeutet noch nicht richtig verbunden
Überall true einsetzen
true ist ein gültiger Wert, würde die geschlossene Schichtnotiz aber falsch beschreiben. Ein bestandener Wertetest allein beweist keine korrekte Zustandsmeldung.
Nur nach dem ersten Klick prüfen
Die bestehende Klickfunktion ersetzt maybe bereits durch true oder false. Wer erst danach scannt, übersieht den Fehler beim Laden.
ARIA wie ein HTML-Boolean behandeln
Bei aria-expanded zählt der konkrete Attributwert. Die bloße Anwesenheit des Attributs ersetzt weder true noch false.
Das Attribut ohne Funktionsprüfung löschen
Diese Schaltfläche besitzt eine echte Aufklappfunktion. Durch bloßes Entfernen ginge die ausdrückliche Zustandsinformation verloren.
Derselbe Button besteht den Wertetest
Der erneute Axe-Lauf bewertet #drawer-toggle mit aria-expanded="false" als bestanden. Öffnen und Schließen wurden am Beispiel zusätzlich ausgeführt und überprüft. Die Rohbilder bleiben pixelgleich, weil sich nur die Zustandsinformation im HTML ändert.
So prüfen Sie die Korrektur nach
- Nach dem Laden steht aria-expanded auf false; drawer-content ist verborgen.
- Beim Öffnen wird der Inhalt sichtbar und aria-expanded wechselt auf true.
- Beim erneuten Schließen ist der Inhalt wieder verborgen und aria-expanded steht auf false.
Verifiziert wurden dieser Attributwert und die beschriebenen Zustandswechsel. Weitere Befunde der Kalibrierseite und die vollständige Screenreader-Bedienung sind damit nicht geprüft.
Nachgewiesenes Ergebnis
#drawer-toggle
aria-expanded="false" → gültig
aria-valid-attr-value: bestanden
Öffnen: true + Inhalt sichtbar
Schließen: false + Inhalt verborgenPrüfgrenzen kennen
Werte automatisch prüfen, Bedienung ergänzend beurteilen
Die Regel prüft die Gültigkeit von ARIA-Werten im untersuchten Zustand. Sie ersetzt keine Prüfung des gesamten Bedienelements.
Automatisch prüfbar
- Ungültige Werte wie maybe an einem ARIA-Attribut erkennen.
- Den betroffenen Button samt Attribut und Seitenkontext zuordnen.
- Nach einer Korrektur dieselbe Fundstelle erneut auf gültige Werte prüfen.
Im Kontext zu entscheiden
- Prüfen, ob die angesagte Zustandsinformation dem tatsächlich sichtbaren Inhalt entspricht.
- Die Schaltfläche mit Tastatur und Screenreader öffnen und schließen; Namen, Zustand und Erreichbarkeit des Inhalts beurteilen.
- Weitere Zustände wie verzögertes Laden oder nachträgliche Inhaltsänderungen in den Bedienablauf einbeziehen.