WCAG mit JavaScript
Zustände ansagen, nicht nur umschalten
Aufklapper, Symbolknopf, verborgener Bereich: vier Stellen im Skript.
JavaScript als Zustandsleitung
Eine Eingabe muss vier Ebenen erreichen
Sicht, DOM, Fokus und Ansage müssen nach jedem Skriptlauf denselben Zustand zeigen.
<button>clickoff → ontrue + sichtbarFokus bleibt- DOM
aria-expanded="false"+hidden- Ansage
- „Schichtnotiz öffnen, Schaltfläche, reduziert“
- DOM
aria-expanded="true", keinhidden- Ansage
- „Schichtnotiz öffnen, Schaltfläche, erweitert“
Vier Stellen, an denen die Leitung abreißt
Jedes Bild zeigt eine andere Trennung zwischen sichtbarer Oberfläche und programmatischem Zustand.
Die Aktion ist sichtbar, aber der Name der Schaltfläche fehlt.
button name = ""Das Skript erfindet einen Wert, den aria-expanded nicht kennt.
true | falsearia-hidden entfernt einen Link nicht aus der Tastaturfolge.
hiddenZwei Aktionen teilen sich eine Struktur und widersprechen der erwarteten Bedienung.
nebeneinanderDer kurze Weg: native Schaltfläche, ein Zustand
Ein echtes button-Element liefert Name, Rolle sowie Enter- und Leertasten-Bedienung. Das Skript spiegelt nur noch denselben booleschen Zustand in aria-expanded und hidden.
2.1.1 TastaturDie native Schaltfläche löst den Klick mit Tastatur und Zeiger aus.
4.1.2 Name, Rolle, WertName und Rolle kommen aus HTML; der geänderte Aufklappzustand bleibt programmatisch verfügbar.
<button id="notiz-schalter" type="button"
aria-expanded="false"
aria-controls="notiz-inhalt">
Schichtnotiz öffnen
</button>
<div id="notiz-inhalt" hidden>
<p>Tor 2 prüfen.</p>
<a href="/notiz">Vollständige Notiz</a>
</div>
<script>
const schalter =
document.querySelector('#notiz-schalter');
const inhalt =
document.querySelector('#notiz-inhalt');
schalter.addEventListener('click', () => {
const offen =
schalter.getAttribute('aria-expanded') === 'true';
schalter.setAttribute(
'aria-expanded',
String(!offen)
);
inhalt.hidden = offen;
});
</script>So prüfen Sie es
- TabDer Fokus erreicht den Schalter sichtbar und überspringt den zugeklappten Inhalt.
- Enter und LeertasteBeide Tasten wechseln denselben Zustand wie ein Klick.
- DOM beobachten
aria-expandedundhiddenwechseln immer als Paar. - Weiter tabbenGeöffnet folgt der Notiz-Link; geschlossen folgt direkt das nächste Element der Seite.
Aus dem Prüfbericht
Vier Befunde in einem Widget
Kritisch Der Symbolknopf im Widget Regel button-name
Das Skript baut eine Schaltfläche nur aus einem Icon. aria-label benennt die Aktion, die der Klick-Handler auslöst.
Kritisch Der Aufklappzustand ist ungültig Regel aria-valid-attr-value
Ein selbst gewählter Wert für aria-expanded zählt nicht. Erlaubt sind allein true und false.
Kritisch Ein Link steckt in der Schaltfläche Regel nested-interactive
Zwei Bedienelemente teilen sich eine Fläche. Getrennt nebeneinander hat jedes seine eigene Aktion und seinen Namen.
Zum Mitnehmen
Das Aufklapp-Widget, korrigiert
Ein gültiger Zustand, eine Zeile im Klick-Handler, zwei getrennte Bedienelemente.
Korrektur in 3 Schritten ansehen
Den Zustand gültig ausgeben
aria-expanded kennt nur true und false. hidden nimmt den geschlossenen Bereich aus Bildschirm und Tab-Reihenfolge, statt ihn nur vor Vorleseprogrammen zu verstecken.
KorrekturvergleichSchritt 1 · HTML Vorher
<button id="notiz" type="button" aria-controls="notiz-text" aria-expanded="maybe"> Schichtnotiz öffnen </button> <div id="notiz-text" aria-hidden="true">…</div>Nachher
<button id="notiz" type="button" aria-controls="notiz-text" aria-expanded="false"> Schichtnotiz öffnen </button> <div id="notiz-text" hidden>…</div>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab bei geschlossener Notiz. Der Fokus springt über den Bereich hinweg.
Beim Klick den Zustand mitschreiben
Der Zustand im HTML muss dem sichtbaren Zustand folgen. Eine Zeile im Klick-Handler hält beide zusammen.
KorrekturvergleichSchritt 2 · JavaScript Vorher
button.addEventListener('click', () => { panel.hidden = !panel.hidden; });Nachher
button.addEventListener('click', () => { panel.hidden = !panel.hidden; button.setAttribute('aria-expanded', String(!panel.hidden)); });Markierte Zeilen wurden geändert
So prüfen Sie es Klappen Sie die Notiz auf. Ein Vorleseprogramm sagt an der Schaltfläche jetzt „erweitert“.
Symbolknopf benennen und Link herauslösen
Ein Link in einer Schaltfläche legt zwei Aktionen auf eine Fläche. Getrennt hat jede ihren eigenen Namen.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="button" class="drucken"> <svg aria-hidden="true"><use href="#icon-druck"></use></svg> <a href="/hilfe">Hilfe</a> </button>Nachher
<button type="button" class="drucken" aria-label="Notiz drucken"> <svg aria-hidden="true"><use href="#icon-druck"></use></svg> </button> <a href="/hilfe">Hilfe</a>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab durch die Zeile. Erst der Knopf, dann der Link.