Barrierefreie Navigation / Megamenü mit focus-within

Wer sich mit barrierefreier Navigation auseinander setzt, erkennt schnell dass dies oft nicht so einfach zu realisieren ist. So manche Drop-Down Navigation oder auch Megamenüs funktionieren nur mit dem klassichen und beliebten Mouseover. Die Möglichkeit die Navigation mit der Tastatur (Tabulator) zu bedienen fehlt oft.

Mit etwas CSS lässt sich die aber meist nachträglich noch einfügen. Dabei nutzt man die Pseudo-Klasse

:focus-within

Ältere Browser unterstützen dies nicht, aber hier könnt ihr prüfen wie es mit der Unterstützung der CSS Pseudo-Klasse bestellt ist: https://caniuse.com/#feat=css-focus-within

Aus meiner Sicht kann man es inzwischen bedenkenlos einsetzen.

Ein kleines Beispiel für die Implementierung im Modul "contao-mega-menu" von derhaeupling. Ich mag das Modul sehr, aber es kann eben keine Tastaturnavigation:

Im Prinzip geht es darum dem Element, das beim Mouseover die Aktion des aufklappens auslöst den focus-within zuzuweisen und dann die Übergabe zu machen dass dieses ausgeblendete Untermenü dann angezeigt wird wenn es den Fokus erhält.

Beim Modul contao-mega-menu hat dieses Element die CSS-Klasse li.mm_container

Das Ausgeblendete Element darunter mit den Untermenus hat die Klasse: .mm_dropdown und zeigt ein display: none;

Daraus ergibt sich:

.mod_navigation li.mm_container:focus-within > .mm_dropdown
{
display: inline-block
}

Kurz erklärt: Kommt man mit dem Fokus auf li.mm_container, wird das Element .mm_dropdown auf sichtbar gestellt. Und der Fokus kann mit der Tastatur durch drücken des Tabulators erfolgen.

Recht einfach und kann im Prinzip mit der richtigen Klassenwahl auf jedes andere Navigationsmenü adaptiert werden. Man muss nur ein wenig den Code des Menüs studieren und die CSS Klassen die vergeben wurden.

Zu beachten ist aber, dass der Fokus nicht beim aktiven Überpunkt funktioniert, da diese dann ein Link ist. Hier kann es eine Lösung sein das Template nav_mega_menu_default zu bearbeiten und den aktiven Link nicht umzuformen, sondern als Link zu belassen.