Untermenü als solches kennzeichnen?
strange-bird
- barrierefreiheit
0 LX0 Beat
Guten Morgen,
Ich habe eine Website mit zwei eigenständigen Listen-Menüs erstellt , wobei eines logisch jedoch als Untermenü zum ersten funktioniert.
Im html Code stehen die beiden nun als gleichbereichtigte Listen untereinander.
Gibt es eine Möglichkeit das zweite Menü als "untergeordnet" zu kennzeichnen? Eine verschachtelte Liste ist leider nicht ohne weiteres möglich, da sie wie gesagt an unterschiedlichen Positionen platziert sind (per CSS).
Ich hätte gerne erreicht, dass die Hierarchie auch ohne CSS erkennbar ist.
Für eure Tipps und Hinweise wäre ich sehr dankbar.
Gruß,
strange-bird
Wenn Du keine Verschachtelung ermöglichen willst (auch verschachtelte Listen kann man positionieren, solange man overflow: hidden an der falschen Stelle vermeidet), bleibt Dir nur noch, mit IDs oder Klassennamen einen logischen Zusammenhang herzustellen:
<ul>
<li id="item-xy">...</li>
...
</ul>
<ul id="item-xy-submenu">
...
</ul>
Gruß, LX
Hallo LX,
Vielen Dank für Deine Antwort. Nutzt das denn etwas in Sachen Barrierefreiheit? Wird die ID irgendwie mit ausgegeben?
Gruß,
strange-bird
Vielen Dank für Deine Antwort. Nutzt das denn etwas in Sachen Barrierefreiheit? Wird die ID irgendwie mit ausgegeben?
Wenn du es "barrierefrei" haben willst, solltest du das Menü nicht trennen. Warum positionierst du nicht einfach das Untermenü an die entsprechende Stelle, belässt es im DOM aber dort wo es hingehört?
Nein, das nutzt überhaupt nicht. Wie bereits gesagt, ist der semantische Code barrierefreier - dazu müßtest Du Dich jedoch von der Unmöglichkeit trennen, die Listen zu verschachteln.
Gruß, LX
Lieber LX,
<ul>
<li id="item-xy">...</li>
...
</ul>
<ul id="item-xy-submenu">
...
</ul>
besser so?
~~~html
<h2>Navigation</h2>
<ul id="navi">
<li id="item-xy">...</li>
...
</ul>
<h2>Unterseiten</h2>
<ul id="sub-navi">
<li id="item-xy-submenu">...</li>
...
</ul>
Liebe Grüße,
Felix Riesterer.
Gibt es eine Möglichkeit das zweite Menü als "untergeordnet" zu kennzeichnen? Eine verschachtelte Liste ist leider nicht ohne weiteres möglich, da sie wie gesagt an unterschiedlichen Positionen platziert sind (per CSS).
Mir fällt dazu de hierarchische Information von <hx> Elementen ein.
mfg Beat