Gunnar Bittersmann: Der Leidensweg einer semantisch sauberen Navigationsstruktur

Beitrag lesen

@@Anne Kaffeekanne

Ich versuche derzeit eine Navigationsstruktur so simpel wie möglich zu halten

Simpel für wen? Für Entwickler oder simpel für Nutzer?

Einfachheit sollte nicht das entscheidende Kriterium sein, sondern Sinnhaftigkeit. [yours truly]

so setze ich ein Hauptmenü-Toggle mithilfe einer [unsichtbaren] Checkbox um, was eine Implementierung komplett ohne Javascript, rein in HTML und CSS zulässt.

Keine. Gute. Idee.

Lieber eine vernünftige Lösung mit JavaScript (als progressive enhancement) als ein CSS-only-Hack, der nicht barrierefrei ist (wie bspw. der Checkbox-Hack). [ibid.]

Da ich das Checkbox-Element gerne unabhängig von der restlichen Navigationsstruktur im Header positioneren will (ohne es mit position:absolute aus dem Fluss zu nehmen), muss das Element aber "außerhalb" der Listen-Menüstruktur angesiedelt sein, es dürfen also nicht beide in einem <nav> Container zusammengefasst sein.

Doch, das UI-Element zum Auf-/Zuklappen der Navigation gehört mit ins nav-Element. [Inclusive Components, Menus & Menu Buttons]

Ich habe daher überlegt, die Checkbox stattdessen in ein simples Div-Element zu packen und es mit einem role-Attribut [role="navigation"] zu versehen, was meint ihr dazu?

Nein, nicht machen.

Auf-/Zuklapp-Navigation (bei schmalen Viewports), responsiv, barrierefrei.

LLAP 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann