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.

Zurück

Kein Erfolg mit den hier beschriebenen Contao-Lösungen? Klappt es nicht mit dem gewünschten Contao-Update oder dem Umzug auf einen neuen Hostingserver?

Wenn die Frustration zu groß wird, einfach bei mir melden:
info@liquid-artwork.de - Ansprechpartner: Lars Scheumann

Manchmal ist es besser solche umfangreichen Aufgaben dem Profi zu überlassen, der schneller und sorgfältiger damit umgehen kann. Kostet seinen Preis, aber lohnt sich schnell, bevor man sich tagelang damit herum ärgert. LIQUID-ARTWORK betreut auch Kunden die ihre Webseite selbst erstellt haben, oder durch Dritte. Kurze Anfrage bei mir und nach einer ersten Prüfung kann ich meist einen Preis nennen. Die Anfrage alleine kostet dabei nichts!

Viele weitere, ähnliche und hoffentlich hilfreiche Beiträge findet Ihr im kompletten Contao-Helpdesk das ständig erweitert wird.

Zum Contao-Helpdesk...