Barrierefreie Menüs

Inhaltsverzeichnis überspringen

TL;DR

Einen Spickzettel mit vollständigem Quelltext-Beispiel, Checkliste zum abhaken und WCAG-Auflistung findest Du hier: Spickzettel: barrierefreies Menü.

Vorwort

Die hier vorgestellte Umsetzung spiegelt meine persönliche Herangehensweise wider, basierend auf umfangreichen Recherchen und Überlegungen. Sie ist nicht als absolute oder vollständige Lösung gedacht, sondern als ein Ansatz, der Raum für Weiterentwicklung und Verbesserung bietet. Solltest Du Fehler entdecken oder Vorschläge zur Optimierung haben, freue ich mich über Deine Nachricht.

Um die Lesbarkeit zu verbessern, wurden die Beispielcodes auf das Wesentliche reduziert.

Verwendete Abkürzungen

Diese Abkürzungen werden folgend verwendet:

  • HTML: Hypertext Markup Language
  • CSS: Cascading Style Sheets
  • WCAG: Web Content Accessibility Guidlines
  • W3C: World Wide Web Consortium
  • px: Pixel

HTML-Aufbau

Die Grundlage für ein barrierefreies Menü ist die Verwendung von semantischem HTML, und alles beginnt mit einem <nav>-Element.

Da eine Webseite möglicherweise mehrere Navigationen enthält, ist es wichtig, jedes <nav>-Element eindeutig zu kennzeichnen, um sie voneinander zu unterscheiden. Dies kann durch die Verwendung der HTML-Attribute aria-label oder aria-labelledby erreicht werden.

Nutzer von Screenreadern haben verschiedene Herangehensweisen. Einige möchten zunächst einen Überblick über alle Bereiche (oder Landmarks) erhalten, die meisten Nutzer, genauer 71,6%  (Quelle: WebAIM Screenreader-Nutzerumfrage) navigieren mit Hilfe der Überschriften.

Um sicherzustellen, dass diese Nutzer auch auf das Menü aufmerksam werden, sollte innerhalb des <nav>-Elements eine Überschrift vorhanden sein. Diese Überschrift kann über CSS ausgeblendet werden, wenn sie optisch störend ist, sollte jedoch für Screenreader weiterhin zugänglich bleiben. Die Überschrift kann direkt als Beschriftung des <nav>-Elements verwendet werden, indem sie über das aria-labelledby-Attribut verknüpft wird. Es ist jedoch darauf zu achten, dass die Struktur der Überschriften semantisch bleibt, was je nach Positionierung etwas knifflig sein könnte.

Die einzelnen Seiten des Menüs werden dann als ungeordnete Liste innerhalb dieses <nav>-Elements eingebettet.

Beispiel-Quellcode: HTML-Aufbau 

<nav aria-labelledby="menu-header">
  <h2 id="menu-header" class="visually-hidden">Seitenmenü</h2>
  <ul>
    <li><a href="#">erster Menüpunkt</a></li>
    <li><a href="#">zweiter Menüpunkt</a></li>
    <li><a href="#">dritter Menüpunkt</a></li>
  </ul>
</nav>

Untermenüs

In einem benutzerfreundlichen Menükonzept sind Untermenüs eigenständige Listen, die innerhalb des Listenelements des übergeordneten Elements platziert sind.

Um die Sichtbarkeit des Untermenüs zu steuern, ist es ratsam, eine Schaltfläche einzufügen, die diese Funktion übernimmt. Dabei kann man erwägen, den Button entweder neben dem eigentlichen Link zur übergeordneten Seite zu platzieren oder ihn separat zu belassen, besonders wenn die Seite nur eine Übersicht darstellt und keine zusätzlichen Inhalte bereitstellt.

Die Integration einer Steuerungsschaltfläche für das Untermenü bietet zahlreiche Vorteile:

  • es reduziert unnötige Schritte für Tastaturnutzer
  • es erhöht die Kontrollmöglichkeiten für alle Benutzer

Bei der Implementierung der Schaltfläche ist jedoch auf einige wichtige Aspekte zu achten.

Zunächst ist es wichtig, die Funktion der Schaltfläche klar zu kommunizieren. Wenn der Text der Schaltfläche beispielsweise "Projekte" lautet, ist möglicherweise nicht sofort ersichtlich, welche Funktion sie erfüllt. Ein aussagekräftiger Button-Text wie "Untermenü Projekte" kann dabei helfen. Für Screenreader-Nutzer kann diese Erweiterung beispielsweise durch das Verstecken des Texts für visuelle Benutzer mittels eines <span>-Elements umgesetzt werden. Alternativ kann auch das aria-label-Attribut verwendet werden.

Es ist verlockend, den Button-Text um "Öffnen/Schließen" zu erweitern, um die Funktion noch deutlicher zu machen. Dies kann gemacht werden, ist jedoch durch die Verwendung eines aria-Attributs auf dem Button redundant; dazu gleich mehr.

