Ein barrierefreies und responsives Dropdown Menü

Horizontale Navigationsmenüs kommen kaum ohne sogenannte Dropdowns aus, weil die zur Verfügung stehende Breite des Monitors in der Regel nicht für alle Navigationspunkte ausreicht. Diese Aussage gilt heute, in Zeiten von Tablets und Smartphones mehr denn je.

Die Herausforderung dabei:

1. Existierende Lösungen sind zumeist mit der Tastatur nicht bedienbar, also nicht barrierefrei.
2. Natürlich muss heute jede Lösung responsive sein, sich also an die verfügbare Monitorbreite (Tablets, Smartphones) anpassen.

Die Lösung:

Es gibt ein gutes, barrierefreies Dropdown Menü. Das Accessible Mega Menu jQuery Plugin. Mit Media Queries und etwas CSS lässt sich dafür ein responsive Layout bauen. Auf Smartphones wird aus dem horizontalen dann ein vertikales Menü.

Leider ist dieses vertikale Menü natürlich viel zu hoch, d. h. es verdeckt auf dem kleinen Smartphone-Monitor den Inhalt. Die gebräuchliche Lösung: Das Menü wird erst einmal versteckt, und erst nach dem Tippen auf einen Button aufgeklappt.
Realisieren lässt sich das z. B. mit meinem vor längerer Zeit vorgestellten JavaScript-Klappmenü.
Eleganter geht das natürlich mit der .click Funktion von jQuery - das ja ohnehin für das Accessible Mega Menu (und eventuell weitere Funktionen) benötigt wird.

Damit die beiden jQuery Funktionen sich nicht gegenseitig in die Quere kommen - in beiden Fällen wird ja etwas auf- und zugeklappt - mussten einige wenige Anpassungen vorgenommen werden.

Der Hamburger Button heißt übrigens so, weil die drei übereinander gestapelten Balken an einen stilisierten Hamburger (das Junk food Dingens) erinnern.

Demo

Die fertige Lösung ist in dieser Demo zu sehen.

In die Demo wurde zusätzlich die jQuery Fancybox sowie ResponsiveSlides eingearbeitet, um auf weitere eventuelle Konflikte zu testen. Die beiden jQuery Plugins verwende ich gerne, weil ich sie für gut mit Screen Readern verträglich halte.

Die Anpassungen im Einzelnen:

• Accessible Mega Menü lässt grundsätzlich zu, dass auch auf der obersten Ebene des Menüs Links liegen. Ein Klicken bzw. Enter mit der Tastatur bzw. Antippen öffnet dann die verlinkte Seite, Hovern mit der Maus, bzw. Ansteuern dieses Menüpunktes mit der Tastatur ohne Enter, öffnet nur das Untermenü. Diese Funktion ist auf Touch Screens leider kaputt, weil es eben dort eben kein Hovern gibt. Ich habe also auf die Belegung von Menüpunkten mit Links dann verzichtet, wenn Menüpunkte Untermenüs öffnen.
• In jquery-accessibleMegaMenu.js wurde an mehreren Stellen "aria-hidden": true durch false ersetzt.
  Einmal in Zeile 718, sowie alle .attr('aria-hidden', 'true'); durch .attr('aria-hidden', 'false');
  Dies war nötig, weil ansonsten Menüpunkte, die keine Unterpunkte besitzen, von VoiceOver in iOS nicht angesagt werden.
• Menüpunkte, die Unterpunkte besitzen, wurden mit einem Icon gekennzeichnet.
  <img src="assets/css/img/menu3.gif" alt=" - hat Untermenü" />
  Das alt-Attribut „hat Untermenü“ ist für VoiceOver auf iOS erforderlich. Auf großen Monitoren, die das horizontale Menü zeigen, sorgt bereits jquery-accessibelMegaMenu.js für entsprechende Screen Reader Ansagen.
• Ein Fallback für den Fall, dass JavaScript nicht verfügbar ist, ist in Accessible Mega Menü nicht vorgesehen. Da ich dies aber für die Seitennavigation als unverzichtbar betrachte, habe ich per <noscript> <style> ... die Untermenüs permanent aufgeklappt.

Bei Interesse an dieser Lösung dürfen die entsprechenden JavaScript- und CSS-Dateien aus der Demo kopiert und verwendet werden. Sollten noch weitere Fragen offen sein, stehe ich gerne via Kommentarfunktion zur Verfügung.

Nachtrag 18.05.2014

Die Menüleiste oben fixieren, wenn gescrollt wird. Für diesen Zweck gibt es unzählige fertige jQuery-Lösungen. Leider machen alle diese Lösungen das accessible Dropdown-Menü kaputt. Ich musste eine eigene Lösung schreiben:
$(window).scroll(function ()

Auch mit fixierter Menüleiste ist das Menü barrierefrei, z. B. mit der Tastatur bedienbar.
Damit die Funktion auf Smartphones nicht greift - dort würde sie wertvollen Platz auf dem Monitor belegen, und die Seite möglicherweise unbedienbar machen - wird, wie für andere Funktionen auch, der User-Agent per PHP abgefragt.

Nachtrag 08.10.2016

Die CSS Anweisung position:sticky könnte zukünftig auf elegante Weise das JavaScript ersetzen. Zukünftig heißt, wenn die Browserunterstützung besser ist.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. simplex3 schrieb am Dienstag, 25.02.14 12:19 Uhr:

   Ganz ausgezeichnet! Informativ UND es funktioniert! :)
   Danke!

