Ausklapp-Navigationsmenüs

Bei einem Ausklapp-Navigationsmenü sind nur die Hauptmenüeinträge sichtbar. Diese stehen meist für die Hauptbereiche der Website. Das Aktivieren einer Menüoption öffnet das Ausklappmenü.

Ausklappmenüs können ganz verschieden umgesetzt werden. Manchmal öffnet sich das Untermenü nur, wenn der Mauszeiger über den Hauptmenüeintrag geführt wird. Manchmal öffnet es sich auch, wenn Nutzer mit der Tabulatortaste TAB den Menüeintrag fokussieren.

In anderen Fällen öffnet sich das Untermenü erst, wenn ein Hauptmenüeintrag erst fokussiert und dann durch Klicken oder das Drücken der ENTER Taste aktiviert wird.

Ein Ausklapp-Navigationsmenü in Aktion

Das folgende Video zeigt ein typisches Ausklapp-Navigationsmenü bei der Nutzung mit der Tastatur.

Video-Beschreibung

Das Navigationsmenü auf der Website der American National Parks Conservation Association wird mit der Tastatur bedient.

Ein Nutzer

  • tabbt zum Navigationsmenü,
  • öffnet das erste Ausklappmenü mit ENTER,
  • tabbt weiter zum zweiten Ausklappmenü, und
  • wählt eine der Navigations-Optionen aus.

Typische Nutzungsprobleme bei Ausklappen-Navigationsmenüs

Die folgenden Beispiele zeigen typische Nutzungsprobleme bei Ausklapp-Navigationsmenüs.

1 Tastaturnutzung: Menü kann nicht geöffnet werden (geht nur mit der Maus)

Manche Ausklapp-Menüs funktionieren nur bei Mausnutzung und können mit der Tastatur gar nicht fokussiert werden. Sie sind dann für Tastaturnutzer unzugänglich.

Video-Beschreibung

Der Test zeigt, wie ein Tastaturnutzer versucht, das Menü von Hannover.de zu öffnen.

  • Die Fokushervorhebung ist schlecht, deshalb wählt der Nutzer das "Force Focus" Bookmarklet, um den Tastatur-Fokus hervorzuheben.
  • Das Hauptnavigations-Menü kann mit der Tastatur nicht fokussiert werden – der Fokus springt zu dem Inhalt nach dem Menü.
  • Mit der Maus lässt sich das Menü dagegen ausklappen.

2 Tastatur-Nutzung: Verschachtelte und lange Ausklappmenüs, schwacher Fokus

Verschachtelte Ausklappmenüs sind oft schwer zu nutzen. Wenn jeder Untermenüeintrag durchlaufen wird, ist die Navigation für Tastaturbenutzer sehr zeitaufwändig und umständlich. Die Schwierigkeit erhöht sich noch, wenn der aktuelle Tastaturfokus schwer zu erkennen ist.

Mausbenutzer haben auch oft Probleme mit verschachtelten Menüs: Das Öffnen des Untermenüs und weiterer Untermenüs erfordert eine feinmotorische Steuerung. Das Menü kann sich versehentlich schließen, bevor der gewünschte Menüeintrag erreicht werden kann.

Video-Beschreibung

Ein Tastaturbenutzer versucht, die Hauptnavigation auf der Website Magdeburg.de zu bedienen. Bei Erreichen des Menüs wird

  • Ein Ausklapp-Untermenü geöffnet
  • Beim Weiter-Tabben ein Untermenü auf der zweiten Ebene geöffnet
  • Beim Weiter-Tabben ein Untermenü der dritten Ebene geöffnet,
  • Beim Weiter-Tabben ein Untermenü der vierten Ebene geöffnet

Das Durchblättern der Menüs erfordert viel Zeit. Es ist für Tastaturbenutzer schwierig zu sehen, welcher Menüpunkt gerade fokussiert ist.

3 Tastatur- und Screenreader-Nutzung: Unerwartetes Verhalten

Wenn ein Navigationsmenü als Tab Panel implementiert wird, aber wie ein normales Navigatonsmenü aussieht, werden Tastaturnutzer erwarten, dass sie mit dem Tabulator die Hauptmenü-Einträge durchwandern können. Das funktioniert jedoch nicht, wenn die vorgesehene Tastaturnutzungs-Verhalten für Tab panels umgesetzt wird. Hier müssen Nutzer dann stattdessen die Pfeiltasten → ← benutzen.

Ein zusätzliches Problem für blinde Benutzer besteht darin, dass das Register-Element nicht die ARIA-Rollen tab, tablist und tabpanel verwenden, um damit anzuzeigen, dass hier die Pfeiltasten verwendet werden müssen.

Video-Beschreibung

Der Test zeigt das Verhalten, wenn das Navigationsmenü einer Website des Auswärtigen Amtes im Firefox-Browser mit dem aktivierten Screenreader NVDA angesteuert wird. Beim Hineintappen ins Menü wird der erste Eintrag, Startseite, fokussiert. Beim Weitergaben werden aber nicht die folgende Einträge fokussiert. Stattdessen landet der Fokus im Inhaltsbereich. Der Nutzer bewegt den Fokus zurück aufs Menü und versucht nun die Pfeiltasten. Nun liest buchstabiert der Screenreader jedoch den ersten Menüeintrag, statt weiterzuspringen.  Die Tastatureingabe STRG und → bewegt schließlich den Fokus zum nächsten Menüeintrag. ENTER lädt nun den Inhalt des zweiten Panels.

4 Nutzung mit starker Vergrößerung: Elemente zu Ausklappen des Untermenüs schwer zu erkennen und zuzuordnen

