Navigation

Service-Menü

Sprachversionen



Inhalt

Infothek

Dynamische Inhalte
Die Zugänglichkeit von Ausklappmenüs

09.09.2009

Die Funktionsweise von Ausklappmenüs ist den meisten Nutzern aus den Menüleisten gängiger Applikationen wie Microsoft Office vertraut. Seit Javascript die Einbindung von Ausklappmenüs auf Webseiten ermöglicht, ist diese Navigationstechnik auch im Internet weit verbreitet.

Die Art der technischen Umsetzung von Ausklappmenüs auf Websites schafft häufig erhebliche Probleme der Zugänglichkeit für Menschen mit motorischen Einschränkungen sowie für blinde und sehbehinderte Menschen, die Websites mit der Tastatur oder Vergrößerungssystemen bedienen.

Dieser Artikel vergleicht gängige Techniken für die Umsetzung von Ausklappmenüs hinsichtlich der Zugänglichkeit für Menschen mit Behinderungen und leitet daraus Empfehlungen für Designer und Entwickler ab.

Die Abschnitte des Artikels:

Vorteile von Ausklappmenüs

Was die Nutzbarkeit angeht, haben Ausklappmenüs zwei wesentliche Vorteile:

  • Wird das Ausklappmenü durchgängig für die Hauptnavigation eingesetzt, ermöglicht es auf jeder Seite des Webauftritts einen schnellen Einblick in die Inhalte der Hauptrubriken, ohne die aktuelle Seite verlassen zu müssen.
  • Das Ausklappmenü ermöglicht die direkte Navigation zu Inhalten in anderen Rubriken, ohne den Umweg über die Indexseiten der Hauptrubriken.


Probleme der Zugänglichkeit von Ausklappmenüs

Ausklappmenüs schaffen aber auch Zugänglichkeitsprobleme. Einige Probleme sind unvermeidlich, selbst bei gelungenen Umsetzungen. Andere Probleme sind dagegen vermeidbar, wenn Ausklappmenüs barrierefrei umgesetzt werden.

Unvermeidliche Zugänglichkeitsprobleme

  • Sehbehinderte nutzen häufig Vergrößerungssysteme, die nur einen kleinen Ausschnitt der Seite anzeigen. Dies kann bedeuten, dass Menüoptionen eines Ausklappmenüs außerhalb des dargestellten Bereichs angezeigt werden.
  • Für sehbehinderte Nutzer, die per Browsereinstellung eigene Farben einstellen, scheint in allen etwas älteren Browsern der unter dem ausgeklappten Menü liegende Seiteninhalt hindurch, die Menüoptionen sind also schlecht oder gar nicht leserlich (siehe Abbildung 1). Dieses Problem ist allerdings erfreulicherweise in neueren Browsern gelöst (seit Firefox 3 beziehungsweise IE 7).

    Screenshot von kkh.de bei benutzerdefinierten Farben: das Ausklappmenüs überlagert den dahinter liegenden Text,  so dass beides kaum noch lesbar ist

    Abbildung 1: Ausklappmenü bei Verwendung benutzerdefinierter Farben

  • Für ältere und motorisch eingeschränkte Nutzer sind Ausklappmenüs oft nur schwer oder gar nicht nutzbar. Die Mausbedienung von Ausklappmenüs ist komplex und mehrstufig: Ausklappen durch Mouseover, Menüoptionen lesen und verstehen, Mausbewegung zur gewünschten Menüoption, dann ein Klick, um die Navigation auszulösen. Dabei rutscht der Mauszeiger oft versehentlich aus dem ausgeklappten Untermenü heraus, das Untermenü verschwindet und muss erneut angesteuert werden. Bei verschachtelten, mehrfach ausklappenden Menüs oder verzögerter System-Reaktionszeit wird es noch schwieriger.

Vermeidbare Zugänglichkeitsprobleme

Viele Umsetzungen von Ausklappmenüs im Web schaffen Zugänglichkeitsprobleme für Menschen mit Behinderungen, die sich durch eine barrierefreie Umsetzung vermeiden ließen. Dies betrifft besonders die folgenden Punkte:

  • Redundante Navigation
  • Tastaturbedienbarkeit
  • Skalierbarkeit
  • Javascript-Unabhängigkeit

Redundante Navigation

Ein Ausklappmenü sollte nie die einzige Möglichkeit sein, zu Inhaltsseiten zu navigieren, weil es in verschiedenen Nutzungskontexten nicht angezeigt wird oder nicht oder nur mangelhaft nutzbar ist, zum Beispiel wenn

  • Ausgabegeräte mit geringer Bildschirmauflösung genutzt werden (Handy, PDA, Vergrößerungssoftware),
  • Javascript abgeschaltet ist, der Ausklappmechanismus aber nur mit Javascript funktioniert,
  • CSS abgeschaltet ist,
  • benutzerdefinierte Farben in etwas älteren Browsern verwendet werden.

