Accessible Accordion
Drei Fragen, sechs Tab-Stopps
Schaltfläche, Zustand, verborgener Bereich: drei Stellen, an denen Akkordeons scheitern.
Zustand sichtbar machen
Ein Akkordeon muss dasselbe zeigen, sagen und fokussieren
Die Kopfzeile, der ARIA-Zustand und der Tab-Weg wechseln immer gemeinsam.
aria-expanded="false"hiddenKein Inhalt. Kein Tab-Stopp.- 1 Die ganze Frage ist der Button-Name.
- 2 Der Zustand wird als „reduziert“ ausgegeben.
- 3 Der Link im Panel ist nicht erreichbar.
aria-expanded="true"Sie haben 30 Tage Zeit.
Rücksendeschein anfordern- 1 Der Fokus bleibt beim Öffnen auf der Frage.
- 2 Der Zustand wird als „erweitert“ ausgegeben.
- 3 Erst jetzt kommt der Link in den Tab-Weg.
<h3><button>Rückgabeid="frage-rueckgabe"aria-controls="antwort-rueckgabe"steuertaria-labelledby="frage-rueckgabe"<div role="region">Sie haben 30 Tage Zeit.id="antwort-rueckgabe"role="region" und aria-labelledby sind optional. Sie helfen bei wenigen, gehaltvollen Panels; bei vielen kurzen Fragen erzeugen sie zu viele Landmarken.
Diese zwei Zeilen sind eine Transaktion
const offen =
kopf.getAttribute('aria-expanded') === 'true';
kopf.setAttribute(
'aria-expanded', String(!offen));
bereich.hidden = offen; Visueller Inhalt und programmatischer Zustand dürfen nicht auseinanderlaufen. Der native button liefert Enter und Leertaste bereits mit.
ButtonTabRechnung
nächster Button
Fokus bleibtTabRücksendeschein
Link im Panel
Pfeil auf und Pfeil ab zwischen den Kopfzeilen sind laut APG optional. Wenn Sie sie anbieten, müssen sie den Fokus zuverlässig verschieben; Tab bleibt der vollständige Grundweg.
Abnahme in vier Blicken
- Sehen: Pfeil, Inhalt und Fokusrahmen zeigen den Zustand.
- Hören: Name, „reduziert“ oder „erweitert“ werden angesagt.
- Tasten: Enter und Leertaste schalten, Tab folgt dem sichtbaren Inhalt.
- DOM:
aria-expandedundhiddenwechseln gemeinsam.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Nur der Pfeil ist die Schaltfläche Regel button-name
Die Frage steht daneben als Text. Die ganze Kopfzeile wird zur Schaltfläche, die Frage zu ihrem Namen.
Kritisch aria-expanded="offen" ist kein Wert Regel aria-valid-attr-value
Nur true und false sind erlaubt. Mit einem anderen Wert bleibt der Zustand für alle unbekannt.
Zum Mitnehmen
Das Akkordeon, korrigiert
Drei Änderungen an einer Kopfzeile. Das Aussehen bleibt.
Korrektur in 2 Schritten ansehen
Die ganze Kopfzeile zur Schaltfläche machen
Der Fragetext im Button wird zu seinem Namen. Der Pfeil bleibt als verborgenes Symbol.
KorrekturvergleichSchritt 1 · HTML Vorher
<h3> Versandkosten <button type="button" aria-expanded="offen"> <svg aria-hidden="true"><use href="#chevron"></use></svg> </button> </h3>Nachher
<h3> <button type="button" aria-expanded="false" aria-controls="panel-versand"> Versandkosten <svg aria-hidden="true"><use href="#chevron"></use></svg> </button> </h3>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die Kopfzeile. Ein Vorleseprogramm sagt „Versandkosten, Schaltfläche, reduziert“.
Geschlossene Bereiche wirklich entfernen
hidden nimmt den Bereich aus Anzeige und Tab-Reihenfolge. aria-hidden allein lässt Links erreichbar.
KorrekturvergleichSchritt 2 · HTML Vorher
<div id="panel-versand" aria-hidden="true" style="height: 0; overflow: hidden"> <a href="/versand">Zur Versandtabelle</a> </div>Nachher
<div id="panel-versand" hidden> <a href="/versand">Zur Versandtabelle</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab bei geschlossenem Bereich. Der Fokus springt direkt zur nächsten Frage.