Die Bedienbarkeit von Dropdown-Navigationen verbessern

Moin!

Verwendest du in deinen Projekten Dropdown-Navigationen? Ja genau, diese (meist Haupt-)Navigationen bei denen sich bei Hover die Unternavigation öffnet.

Dann ist dir vielleicht schon aufgefallen, dass diese nicht mit der Tastatur bedienbar ist, wenn der Hauptmenüpunkt aktiv ist. Denn der Tab-Fokus springt nur zwischen Links, der aktive Menüpunkt ist aber ein <strong>-Tag.

Du könntest nun natürlich aus dem Strong wieder einen Anker (oder Button) machen. Oder du verwendest diesen kleinen Trick, der auch im LASR-Theme zum Einsatz kommt:

Wenn du dem aktiven Menüpunkt ein tabindex="0" gibst (per Javascript oder Template-Änderung), dann kann auch der <strong>-Tag als Sprungmarke angesteuert werden und dadurch öffnet sich auch das Untermenü wieder.

Im LASR-Theme gehe ich noch einen Schritt weiter und unterstütze beispielsweise auch die Pfeiltasten innerhalb der Subnavigation sowie die Escape-Taste zum Schließen des Submenüs. Den größten Effekt hat aber die Ergänzung des Tabindex.

Nutzt du weitere Tricks, um die Bedienbarkeit deiner Contao Projekte zu verbessern? Lass es mich gerne wissen.

Erstma',
Dennis

PS: Falls du an dem Script, das ich in LASR verwende interessiert bist, dann antworte mir einfach auf diese Mail.