Menüleisten sollten deshalb grundsätzlich redundant implementiert sein, das heißt:

  • Die stets sichtbaren Hauptmenüoptionen verlinken auf die Einstiegsseiten jeder Rubrik; die Navigation funktioniert auf der ersten Ebene also auch ohne das Ausklappen der Untermenüs.
  • Die untergeordneten Menüoptionen finden sich jeweils als stets sichtbares Bereichsmenü auf den Einstiegs- und Folgeseiten jeder Rubrik, natürlich gleichlautend und in derselben Reihenfolge wie im Ausklappmenü.

Dies ist beispielsweise bei darmkrebs.at vorbildlich gelöst. Der Nutzer kann hier wahlweise

  • das Ausklappmenü nutzen und direkt zu Unterseiten der zweiten Navigationsebene springen, oder aber
  • zunächst durch Klick auf eine Hauptmenüoption zu einer Einstiegsseite auf erster Navigationsebene springen und dann in einem zweiten Schritt das dortige Bereichsmenü in der linken Spalte nutzen, in dem dieselben Menüoptionen zur Verfügung stehen wie im Ausklappmenü.

Wer also den Ausklappmechanismus auf darmkrebs.at etwa wegen einer motorischen Behinderung, ausgeschaltetem Javascript oder zu wenig Platz auf dem Bildschirm nicht nutzen kann, hat die Möglichkeit, stattdessen einfach schrittweise zu navigieren – ganz so als wären die ausklappenden Untermenüs gar nicht vorhanden.

Bedenken sollte man allerdings, dass auch bei vorbildlicher redundanter Implementierung dennoch grundsätzliche Zugänglichkeitsprobleme bestehen bleiben. Denn viele Nutzer vermuten nicht, dass die Hauptmenüoptionen überhaupt klickbar sind, weil das Ausklappen die Aufmerksamkeit sofort auf das Navigationsangebot des Untermenüs lenkt. Die Mouseover-Aktion "sättigt" sozusagen die Erwartungen an die Hauptmenüoption. Dies liegt auch daran, dass es im Web im Unterschied zur Betriebssystemebene kein standardisiertes und deshalb vorhersagbares Verhalten von Menüs gibt.

Tastaturbedienbarkeit

Während Ausklappmenüs hauptsächlich auf Mausnutzer zugeschnitten sind, muss dennoch sichergestellt sein, dass blinde, sehbehinderte und motorisch eingeschränkte Nutzer die Navigation auch über die Tastatur bedienen können. Das Ausklappmenü muss den Fokus allein über die Tastaturbedienung bekommen können. Beim Durchlaufen des Menüs mittels Tabulatortaste darf der Tastaturfokus nicht an bestimmten Elementen "hängenbleiben" (Tastaturfalle), sondern muss das gesamte Menü durchlaufen können.

Was das Ausklappverhalten des Menüs bei Tastaturbedienung angeht, gibt es zwei brauchbare Alternativen.

  • Variante 1: Wenn der Tastaturfokus auf die Hauptrubrik fällt, klappt die Liste der Unterrubriken aus, der Tastaturfokus durchläuft diese Liste und springt erst an deren Ende zum nächsten Hauptrubrik (zum Beispiel bei www.darmkrebs.at)
  • Variante 2: Das Menü klappt bei der Tastaturbedienung nicht aus, jede Hauptmenüoption der Menüleiste verweist aber auf eine entsprechende Bereichseinstiegsseite, auf der alle Untermenüpunkte in einem statischen Bereichsmenü wiederholt werden (zum Beispiel bei www.bvl.bund.de).

Der Vorteil der Variante 1 ist, dass das Menü auf Maus und Tastatur gleichartig reagiert, beide sind äquivalent. Tastaturnutzer sind jedoch gezwungen, erst alle Unterrubriken mit der Tabulatortaste zu durchlaufen, bevor sie die nächste Hauptrubrik erreichen.

Der Vorteil der Variante 2 ist, das Tastaturnutzer schneller die gewünschte Hauptrubrik auswählen können. Unterrubriken werden erst im zweiten Schritt auf der Ebene der Bereichsseite gewählt.

Das unterschiedliche Ausklappverhalten hängt an den jeweiligen CSS-Methoden zum Verstecken der Unterrubriken. Soll die Tastaturnutzung das Menü ausklappen, werden die Listen der Unterrubriken als Default über CSS außerhalb des Bildschirms positioniert. Sollen sie dagegen übersprungen werden, werden sie per CSS über die Eigenschaft display: none versteckt. Die Entscheidung, welche der beiden Varianten vorteilhafter ist, lässt sich nur unter Berücksichtigung der Inhalte, insbesondere der Anzahl der Menüoptionen, treffen. Im BITV-Test werden grundsätzlich beide Möglichkeiten akzeptiert.

Bei der Gestaltung von Ausklappmenüs sollte darauf geachtet werden, dass der Fokus bei der Navigation gut sichtbar ist, zum Beispiel durch eine deutlich abweichende Hintergrundfarbe oder Farbumkehrung von Textfarbe und Hintergrund. Die Hervorhebung des Tastaturfokus soll dabei mindestens so deutlich sein wie beim Mausfokus, und sie soll nicht mit Javascript, sondern mit CSS umgesetzt sein (denn sie soll auch bei abgeschaltetem Javascript funktionieren).

