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:
Was die Nutzbarkeit angeht, haben Ausklappmenüs zwei wesentliche Vorteile:
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.
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).
Abbildung 1: Ausklappmenü bei Verwendung benutzerdefinierter Farben
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:
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
Menüleisten sollten deshalb grundsätzlich redundant implementiert sein, das heißt:
Dies ist beispielsweise bei darmkrebs.at vorbildlich gelöst. Der Nutzer kann hier wahlweise
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.
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.
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.
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.
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.
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.
em vermeidet das unübersichtliche Umbrechen der Menüleiste, kann aber bei begrenzten Bildschirmgrößen horizontales Scrollen erfordern.