Um den Button semantisch mit der Liste zu verknüpfen, sollte ihm das Attribut aria-controls hinzugefügt werden. Dieses Attribut enthält die ID der Liste, deren Sichtbarkeit gesteuert wird.

Schließlich ist es wichtig, den aktuellen Status des Untermenüs (sichtbar/verborgen) anzugeben. Dies kann durch das aria-expanded-Attribut realisiert werden. Die Werte "true" oder "false" sollten entsprechend dem aktuellen Status über JavaScript gesetzt werden. Ein weiterer Vorteil ist, dass CSS direkt auf diesen Status reagieren kann, und somit eine zusätzliche Klasse entfällt.

Bei der Gestaltung der Schaltfläche sind ebenfalls einige Punkte zu beachten, dazu mehr unter "Gestaltung".

Beispiel-Code: Untermenüs 

<li>
  <button aria-controls="submenu-projects" aria-expanded="false"><span class="visually-hidden">Untermenü</span>Projekte</button>
  <ul id="submenu-projects">
    <li><a href="#">Projekt 1</a></li>
    <li><a href="#">Projekt 2</a></li>
    <li><a href="#">Projekt 3</a></li>
  </ul>
</li>

Screenreader-Unterstützung

Um das Navigieren für Screenreader-Nutzer noch angenehmer und transparenter zu gestalten, können schon kleine Anpassungen hilfreich sein.

Zu Beginn ist es wichtig, die aktuelle Seite im Menü klar zu kennzeichnen. Hierfür kann das Attribut aria-current mit dem Wert "page" verwendet werden. Dadurch wissen Screenreader, dass es sich um die aktuelle Seite handelt und geben dies entsprechend aus.

Wenn sich die aktuelle Seite in einer Unterebene der Navigation befindet, kann dies etwas herausfordernder sein. Der Nutzer erhält die Information über die aktuelle Seite nur, wenn er zuvor das Untermenü öffnet und hindurch navigiert. Beim Durchsuchen der ersten Ebene kann er möglicherweise nicht sofort erkennen, wo er sich befindet.

Hier bietet sich eine kreative Lösung an: Eine Erweiterung der Link-Beschriftung, die möglicherweise visuell verborgen bleibt, aber von Screenreadern vorgelesen wird. Zum Beispiel könnte aus "Untermenü Projekte" "Untermenü Projekte - enthält aktuelle Seite" werden.

Beispiel-Code: Screenreader-Optimierung 

<li>
  <button aria-label="Untermenü Projekte - enthält aktuelle Seite">Projekte</button>
  <ul>
    <li><a href="#">Projekt 1</a></li>
    <li><a href="#" aria-current="page">Projekt 2</a></li>
    <li><a href="#">Projekt 3</a></li>
  </ul>
</li>

Gestaltung

Farbwahl

Bei der Gestaltung von Farben ist es wichtig, auf ein ausgewogenes Kontrastverhältnis zu achten. Texte sollten im Vergleich zum Hintergrund mindestens ein Kontrastverhältnis von 4,5:1 aufweisen (gemäß WCAG 1.4.3 - Contrast (Minimum) (Level AA)). Für größere Texte genügt ein Kontrastverhältnis von 3:1.

Wenn man über die Mindestanforderung hinausgehen möchte, kann man ein Kontrastverhältnis von mindestens 7:1 für normalen Text bzw. 4,5:1 für größeren Text anstreben (gemäß WCAG 1.4.6 - Contrast (Enhanced) (Level AAA)).

Es ist jedoch nicht nur der Kontrast zwischen Text und Hintergrund zu berücksichtigen, sondern auch der Kontrast von farbigen Flächen zu ihren Nachbarn. Dies ist beispielsweise der Fall, wenn sich die Farbe eines Elements bei einem :hover-Ereignis ändert. Der Kontrast zwischen der Standardfarbe und der Farbe im :hover-Status sollte mindestens ein Verhältnis von 3:1 aufweisen, damit diese Änderung von möglichst vielen Menschen wahrgenommen werden kann (gemäß WCAG 1.4.11 - Non-text Contrast).

 

Schaltflächen

Um eine einfache Bedienung von Bedienelementen oder Verlinkungen für eine breite Palette von Benutzern zu gewährleisten, ist es wichtig, auf eine ausreichende Größe dieser Elemente zu achten. Dies ist besonders hilfreich für Menschen mit Parkinson oder ähnlichen Bedingungen, die Schwierigkeiten beim präzisen Klicken haben könnten.

Elemente, die mit einer Maus geklickt werden können oder müssen, sollten eine Mindestgröße von 24px haben (gemäß WCAG 2.5.8 - Target Size (Minimum)(Level AA)), aber es gibt Ausnahmen. Bei kleineren Zielen ist wichtig sicherzustellen, dass sich kein weiteres Element innerhalb eines Radius von 24px um das zu kleine Klickziel befindet.