Der Tastaturfokus soll nicht verschwinden, da dies die Orientierung sehender Tastaturnutzer erschwert. Ein Beispiel: beim seitlichen Ausklappmenü der Bundesärztekammer wandert der Fokus durch eine Liste von bis zu neun unsichtbaren Unterrubriken. Die Orientierung ist dadurch für sehende Tastaturnutzer erschwert.

Skalierbarkeit

Falls horizontale Menüleisten bei Skalierung in die nächste Zeile umbrechen, kann es passieren, dass Teile des Menüs nicht mehr nutzbar sind, etwa wenn Rubriken der oberen Zeile jene in der unteren Zeile überlagern und damit unleserlich machen - und auch nicht mehr anklickbar. Ein Beispiel: Das Menü "Aktuell" der Website bayern.de verdeckt das Menü "Leben in Bayern" und ist selbst nicht länger zugänglich (vergleiche Abbildung 2). Daher sollte darauf geachtet werden, dass der z-index der Ausklappmenüs ausreichend hoch ist, um sich stets über alle Hauptmenüoptionen zu legen.

Screenshot von bayern.de - Schrift um eine Skalierungsstufe vergrößert (Menü
Abbildung 2: bayern.de, um eine Skalierungsstufe vergrößert (Firefox 2)

Die Schriftskalierung in nicht skalierbaren Layouts schafft oft Probleme. Auf der Website www.bvl.bund.de ist die Breite der Hauptrubriken-Elemente mit der Maßeinheit px (Pixel) festgesetzt, um den Umbruch der Menüleiste die nächste Zeile zu verhindern. Dadurch werden aber bei der Schriftvergrößerung die Rubriken-Titel beschnitten. Zudem schließen die ausgeklappten Unterrubriken nicht mehr direkt an die Rubriken-Elemente an: sie verschwinden beim Ziehen der Maus über den Spalt hinweg, das Menü ist in dieser Skalierungsstufe unbenutzbar.

Javascript- und CSS-Unabhängigkeit

Die Navigation durch die komplette Website muss auch bei abgeschaltetem Javascript funktionieren. Manche technische Umsetzungen des Ausklappens funktionieren nicht, wenn der gewählte User Agent (zum Beispiel Browser, Screenreader, PDA oder Handy) Javascript entweder nicht unterstützt oder Javascript deaktiviert ist. Dies macht jedoch nichts, solange der Nutzer über die Hauptmenüoptionen der Menüleiste zu den Bereichseinstiegsseiten navigieren kann und von dort aus über ein Bereichsmenü weiter zu den Unterseiten (siehe redundante Navigation).

Das Verhalten des Menüs sollte bei verschiedenen Nutzersettings überprüft werden. Insbesondere bei der Darstellung ohne CSS, aber mit eingeschaltetem Javascript kann es zu Überraschungen kommen. Ein Beispiel: Im Ausklappmenü der KKH machen Mouseover-Events die Menüoptionen auch ohne CSS sichtbar beziehungsweise unsichtbar. Hier bekommen auch versteckte Menüoptionen mitunter den Tastaturfokus, das Darstellungsverhalten ist erratisch.

Zusammenfassung: Empfehlungen für die Gestaltung von Ausklappmenüs

  • Die Navigation sollte zuerst als Menüleiste mit permanenten Links zu den Bereichsseiten gestaltet werden. Danach wird zusätzlich die Ausklappfunktion hinzugefügt.
  • Das Ausklappmenü muss tastaturbedienbar sein. Je nach Fall kann es besser sein, dass bei Tastaturbedienung die Unterrubriken ausklappen oder übersprungen werden. Die zweite Variante ist bei zahlreichen Unterrubriken vorzuziehen.
  • Das Ausklappmenü muss über die Tastatur den Fokus erhalten können, der Fokus soll sowohl bei Maus als auch bei Tastaturbedienung deutlich sichtbar sein, und Tastaturfallen müssen vermieden werden.
  • Falls das Menü bei Schriftvergrößerung umbricht, muss dafür gesorgt sein, dass sich dennoch alle Untermenüs beim Aufklappen ganz in den Vordergrund legen - also sichtbar und bedienbar bleiben.
  • Menüleisten und Rubriken dürfen bei Schriftvergrößerung nicht beschnitten werden, Rubriken dürfen nicht verschwinden.
  • Die durchgängige Skalierung des gesamten Layouts mittels der Maßeinheit em vermeidet das unübersichtliche Umbrechen der Menüleiste, kann aber bei begrenzten Bildschirmgrößen horizontales Scrollen erfordern.
  • Selbstverständlich sollten Ausklappmenüs wie andere Menüs auch sinnvoll mit den entsprechenden HTML-Elementen als verschachtelte Listen strukturiert sein. Die untergeordneten Ausklappmenüs sollten als untergeordnete Listen ausgezeichnet werden. Dies schafft eine logische, darstellungsunabhängige Gliederung der Navigation, bei der Ansicht ohne CSS bleibt so die Navigationshierarchie klar an den Einrückungen der Listenelemente ablesbar.