Der Leidensweg einer semantisch sauberen Navigationsstruktur

[Anne Kaffeekanne]

Hallo,

Danke für eure Zeit :)

Zur Frage:

Ich versuche derzeit eine Navigationsstruktur so simpel wie möglich zu halten, so setze ich ein Hauptmenü-Toggle mithilfe einer [unsichtbaren] Checkbox um, was eine Implementierung komplett ohne Javascript, rein in HTML und CSS zulässt.

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.

Gleichzeitig sollte die Struktur semantisch sauber sein, daher erscheint mir der Einsatz von zwei <nav> Containern, einer für das Checkbox Element, der zweite für die eigentliche Listen-Menüstruktur reichlich ...gewagt bis unkonventionell.

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?

Danke für eure Stellungnahmen!

:)