Meine erste Seite ist Test-Online!

[Gunnar Bittersmann]

@@hmm

Navigation mit Hamburger-Icon: Von dem Bootstrap-Wahnsinn mal abgesehen, ein Hamburger-Icon mit 3 leeren spans zusammenzubasteln, sollte ein Hamburger-Icon mit „Menü“ beschriftet sein. Nutzertests zeigen immer wieder, dass nicht alle die Bedeutung der drei Striche kennen. (Das mag aber von der Zielgruppe abhängen.)

Bei Tastaturbedienung erkennt man so gut wie gar nicht, wenn das Hamburger-Icon den Fokus hat – der Farbkontrast ist viel zu gering. Außerdem ist die Tab-Reihenfolge falsch. Man erwartet, dass das Hamburger-Icon nach der Site-Kennung „Skillmatrix“ kommt. Die Reihenfolge der Elemente im DOM wäre im HTML zu korrigieren.

Man könnte auch erwarten, dass sich das Menü durch die Esc-Taste schließen ließe; das passiert aber nicht.

Warum scrollt die Navigation nicht mit der Seite, sondern raubt unnötig Platz? Und wenn schon fixer Header, dann bitte nicht mit position: fixed, sondern Viewport mit Flexbox oder Grid aufteilen und den Hauptbereich für sich scrollen lassen. Bei position: fixed verschwinden Inhalte unter dem Header, was sich störend bemerkbar macht, bspw. bei Tastaturnavigation.

LLAP 🖖