Probleme mit Nav

[Gunnar Bittersmann]

@@ liebewinter

das Probleme ist , wenn der Maus auf Computer , der Hover , tut etwas komische... , wie sie aussiehst...

Das Problem ist, dass es ohne Maus gar nicht aussieht. Bei Navigation mit Tastatur (Tab-Taste) öffnet sich kein Untermenü – das Menü ist nicht bedienbar. Schade, dass bobby und Rolf das übersehen haben.

Um ein Menü tastaturbedienbar zu machen, genügt :hover nicht! Für den Nutzer muss erkennbar sein, wo sich der Tastaturfokus gerade befindet. Das geht mit :focus. Ein einfaches Aufklapp-Menü ließe sich mit :focus-within realisieren – allerdings funktioniert das nicht in Edge und IE.

Außerdem hat solch ein Menü den Nachteil, dass man sich durch alle Unterpunkte durchtabben muss, was bei langen Menüs eine Qual ist.

Deshalb ist es sinnvoller, das Öffnen des Untermenüs per Click auf einen Button mit JavaScript zu realisieren – jedenfalls bei Tastaturbedienung. Ich hab da mal vier Gänge angerichtet. Zweimal mit :focus-within (meh) und zweimal mit JavaScript und entsprechenden Änderungen von ARIA-Attributen.

Jeweils einmal so, dass der Menüpunkt „Hauptgericht“ ein Link ist, und einmal so, dass er keiner ist. Was bei dir der Fall ist, ist aus href="#" nicht ersichtlich. Soll "#" ein Platzhalter sein oder ist es ein Fehler, nämlich die falsche Verwendung eines a-Elements anstatt eines buttons?

Was in meinem Beispiel noch nicht auf der Speisekarte steht, ist die Überlegung, wie man zu den Unterpunkten kommt, wenn kein JavaScript ausgeführt wird. Zwei Möglichkeiten:

1. Ohne JavaScript wird das Menü so präsentiert, dass alle Unterpunkte zu sehen sind.
2. Nur die Hauptpunkte sind zu sehen, aber „Hauptgericht“ ist ein Link zu einer Seite, von der aus man zu den Unterpunkten kommt.

Welcher Weg für dich der beste ist, hängt von deinem Projekt ab. Aber mach bitte das Menü irgendwie bedienbar!

LLAP 🖖