Es gibt auch Situationen, in denen diese Mindestgröße nicht gilt, wenn

  • die Funktionalität anderweitig verfügbar ist.
  • sich das Element innerhalb eines Satzes oder Textes befindet.
  • die Größe vom User-Agent festgelegt und nicht veränderbar ist.
  • die Größe für die Funktion oder gesetzliche Anforderungen entscheidend ist.

Neben der 24px-Vorgabe gibt es eine erweiterte Variante, um die Bedienung für noch mehr Menschen zu erleichtern. Bedienelemente oder Klickziele sollten dann eine Mindestgröße von 44px haben (gemäß WCAG 2.5.5 - Target Size (Level AAA)), aber auch hier gibt es Ausnahmen.

Die Mindestanforderung entfällt, wenn

  • ein anderes Element mit derselben Funktion und einer Mindestgröße von 44px auf der Seite vorhanden ist.
  • das Element sich innerhalb eines Satzes oder Textes befindet.
  • die Größe vom User-Agent festgelegt und nicht anpassbar ist.
  • die Größe für die Übermittlung der Information wesentlich ist.

Fokus

Auch bei der Gestaltung des Fokusses für Tastaturnutzende sind einige Punkte zu beachten. Hierfür habe ich eine eigene Notiz "Der Fokus", da dieses Thema nicht nur hier gilt.

Tastatursteuerung

Um die Benutzererfahrung für Tastaturnutzer zu verbessern, empfiehlt es sich, bestimmte Funktionalitäten bereitzustellen. Ein gutes Beispiel hierfür ist das bekannte Szenario: Man durchsucht eine Webseite, öffnet ein Overlay und kann dieses dann durch Drücken der Esc-Taste wieder schließen.

Das W3C bietet hierfür Entwurfsmuster an. Für typische Seitennavigationen von Webseiten wird das Disclosure-Pattern empfohlen, obwohl auch das Menubar-Pattern existiert, das jedoch komplexer ist.

Die Implementierung des Disclosure-Patterns erfordert sowohl verpflichtende als auch optionale Funktionen.

Zu den verpflichtenden Funktionen gehören:

  • Schließen des Untermenüs durch Drücken der Esc-Taste
  • Steuerung der fokussierten Schaltfläche durch Leer- oder Enter-Taste
  • Aktivierung des fokussierten Links durch Drücken der Enter-Taste

Optional können folgende Funktionen hinzugefügt werden:

  • Fokussieren des ersten Menüpunkts durch Drücken der Home-Taste
  • Fokussieren des letzten Menüpunkts durch Drücken der End-Taste
  • Verschieben des Fokus zum vorherigen Menüpunkt durch Drücken der Pfeiltasten "hoch" oder "links"
  • Wenn das aktuelle Element ein Link oder eine Schaltfläche mit geschlossenem Untermenü ist: Verschieben des Fokus zum nächsten Menüpunkt durch Drücken der Pfeiltasten "runter" oder "rechts"
  • Wenn das aktuelle Element eine Schaltfläche mit geöffnetem Untermenü ist: Verschieben des Fokus zum ersten Menüpunkt des Untermenüs durch Drücken der Pfeiltasten "runter" oder "rechts"

Ergänzende Hinweise

Wenn ein Menü aus Gestaltungsgründen verborgen ist und nur durch einen Button angezeigt wird, ist es wichtig sicherzustellen, dass dieser Button sich innerhalb des <nav>-Elements befindet und die Sichtbarkeit der Liste steuert, nicht die des <nav>-Elements selbst. Auf diese Weise bleibt das <nav>-Element immer vorhanden und wird entsprechend in der Liste der Seiten-Landmarks angezeigt.

Wie bereits erwähnt, nutzen manche Screenreader-Nutzer eine Übersichtsfunktion, um sich die Bereiche der Seite anzeigen zu lassen. Ist das <nav>-Element nicht sichtbar, wird es auch nicht in dieser Auflistung angezeigt, was dazu führt, dass dieses Menü für diese Nutzer nicht vorhanden ist.

Wer seinen Mausnutzern einen Klick erspart und Untermenüs zusätzlich mittels :hover anzeigt, muss sicherstellen, dass das eingeblendete Untermenü ohne Änderung des Fokus oder der Mausposition geschlossen werden kann, beispielsweise durch Drücken der Esc-Taste. Dies gilt nicht nur für Menüs, sondern für alle Elemente, die über :hover-Ereignisse geöffnet werden (WCAG 1.4.13 - Content on Hover or Focus (Level AA)).

Diese Seite wurde am 13.02.2024 erstellt und zuletzt am 13.07.2024 aktualisiert.