2. Melo schrieb am Donnerstag, 17.07.14 07:44 Uhr:

   Hallo & erstmal danke für den tollen Artikel!

   Wie du oben beschreibst, habe auch ich ein Problem mit der mitscrollenden Navigation. Bin echt am verzweifeln :((

   Hast du mir zu $(window).scroll(function () auch ein Tutorial oder eine kurze Anleitung?

   Ciao und Danke

3. Fritz schrieb am Donnerstag, 17.07.14 11:45 Uhr:

   @Melo

   die Funktion ist im Quelltext der Demoseite sichtbar.
   In der CSS-Datei sind darüber hinaus für die Klasse .f-nav an 4 Stellen Eigenschaften deklariert. Insbesondere position:fixed.

   Mehr gibt es dazu eigentlich nicht zu sagen.

4. dliste schrieb am Mittwoch, 27.08.14 01:51 Uhr:

   Danke.
   Meine Lösungen mit jQuery Mobile Framework sind unbrauchbar, weil ich sie nicht abspecken kann und sie damit unerträglich langsam sind. Deshalb habe ich auf WordPress und das Theme Expound gesetzt. Deine Demo läuft bei mir so gut, dass ich damit einige Projekte umstellen werde.

5. Fritz schrieb am Mittwoch, 27.08.14 11:46 Uhr:

   @dliste
   Danke auch.
   Wieder mal ein Wordpress Theme mit einer Navigation, die mit der Tastatur nicht bedienbar ist, weil die Submenüs nicht zugänglich sind. :-(
   Und das obwohl eigens für die Navigation ein JavaScript eingebunden ist.

6. dliste schrieb am Mittwoch, 27.08.14 20:20 Uhr:

   Sehe ich anders. Das Dropdown-Menü von WP Expound lässt sich an PC und Notebook gut händeln. Bei Tablet im Hochformat und Smartphone gibt es ja eine offene Liste.
   Beim Versuch einer dynamischen Lösung mit Mysql, bei der die Untermenüs on-the-fly generiert werden, bin ich bei deiner Dropdown-Lösung gescheitert. Hab 100 Links mit der Hand erstellt. Kann man einmal machen, ist aber nix für verwöhnte Kunden.

   Gr. Dliste

7. Fritz schrieb am Mittwoch, 27.08.14 21:56 Uhr:

   @dliste

   danke für dein Feedback.
   Vielleicht ist mir etwas entgangen. Ich schaffe es jedenfalls nicht, die Untermenüs (also die "Dropdowns von Dropdown-Menü") von WP Expound ohne Benutzung von Maus/Trackpad zu öffnen. Und das habe ich mit Tastaturbedienbarkeit ("barrierefrei") gemeint.
   Vermutlich habe ich mich aber einfach nicht deutlich genug ausgedrückt.

8. dliste schrieb am Donnerstag, 28.08.14 08:48 Uhr:

   OK. Die Bedienbarkeit mit der Tastatur stand bisher bei mir nicht auf dem Schirm. Ich werde mich nun auch diesem Aspekt der Barrierefreiheit widmen.

   Und. Auf dem Smartphone wird ein sehr langes Untermenü komplett gezeigt - auch wenn die Startseite nicht soviel Platz braucht. Am PC werden nur so viele Punkte gezeigt wie der Content der Startseite hoch ist.

9. dliste schrieb am Donnerstag, 28.08.14 10:32 Uhr:

   Die Anmerkung *Menügenerierung nichtdynamisch* war natürlich Quatsch. Läuft bestens ... auf dem Smartphone ;) ohne Tastatur.

10. dliste schrieb am Donnerstag, 28.08.14 21:13 Uhr:

    Bei PC / Notebook / Tablet werden nicht alle Links (48) eines Menüpunktes gezeigt. Um die Lösung nicht aufzugeben, habe ich die diese Links aus dem Dropdown-Menü genommen und bringe sie auf einer Seite.

11. Fritz schrieb am Freitag, 29.08.14 11:38 Uhr:

    Lange Submenüs:
    Wenn Submenüs länger (höher) als der verfügbare Anzeigebereich (Viewport) werden, also sehr viele Positionen umfassen, dann führt die Fixierung des Menüs am oberen Rand dazu, dass Submenüs nur bis zur Höhe des Anzeigebereichs zu sehen sind.

    Das Problem kann gelöst werden
    1. durch Unterteilung des Submenüs in mehrere ul-Listen. Das Submenü wird dann auf mehrere Spalten aufgeteilt, oder
    2. durch Deaktivierung des fixierten Menüs.

12. Witi schrieb am Samstag, 13.09.14 14:27 Uhr:

    Hallo,

    ich stand vor einiger Zeit in meinem Blog vor dem Problem, dass ich eine JavaScript-freie Navigation haben wollte. Nach etwas Recherche habe ich festgestellt, dass das ist im Prinzip mit Hilfe von nur zwei Dingen möglich wird: Anker-Selektoren und CSS-Transitions.

    Falls es jemanden interessiert, ich habe des letztens etwas näher erläutert: http://50226.de/hamburger-menu-oder-drei-linien-navigation-ohne-javascript.html

    Gruß, Witi

13. Fritz schrieb am Samstag, 13.09.14 21:54 Uhr:

    @Witi

    sehr schöne Technik. Und perfekt für RWD (Responsive Web Design) einsetzbar.

    Ich sehe allerdings keine Dropdown-Navigationspunkte. Und das war ja eine der Prämissen für die hier vorgestellte Technik.

    Zum anderen ist die Navigation leider nicht wirklich barrierefrei. Sie ist zwar ohne Maus, also nur mit der Tastatur, perfekt bedienbar (Was man von vielen Lösungen leider nicht sagen kann). Mit Screen Readern aber werden die Navigationspunkte vorgelesen, egal ob sie ein -oder ausgeklappt sind. Das ist zumindest irritierend.

    Du löst also mit deiner Technik eine meiner drei Forderungen:
    - responsive
    - barrierefrei
    - Dropdown

    Dennoch: Ich werde mal versuchen, die Technik wenigstens auch für Screen Reader anzupassen, und damit barrierefrei zu machen.

14. dliste schrieb am Montag, 15.09.14 12:46 Uhr:

    Ich habe nun einige Seiten gemäß der Demo umgestellt und hoffe, dass das auch einigermaßen barrierefrei läuft. Mit player.js habe ich allerdings ein Problem. Solange das Script vom Weisshart-Server geladen wird, ist alles ok. Wenn es von meinem geladen wird, funktioniert es nicht. Ist das so gewollt oder mache ich es falsch?

15. Fritz schrieb am Montag, 15.09.14 13:12 Uhr:

    "Solange das Script vom Weisshart-Server geladen wird,"

    Bitte keinesfalls hotlinken. Hotlinking, also das Aufrufen von Dateien, die auf meinem Server liegen, kann ich nur nach vorheriger ausdrücklicher Abstimmung (kostenpflichtig) erlauben.

16. Witi schrieb am Dienstag, 16.09.14 09:03 Uhr:

    Vielen Dank für dein Feedback, Fritz! Ja, eine barrierefreie Lösung meiner Idee würde mich auch sehr interessieren!

    
    Gruß,
    Witi

17. Patrick S. schrieb am Montag, 22.09.14 09:41 Uhr:

    leider Fehler enthalten, folgendes ausprobieren:

    Browserfenster verkleinern > Menu Button betätigen (öffnen & schließen) > Browserfenster auf Desktop vergrößern ... die Nav-Leiste wird nicht mehr sichtbar, der Fehler liegt im Java-Code der erweitert werden muss

18. Patrick S. schrieb am Montag, 22.09.14 09:43 Uhr:

    Lösung:

    <script type="text/javascript">
    $(document).ready(function() {
    $('.menubutton').click(function() {
    $('nav').slideToggle(500, function() { // 500 ms
    $(this).toggleClass("nav-expanded").css('display', '');
    });
    });
    });
    </script>
    

19. Patrick S. schrieb am Montag, 22.09.14 09:45 Uhr:

    Lösung: CSS-Datei

    @media screen and (max-width:xxx px) {
    
    .nav-expanded {
    display:block;
    }
    }
    

20. Fritz schrieb am Montag, 22.09.14 12:34 Uhr:

    @ Patrick

    ... oder so ähnlich. ;-)

    Uns beiden ist aber schon klar, dass für den Nutzer das nicht nötig ist.
    Den von dir geschilderten Test mit Browserfenster verkleinern usw. führen nur Webworker (also z. B. wir beide) durch, um Demos von Kollegen zu testen. :-)

21. norbert schrieb am Mittwoch, 05.11.14 13:54 Uhr:

    Hallo man lernt nie aus Danke für die Ausführungen

22. Michael Finger schrieb am Sonntag, 21.12.14 10:33 Uhr:

    Moin,
    schaut euch mal das Menu unter http://jasonweaver.name/lab/flexiblenavigation/ an, das erfüllt sehr viel besser das mit der Tastatur und dem Touch wie ich finde.

23. HirschHeinrich schrieb am Mittwoch, 25.02.15 18:21 Uhr:

    Hallo Fritz,
    ich bin ein alter/älterer Bekannter und habe u.a. Deinen Chat und dynamische Banner zur vollen Zufriedenheit am Laufen.
    Warum ich mich an dieser Stelle melde?
    Ich habe den ehrenvollen Auftrag, für einen Behindertenverband e.V. eine neue und vor allen Dingen auch barrierefreie neu Internetseite zu erstellen. Geld ist damit allerdings keines zu verdienen.
    Ich habe Deinen Artikel und die Demo mit den verfügbaren aktuellsten js-Dateien nachvollzogen und nachgebaut. Mein Nachbau funktioniert auch online problemlos, und das Layout sieht dank der zugeordneten CSS-Datei auch noch gut aus. Einen zugehörigen öffentlichen Link/URL zu meinem Webspace - hier bitte nicht.
    Kurz - ich möchte das Layout der Demoseite mit dem "Klappmenü" verwenden. Offene und sichtbare Hinweise auf Idee und Realisierung durch Webdesign We.... sind selbstverständlich.
    Megamenü, RSlider und die FancyBox sind offen.
    Dein Beitrag und die Demo - saubere Arbeit und dafür meine volle Anerkennung.

24. Fritz schrieb am Mittwoch, 25.02.15 22:27 Uhr:

    @HirschHeinrich
    "Bei Interesse an dieser Lösung dürfen die entsprechenden JavaScript- und CSS-Dateien aus der Demo kopiert und verwendet werden."

    Also viel Spaß damit. Bei Problemen bitte gerne auch per E-Mail

    Die Lizenzen von Scripten Dritter, z.B. FancyBox musst du fallweise natürlich selbst prüfen.

25. Claudio schrieb am Montag, 04.01.16 15:24 Uhr:

    Habe mich viel mit Navigation beschäftigt dieses Jahr, schreibe dazu einen Artikel.

26. Frohni schrieb am Donnerstag, 15.12.16 14:20 Uhr:

    Leider ist ein Menü, das ohne JavaScript nicht funktioniert, nicht barrierefrei!
    Bei den wenigen Menüpunkten, die die Demo hat, mag es praktikabel sein, bei deaktiviertem JS alle Punkte offen darzustellen. Das geht aber nicht für große Navigationen.

27. Fritz (Gast) schrieb am Donnerstag, 15.12.16 15:59 Uhr:

    @Frohni
    Die Behauptung, dass „ein Menü, das ohne JavaScript nicht funktioniert, nicht barrierefrei“ sei, kann ich leider nicht unkommentiert stehen lassen.
    Die Aussage war richtig vor der Veröffentlichung von WCAG 2.0, also vor 2008. Seit WCAG 2.0 ist die Abhängigkeit von JavaScript kein Kriterium gegen Barrierefreiheit mehr. Vorausgesetzt natürlich, dass die Erfolgskriterien gemäß WCAG 2.0 ansonsten erfüllt sind.
    

28. Gio schrieb am Freitag, 20.01.17 19:56 Uhr:

    Wie funktioniert das Menü auf einem Touchscreen Display? Da gibt es kein mouseover, oder? Habe kein Touchscreen, und kann nur die Simulation via Laptop auf einer Internetseite, z.B. http://quirktools.com/screenfly, ausprobieren.

29. Fritz (Gast) schrieb am Freitag, 20.01.17 20:07 Uhr:

    @Gio
    Auf Geräten ohne Maus/Trackpad gibt es kein mouseover, richtig.
    Dort wird getippt (und gewischt).

30. Dietmar Liste schrieb am Sonntag, 04.11.18 19:41 Uhr:

    Ich staune, wie oft ich hier schon zum Thema was geschrieben habe. Nachdem ich nun die neue Version genutzt habe, ein dickes Dankeschön für deine Steilvorlage. Darf ich deine barrierefrei-Erklärung von der Startseite "verlinken"?
    Dietmar
    PS. Wegen einer Nutzung melde ich mich per Mail.

31. Dietmar schrieb am Montag, 05.11.18 07:30 Uhr:

    Da das Programm responsive arbeitet, kann man ja Anmerkungen zur Darstellung im Smartphone machen, obwohl der Mobilmodus für eine barrierefreie Website nur bedingt hilfreich ist.

    Mobilmodus:
    Das Navi-Fenster(chen) passt sich nicht der Seitenzahl an, dafür kann man aber scrollen. Das führt allerdings oft zum Öffnen "anderer" Seiten. Ich öffne deshalb die Links von Kategorien mit vielen Seiten nicht im Menü, sondern im Container.

    Desktopmodus:
    In der Navigation erscheinen (manche) Kategorien mit dreispaltiger Ausgabe der Links, auch wenn das nicht erwünscht ist.

    id="sub1 ... id="sub-nav1
    id="sub2 ... id="sub-nav2
    id="sub3 ... id="sub-nav3

    Dazu wäre anzumerken, dass ich die Links durch Datenbankabfrage bzw. durch die PHP-Funktion scandir generieren lasse, was ja zu einer gewissen Automatisierung führt.

    Ob meine Navi-Links außerhalb der Navigation (schon) barrierefrei funktionieren, weiß icht nicht.

    https://dliste.de/megamenu/weisshart2

    
    @Dietmar
    1. Ich fürchte, dass deine Fragen sich nicht auf dieses Script beziehen, sondern auf die neue Version, die im Kopf dieses Artikels verlinkt ist. Die hier vorgestellte Funktion kann ich leider nicht mehr supporten. Aus diesem Grund habe ich jetzt auch die Kommentarfunktion geschlossen.

    2. Für Support, also Fragen und Antworten, ist die Kommentarfunktion hier leider zu sperrig. Ich habe deshalb in meinem Supportforum https://webdesign.weisshart.de/forum/index.php
    extra eine Kategorie "Support für das responsive, barrierefreie Dropdown-Menü" eingerichtet.
    Am besten funktioniert der Support, wenn für jede Frage ein separater Thread - mit einem aussagekräftigen Thema - eröffnet wird.

Keine neuen Kommentare mehr erlaubt.