Megamenü

Die Navigation ist einer der zentralsten und damit wichtigsten Stellen auf einer Website. Der Grund: Neben eventuell einer Volltextsuche ist sie der Finde-Mechanismus Nummer 1. Entsprechend ist es wichtig, dass man Navigationen richtig umsetzt und für alle bedienbar macht. Das sagt auch überdeutlich die Web-Barrierefreiheits-Verordnung BITV, die in ihrem Paragraf 3, Absatz 4 die Zugänglichkeit von Navigationsmechanismen hervorhebt. Eine zugängliche Navigation ist ebenso besonders dann wichtig, wenn man eine Vielzahl an Unterseiten hat – was ja im E-Commerce üblich ist. Leider finden sich auf Webauftritten dennoch einige Fehler in Navigationsbereichen, die oft alle, die keine Maus- und Touch-Nutzenden sind, ausschließen. Deswegen geht es in diesem Modul um eine komplexe Navigation mit vielen Listenpunkten und komplexen „Untermenüs“ – kurz: um ein Muster, das häufig „Megamenü“ genannt wird.

Zum Start folgt aber erstmal eine kleine Zusammenstellung von von typischen Barrieren, die Onlineshop-Navigationen oder speziell so genannte Megamenüs haben:

Wie im Basics-Modul angerissen, sind die Web Content Accessibility Guidelines (WCAG) der zentrale technische Standard für die Bestimmung der Barrierefreiheit (und auch im Rahmen des Europäischen Rechtsakts zur Barrierefreiheit/dem deutschen Barrierefreiheitsstärkungsgesetz BFSG relevant). WCAG-Konformität bedeutet nicht zwingend, dass etwas perfekt und eine Bedien-Wohltat ist. Die Richtlinien wollen eher das Minimum definieren, das ein Web-Projekt haben muss, um überhaupt als zugänglich zu gelten.

Für Navigations-Megamenüs, die im E-Commerce typisch sind, bedeuten die Anforderungen der WCAG:

Konfrontiert mit dieser Soll-Liste entstehen bei Ihnen eventuell schon einige Fragen, wie z. B.:

Nein, sofern es neben einem Mausüberfahren/Hover eine andere, robustere Form gibt, an Untermenüpunkte zu gelangen können dennoch Menüpunkte weiterhin auch per Mausüberfahren zu öffnen sein. Häufig hat die UX- oder Grafikabteilung gute Argumente für das "Hovern", zum Beispiel weil es für viele ein einfacher Weg ist, Seiteninhalte schnell zu entdecken.

Ein Aspekt ist bei diesem Ansatz aber zu beachten: Wenn „Hovern“ (seltener: Fokussieren eines Elements) als einer der Untermenü-Auslöser gewählt wird, haben wir eine Situation eines durch Mausüberfahren eingeblendeten Inhalts, die die WCAG in ihrem Prüfschritt 1.4.13 behandelt. Hier wäre wichtig – und laut WCAG nötig – wenn der per Hover oder Fokus geöffnete eingeblendete Inhalt (z. B. ein Untermenü) per ESC-Taste schließbar sind.

Möglicherweise haben Sie sich bereits Gedanken über die Zugänglichkeit von Aufklappbereichen gemacht, und sogar zur Tastaturzugänglichkeit ihres Menüs. Dank schlauer CSS-Selektoren sind Sie zu dem Schluss gekommen, dass ein Selektor wie a:focus + .bereich {display: block;} eine Lösung darstellt. Konkret bedeutet der Selektor, dass auf einen fokussierten Auslöser (z. B. Link oder Button) ein sichtbar gemachter Bereich (z. B. ein Untermenü) folgt. Aber warum ist das problematisch?

Nein. Wenn ein Ausklappbereich richtig gebaut ist (eingeblendeter Inhalt folgt im HTML-Dokument direkt auf den Auslöser – siehe Basics-Modul) ist spezielles Tastatur-Fokusmanagement nicht nötig. Die „neuen“ Fokushaltepunkte des frisch aufgeklappten Bereiches erscheinen an einer für Benutzende sinnvollen und erwarteten Stelle: unterhalb des Auslösers. Ein nächster TAB-Tastendruck führt bei einem geöffneten Container schon zum ersten fokussierbaren Element des soeben wahrnehmbar gewordenen Bereichs.

Im Gegensatz zu einer reinen CSS-Lösung erfüllen Ausklappbereiche (oder ARIA Disclosure Widgets) eine Doppelfunktion:

Um die Barrieren teilweise selbst zu erfahren, besuchen Sie ecbf.shop mit dieser Einstellung und versuchen Sie, Ihre Maus oder ihr Trackpad zu ignorieren. Eine Tastaturnutzung ist mit der Nutzung der TAB-Taste möglich. Im Beispielshop habe ich richtig gebaute Buttons verwendet, das heißt: diese sind, wenn fokussiert, per ENTER und Leertaste auslösbar. Sie stellen jetzt wahrscheinlich fest, dass Sie Frustration im Umgang mit dem Menü verspüren: Untermenüs sind für Sie nicht erreichbar, obwohl sich möglicherweise irgendetwas für Sie Interessantes in ihnen befindet. Einige WCAG-Berater*innen sehen die Vorgaben des zuständigen Erfolgskriteriums 2.1.1 erfüllt, da man häufig anders eine Verteilerseite erreicht, von der aus man zu den gewünschten Unterpunkten kommt: Zum Beispiel, in dem man auf eine übergeordnete Verteilerseite einer Produktkategorie geht und dort im Seiteninhalt nach einer Unternavigation sucht. Ich selbst gehe nicht mit der Argumentation mit, wenn ich mir eine Konformitätsbrille aufsetze und mir WCAG-Erfolgskriterien formal anschaue. Denn hier besagen die Konformitätsbedingungen der WCAG, dass die Prüfschritte pro einzelner Seite/einzelnen Zustand geprüft werden müssen. Und betrachtet man die Lage auf einer per-Seite-Basis, sind Dinge einfach nicht tastaturerreichbar und -bedienbar. Das ist aber etwas, dass die Regeln aber formal pro einzelner Seite verlangen (WCAG Erfolgskriterium 2.1.1). Hinzu kommt: Ein alternativer Weg über Verteilerseiten mag vielleicht möglich sein, schneller ist er mit ziemlicher Sicherheit aber nicht.

Glücklicherweise gibt es einen Lösungsansatz: auf ecbf.shop finden Sie in Desktop-Darstellung ein Megamenü, dass auf seiner zweiten Ebene komplexe Inhalte anbietet. Von der ersten Ebene aus ist die zweite Ebene per Aktivierung des Buttons, aber auch Mausüberfahren zu öffnen (damit sollte das Argument „bessere Entdeckbarkeit durch Hover“, das bestimmt aus der Marktforschung kommt, berücksichtigt worden sein). Gleichzeitig ermöglicht die grundsätzliche Verwendung des Disclosure- oder Ausklapp-Musters, das in diesen ausgeklappten Bereichen eine Vielzahl von strukturierten Daten möglich und „erlaubt“ sind (etwas, das deutlich strenger ist, wenn man beispielsweise die zunächst erst mal sinnvoll klingende Rolle menu nutzt – mehr dazu weiter unten). So finden sich im Beispielmenü von ecbf.shop unter anderem Anreißer für weitere Seitenbereiche in „Teaser“-Form sowie Untermenüs in Listenform.

Damit die Mausüber-Erkennung nicht zu sensibel ist und damit selbst für UX-Probleme sorgt, ist die hoverIntent-Bibliothek eingebunden und sorgt für eine gewisse „Trägheit“ bei der Mausbedienung.

Mobil wiederum ergibt sich eine aufklappbare Navigation: Man öffnet ein häufig so genanntes Hamburger-Menü, um an die Navigationspunkte der ersten Ordnung zu kommen. Hat man sich dann für einen dortigen Hauptbereich entschieden, klappt man die zugehörige zweite Ebene auf. Beide Aufklapp-Mechanismen folgen dem Ausklapp- oder Disclosure-Muster. Im auf ecbf.shop gebauten Beispiel verbleiben nur die Unterlisten wahrnehmbar. Die im Desktop-Design sichtbaren, aber ohnehin redundanten Teaser sind bei schmalen Viewports verschwunden.

Für die Umsetzung im Shop-Dummy auf ecbf.shop habe ich einen Ansatz gesucht, der einerseits ein Öffnen von Navigationssektionen via Mausdrüberfahren erlaubt, andererseits auch auf Tastaturereignisse reagiert, die Sektionen also mit z. B. Enter oder Leertaste öffnet (also mit einem Ausklapp-Muster arbeitet). Fündig geworden bin ich im Web A11y Slack-Kanal von Marcy Sutton, wo eine Userin namens „metageeky“ ein solches Menü für ihren Arbeitgeber gebaut hat. Dankenswerterweise ist Skript open source, und es bildet deswegen die Basis für die Navigation im HTML-Prototypen ecbf.shop.