Accessible Mega Menu
Wie oft Tab, bis der Inhalt kommt?
Verborgene Bereiche, Symbole ohne Wort, ungültige Zustände: 25 Anschläge bis zum Inhalt.
Navigation im Schnitt
Ein Mega-Menü, das seinen Fokus erklärt
Desktop und 320 Pixel zeigen dieselben Ziele in derselben Reihenfolge.
Der Zustand hat genau zwei Wahrheiten
aria-expanded beschreibt den Auslöser. hidden entfernt den geschlossenen Bereich samt Links aus Anzeige und Tab-Reihenfolge.
aria-expanded="false"panel.hidden = truearia-expanded="true"panel.hidden = falseDer kleine Tastaturvertrag
geht nur zu sichtbaren Auslösern und Links.
öffnet oder schließt am Auslöser.
schließt und setzt den Fokus auf den Auslöser.
kann ergänzt werden, ist für Site-Navigation optional.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Die Pfeile über den Spalten haben keinen Namen Regel button-name
Drei Symbol-Schaltflächen sagen dreimal „Schaltfläche“. Das Wort der Spalte wird zum Namen.
Kritisch Die Pfeil-Links haben keinen Text Regel link-name
Ein Pfeil-Symbol ist kein Linktext. Der Name der Zielseite gehört in den Link.
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 unbekannt.
Zum Mitnehmen
Das Mega-Menü, korrigiert
Vier Anschläge statt 25. Zwei Änderungen am Auslöser, eine am Bereich.
Korrektur in 2 Schritten ansehen
Dem Auslöser Wort und Zustand geben
Der Spaltenname steht im Button und wird vorgelesen. aria-expanded trägt true oder false.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" aria-expanded="offen" aria-controls="panel-produkte"> <svg aria-hidden="true"><use href="#chevron"></use></svg> </button>Nachher
<button type="button" aria-expanded="false" aria-controls="panel-produkte"> Produkte <svg aria-hidden="true"><use href="#chevron"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den Auslöser. Ein Vorleseprogramm sagt „Produkte, Schaltfläche, reduziert“.
Geschlossene Bereiche mit hidden schließen
hidden nimmt den Bereich samt Links aus der Tab-Reihenfolge. Beim Öffnen entfernt JavaScript das Attribut.
KorrekturvergleichSchritt 2 · HTML Vorher
<div id="panel-produkte" class="panel" aria-hidden="true"> <a href="/preise"><svg aria-hidden="true"><use href="#arrow"></use></svg></a> </div>Nachher
<div id="panel-produkte" class="panel" hidden> <a href="/preise">Preise</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Zählen Sie die Tab-Anschläge bis zum Inhalt. Es sind so viele wie sichtbare Bedienelemente.