Dropdown-Navigationen per Tastatur bedienbar machen

Verwendest du in deinen Projekten Dropdown-Navigationen — also (meist Haupt-)Navigationen, bei denen sich bei Hover die Unternavigation öffnet?

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

Der Trick: tabindex="0"

Du könntest 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), kann auch der <strong>-Tag als Sprungmarke angesteuert werden — und dadurch öffnet sich auch das Untermenü wieder.

Im LASR-Theme geht die Unterstützung noch einen Schritt weiter: Auch die Pfeiltasten innerhalb der Subnavigation und die Escape-Taste zum Schließen des Submenüs werden unterstützt. Den größten Effekt hat aber die Ergänzung des Tabindex.

Ein weiterer Klassiker der Tastatur-Bedienbarkeit: ein Link pro Listeneintrag statt drei Links pro News-Beitrag.