nicht angemeldet
Der Leidensweg einer semantisch sauberen Navigationsstruktur
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!
:)
akzeptierte Antworten
Der Leidensweg einer semantisch sauberen Navigationsstruktur
Gunnar Bittersmann
Bewertung: keine Bewertung
-
Ich kann sagen das diese ganzen Dropdown Menus nicht funktionieren. Das versteht niemand. Also einen schönen Klickweg einplanen. Es gibt hier eine super Vorlage https://de.wikipedia.org/wiki/Leichte_Sprache . Wenn man dann Google Trends https://trends.google.de/trends/?geo=DE benutzt zusammen mit der Verkaufsstatistik oder ROI der Produkte kommt man schnell zu einem Ergebnis.
-
@@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-
Puh.
Möcht fast sagen OJE.
Danke Gunnar,
das mit der eingeschränkten Barrierefreiheit aufgrund des fehlenden focus-Verhaltens ist natürlich ein schlagkräftiges Argument!
Zurück ans Zeichenbrett...
[EDIT] ...und ich war besonders stolz darauf, einen Weg gefunden zu haben, auf Javascript verzichten zu können und somit die volle Funktionalität auch bei restriktiven Browsereinstellungen beibehalten zu können :S [/EDIT]
-