Navigationselemente sind wichtige Landmarks in einer Website. Screenreader können Landmarks einer Website auflisten, damit Nutzende von Assistive-Tech schneller zum gesuchten Inhalt kommen. Wenn in einer Seite nicht die richtigen semantischen Elemente verwendet werden, müssen Keyboard-User bis zu dem Inhalt tabben, zu dem sie möchten. Das kann natürlich gerade bei langen Seiten sehr umständlich sein.
Es ist also empfehlenswert passende semantische Elemente zu verwenden und diese bei Bedarf mit einem Label zu versehen.
Problem bei schlecht strukturierten Hamburger Menüs
Ich sehe viele Websites, die auch Navigationselemente in Ansätzen richtig einsetzen. Oft gibt es aber eine Einschränkung, die relativ leicht vermeidbar ist: Hamburger-Menüs verschwinden im eingeklappten Zustand aus der Liste der Landmarks, weil das ganze nav-Element ausgeblendet wird.
Negatives Code-Beispiel
Der folgende Codeabschnitt zeigt die beschriebene Struktur:
<button type="button" aria-controls="menu" aria-expanded="false">Toggle Menu</button>
<nav id="menu" aria-label="Haupnavigation" aria-hidden="true" style="display: none;">
<ul>
<li>
<a href="/leistungen">Leistungen</a>
</li>
<li>
<a href="/ueber-uns">Über uns</a>
</li>
<li>
<a href="/kontakt">Kontakt</a>
</li>
</ul>
</nav>Das style-Attribut „display: none;“ sorgt dafür, dass Screenreader die Navigation nicht in die Liste der „Orientierungspunkte“ aufnimmt.
Screenreader Darstellung bei schlechter Umsetzung
Das folgende Bild zeigt das an einer echten Website:
Sobald das Menü ausgeklappt wird, wird es wieder in der Liste angezeigt:
Im Idealfall würden Nutzende die Navigation aber auch finden, wenn sie eingeklappt ist.
Optimierter Code
Das lässt sich relativ einfach umsetzen, indem der Button zum ein- und ausklappen der Navigation innerhalb des nav-Tags platziert wird. Er steuert dann nicht mehr das Navigationselement, sondern nur noch die Liste darin. Damit bleibt die Navigation in allen Zuständen Sichtbar und wird weiterhin als Orientierungspunkt angezeigt.
Der folgende Code zeigt die Verbesserung:
<nav aria-label="Haupnavigation">
<button type="button" aria-controls="menu" aria-expanded="false">Toggle Menu</button>
<ul id="menu" aria-hidden="true" style="display: none;">
<li>
<a href="/leistungen">Leistungen</a>
</li>
<li>
<a href="/ueber-uns">Über uns</a>
</li>
<li>
<a href="/kontakt">Kontakt</a>
</li>
</ul>
</nav>Es ist also eine relativ einfache Anpassung, um die Nutzbarkeit mit Assistive-Tech zu verbessern.
Falls dir barrierefreie Navigation wichtig ist, empfehle ich dir auch, dich mit der richtigen Label-Vergabe bei Navigationen zu beschäftigen.