Für sehbehinderte Nutzer ist es oft schwierig, Beschriftungen und Bedienelemente einander zuzuordnen, wenn diese weit voneinander entfernt sind.

Video-Beschreibung

Ein sehbehinderter Benutzer versucht, in der responsiven Ansicht des Hauptnavigations-Menüs auf der Website Existenzgründer.de ein Untermenü zu öffnen.

  • Sie öffnet die Hauptnavigation über den Hamburger-Button
  • Sie bemerkt nicht das Bedienelement, um den Hauptmenüpunkt "Unternehmen führen" zu erweitern
  • Sie aktiviert den Hauptmenüpunkt, der zu einer anderen Seite führt - das Hauptmenü schließt sich
  • Sie öffnet die Hauptnavigation erneut über die Hamburger-Schalter und entdeckt den Plus-Bedienelement
  • Sie öffnet das falsche Plus-Bedienelement (weil das Element weit vom Menüelement entfernt ist)

5 Nutzung mit starker Vergrößerung: Hamburger Menü-Taste wird nicht entdeckt

Auf vielen Websites wechselt der bereits Benutzer zur responsiven Anzeige der Hauptnavigation, wenn das Fenster etwas schmaler oder der Benutzer mit dem Browser-Zoom Inhalte vergrößert hat.

Video-Beschreibung

Ein sehbehinderter Benutzer wird aufgefordert, das Hauptmenü zu finden, das auf nur eine Taste, die "Hamburger"-Taste, geschrumpft ist.

  • Der Benutzer sucht nach der Hauptnavigation und denkt, dass er sie gefunden hat, als er ein Register-Element in der Mitte der Seite entdeckt
  • Der Testleiter gibt einen Hinweis, dass ein anderes Hauptmenü existiert
  • Dr Nutzer sucht dann oben auf der Seite nach dem Menü
  • Er zoomt auf die Such- und Menü-Schaltfläche, identifiziert sie jedoch nicht als Hauptmenü, sondern als Suche.
  • Er sucht weiter, bis ihm der Hinweis gegeben wird, dass sich das menü neben der Suchfunktion befindet.
  • Der Nutzer findet die Menü-Taste, aktiviert sie und überprüft durch Hinein- und Hionauszoomen, ob das Menü wirklich geöffnet wurde.

6 Spracheingabe-Nutzung: Menü-Einträge können nicht aktiviert werden

Die Interaktion mit Menüs kann für Spracheingabe-Nutzer Probleme aufwerfen, wenn Menü-Einträge nicht so ausgezeichnet sind, dass sie auf Sprachbefehle reagieren.

Video-Beschreibung

Eine Spracheingabe-Nutzerin interagiert mit Eurowings.com, der Website einer Flugline.

  • Der Befehl „Klick Buchen“ öffnet das Ausklapp-Navigationsmenü.
  • Der Befehl „Klick Flüge Buchen“ öffnet die Flugsuche-Seite.
  • Der Befehl „Klick Abflughafen“ öffne einn anderes Auklappmenü mit Abflughäfen.
  • Der Befehl „Klick Deutschland - Nord“ funktioniert nicht — weli die Menü-Einträge hier nicht als Links umgesetzt sind.

7 Screenreader-Nutzung: Andere Inhalte stören bei der Navigation

Für Screenreader-Nutzer stören manchmal automatisch angezeigte Inhalte, etwa Karussells, die Wahrnehmung des Menüs. Ton und Untertitel geben die Sprachausgabe des Screenreaders NVDA wieder. Auch die blinde Nutzerin ist zu hören.

Video-Beschreibung

Eine blinde Nutzerin versucht das Navigationsmenü der Website GKV Spitzenverband zu bedienen. Ein Karussell ist im Hintergrund aktiv. Die konstante Screenreader-Ausgabe der Inhalte des Karussells verhindert die verständliche Ausgabe des Navigationsmenüs.

Zugänglichkeits-Tipps für Ausklapp-Navigationsmenüs

  • Mache dass Menü tastaturbedienbar. Stelle sicher, das Nutzer durch das Hauptmenü tabben können.
  • Mache die versteckten Untermenüs für Tastaturnutzer zugänglich. Stelle sicher, dass das Untermenü öffnet, wenn der Hauptmenü-Eintrag den Fokus bekommt oder mit Enter aktiviert wird, oder verlinke die Hauptmenüeinträge auf Bereichsseiten, die die selben Einträge auflisten wie das Untermenü.
  • Zeige klar den jeweils aktive Fokus-Position im Hauptmenü und in Untermenüs. Tastaturnutzer müssen die Auswahl sehen, damit sie wissen, was sie aktivieren.
  • Verwende keine langen Untermenüs, wenn das Untermenü schon bei der Fokussierung öffnet. Tastaturnutzer sollten nicht gezwungen werden, durch lange Untermenüs hindurch zu tabben.
  • Vermeide grundsätzlich lange Untermenüs. Lange Untermenüs sind oft im Browserfenster oder bei kleinen Ausgabegeräten nicht vollständig sichtbar, die unteren Einträge sind dann schwierig oder gar nicht zu erreichen. Das Problem verschärft sich für Nutzer, die Inhalte vergrößern.
  • Prüfe, ob in den responsiven Versionen der Navigationsmenüs (z. B. auf Mobiltelefonen) alle Inhalte erreicht werden können - möglicherweise über Unterseiten oder Untermenüs.
  • Zeige den Zustand der Untermenüs an. Wenn Untermenüs geöffnet werden, sollte deren Zustand (ausgeklappt oder geschlossen) für blinde Nutzer verfügbar sein.

Quellen für Ausklapp-Navigationsmenüs