Navigation

Darstellung anpassen

Service-Menü

Sprachversionen

Suche



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.

Kommentare zu diesem Artikel

العاب بنات

www.el7z.com/categ...

Do. 21.06.2012
19:18 Uhr

Mit Freude habe ich zur Kenntnis genommen, dass mit Wordpress 3.0 auch Ausklappmenüs leicht umzusetzen sind.

Grafiker

www.multivisionen....

Fr. 18.03.2011
09:11 Uhr

Ein wirklich ganz toller Artikel, genau danach habe ich gesucht um wie hier einen vernünftige Anleitung zu dieser Thematik zu erhalten. So, werde mich jetzt mal an der Umsetzung versuchen ;-)
Beesten Dank

Nico Meissner

www.inite.de

Fr. 11.02.2011
10:40 Uhr

Für mich stellt sich allerdings die Frage, in welchen Fällen bei einem Webbrowser die CSS Funktionen abgeschaltet sind. Ich denke nicht, dass man heutzutage Sinnvoll im Internet surfen kann mit abgeschalteten CSS. Selbst wenn es User gibt, die Aufgrund von Farbwahrnehmungsstörungen die Stile abschalten möchten, glaube ich, dass sich das im Promillebereich abspielt

Daniel Neubauer

www.mammut-medien....

Mi. 29.12.2010
18:49 Uhr

Kann mich meinen Vorrednern nur anschließen. Schöner Artikel.
Die Kunst sauberen und validen Code zu schreiben wird heute sehr vernachlässigt, dabei sollte heute jeder wissen, dass Suchmaschinen Seiten, die validen Code aufweisen, bevorzugt behandeln. Neben der Ladegeschwindigkeit fällt valider Code auch ins Gewicht bei der Bewertung der Suchergebnisplatzierung.

Aufklappmenüs valide zu programmieren kann etwas mehr Arbeit machen, aber diese Arbeit zahlt sich definitiv aus.

Armin

www.armin.li

Mo. 08.11.2010
22:48 Uhr

Auch wenn ich mit Barrierefreiheit wenig anfangen kann, finde ich Pull-Down-Menüs sehr praktisch nund ansehnlich.

Augsburger

www.steuerberatera...

So. 31.10.2010
22:41 Uhr

Mit Freude habe ich zur Kenntnis genommen, dass mit Wordpress 3.0 auch Ausklappmenüs leicht umzusetzen sind.

Hean-Jacques Sarton

Mi. 03.03.2010
12:43 Uhr

Die Thematik ist gut beschrieben. Unglücklicherweise sind Betreiber die gesetzlich verpflichtet sind Barriere freie Seiten zu liefern (Seiten des Bundes) nicht in der Lage dies zu tun. Ursache ist dass manche Bereiche eine Breite besitzen die in Pixel angegeben ist. Wenn der Anwender die Default Schrift Größe des Browser an seine Bedürfnisse anpasst ist manches nicht mehr so wie es sein sollte.
Ein weiteren Aspekt welches so gut wie nie beachtet wird ist die Ergonomie. Seiten die links-lästig aufgebaut werden sind unangenehm wenn man ein breiten Bildschirm verwendet.
Die Schriftgröße wird meistens verkleinert, dies widerspricht WCAG 2.0 und wissenschaftliche Erkenntnisse.

Nico Vincentini

www.vincentini-med...

Mi. 27.01.2010
09:35 Uhr

Sehr schöne Entfaltung der Problematik. Viel zu wenig wird heutzutage auf eine W3C-Konformität geachtet. Ist eine Seite sauber und valide aufgebaut, wird dies auch von Google & Co belohnt! Guter Content & sauberer Quellcode werden immer wichtiger werden in Zeiten des SEO-Wahns...

Alexander All

www.webdesign-vill...

Di. 05.01.2010
13:42 Uhr

Guter Artikel der auf alle Punkte, die für ein barrierefreies Menü wichtig eingeht. Die Realität sieh doch leider ganz anders aus da der Großteil der Seiten nicht W3C valide sind. Wer sich trotzdem die Mühe macht wird belohnt, den auch hier gilt der Grundsatz: Qualität zahlt sich aus!