Navigation: Zwei aufeinander folgende NAV oder NAV mit zwei Kindern SECTION?

AndreasB · #1 (**permalink**) 03.03.2021, 08:23

Moin.

Folgendes Markup bildet die Navigation.
Es geht um ein Fahrradmagazin. Alle paar Monate erscheint ein neue Ausgabe.
Ich habe zwei Navigationsbereiche: einen generischen, der sich nicht auf eine spezifische Ausgabe bezieht und einen, der sich auf eine Ausgabe bezieht.

Code:

<nav aria-label="Service-Navigation" class="service">
    <ol>
        <li><a href="/">Startseite</a></li>
        <li><a href="/ueber-uns">Über uns</a></li>
        <li><a href="/faq">FAQ</a></li>
        <li><a href="/archiv">Archiv</a></li>
        <li><a href="/datenschutz">Datenschutz</a></li>
    </ol>
</nav
<nav aria-label="Navigation innerhalb der Ausgabe" class="issue">
<div class="navtitle">Ausgabe 30</div>
    <ol>
        <li class="active"><strong>Editorial</strong></li>
        <li><a href="/30/leserbriefe">Leserbriefe</a></li>
        <li><a href="/30/pedelec-versus-muskelkraft-umfassende-kritik">Pedelec versus Muskelkraft&nbsp;– eine umfassende Kritik</a></li>
        <li><a href="/30/stvo-novelle">XX. StVO-Novelle: besserer Schutz für Radfahrer? Eine kritische Analyse</a></li>
        <li><a href="/30/steckdose-unterwegs-8">Steckdose unterwegs&nbsp;– Teil&nbsp;8</a></li>
        <li><a href="/30/pedal-mit-schmiernippel">Vintage-Pedal von Suntour&nbsp;– mit Schmiernippel, wartungsfreundlich und reparierbar</a></li>
        <li><a href="/30/lieblingsrad">Lieblingsrad? Welches?</a></li>
        <li><a href="/30/hohlspeiche">Hohlspeiche</a></li>
        <li><a href="/30/impressum">Impressum</a></li>
    </ol>
</nav>

In einem anderen Thread verwendetet McMurphy stattdessen

Code:

<nav>
  <section>...</section>
  <section>...</section>
</nav>

Ich neige zu der bisher von mir verwendeten Variante, weil die Nav-Blöcke so ihre Eigenständigkeit bewahren. Sie lassen sich dann z.B. bei Bedarf auch völlig getrennt voneinander platzieren ohne am Markup was ändern zu müssen.

Ob meine oder McMurphys Variante in Bezug auf Barrierearmut Vorteile hat, bin ich nicht sicher.

Über Kommentare freue ich mich. Danke.

MrMurphy · #2 (**permalink**) 03.03.2021, 11:21

Zitat:

In einem anderen Thread verwendetet McMurphy stattdessen

Nein, das war dein Wunsch, ich habe mich nach deinen Vorgaben gerichtet:

https://xhtmlforum.de/74199-flexbox-...pper-divs.html

Du hast zunächst die Container vorgegeben und eine Anordnung mit Flexbox ohne Hilfscontainer gewünscht.

Da das mit Flexbox nicht geht habe ich ein Beispiel mit Grid erstellt.

Dann war dein Wunsch weitere Infos zu einer Lösung mit Flexbox zu bekommen, wenn Hilfscontainer akzeptiert werden.

Daraufhin habe ich ein Beispiel mit Flexbox und einem Hilfscontainer erstellt.

Das war also deine Forderung.

Zitat:

Ich neige zu der bisher von mir verwendeten Variante, weil die Nav-Blöcke so ihre Eigenständigkeit bewahren. Sie lassen sich dann z.B. bei Bedarf auch völlig getrennt voneinander platzieren ohne am Markup was ändern zu müssen.

Das sehe ich genau so und habe das das in dem ersten Beispiel deshalb auch so umgesetzt.

Zitat:

Ob meine oder McMurphys Variante in Bezug auf Barrierearmut Vorteile hat, bin ich nicht sicher.

In Hinblick auf Barrierearmut hat die Lösung ohne Hilfscontainer leichte Vorteile. Viel wichtiger in Hinblick auf Barrierearmut ist die korrekte Anwendung von HTML. Das ist nämlich schon von sich aus auf Barrierearmut angelegt.

In den HTML-Regel steht unter anderem:

- Unnötige Container sind zu vermeiden.

- div-Container sollen nur verwendet werden, wenn es keine geeigneteren gibt.

Der Barrierearmut dient auch, dass im aktuellen HTML alle Elemente eine Bedeutung haben. Die korrekte Anwendung von HTML-Elementen ist die Grundlage und der wichtigste Schritt zur Barrierearmut.

Was ansonsten vollmundig und aggressiv behauptet wird bringt wenig oder gar nichts. Auch wenn es sich wichtig anhört.

cloned · #3 (**permalink**) 03.03.2021, 11:40

Zitat:

Zitat von MrMurphy

- div-Container sollen nur verwendet werden, wenn es keine geeigneteren gibt.

Bevor das jemand mit "keine divs verwenden" verwechselt: Divs können gerne und auch genug eingesetzt werden, dafür sind sie ja da. Es ist nur wichtig das in den divs dann Elemente mit semantischer Bedeutung sind.

MrMurphy · #4 (**permalink**) 03.03.2021, 11:56

Zitat:

Divs können gerne und auch genug eingesetzt werden, dafür sind sie ja da.

Nein. In den HTML-Regeln steht dazu:

Zitat:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

AndreasB · #5 (**permalink**) 03.03.2021, 11:58

Zitat:

Zitat von MrMurphy

- div-Container sollen nur verwendet werden, wenn es keine geeigneteren gibt.

Findest Du denn

Code:

<nav><section></section><section></section></nav>

geeigneter als

Code:

<div><nav></nav><nav></nav></div>

Ich bin da nicht sicher.

Weiterhin wäre noch ein Nesting von nav möglich.

cloned · #6 (**permalink**) 03.03.2021, 12:25

Zitat:

Zitat von MrMurphy

Nein. In den HTML-Regeln steht dazu:

Und nichts anderes sagte ich ja auch: Verwende div (und auch span) gerne und oft. Für alles, was die Seite "unterteilt" ... Falls es ein geeignetes Element gibt, verwende dieses.

Um es anders zu formulieren:

HTML-Code:

<div> <div> <nav /> <section /> </div> <main /> <aside /> </div>

wenn es für die Darstellung hilft, gerne div verwenden.

Anders gesagt: Für die Barrierefreiheit einfahc alle divs und span wegdenken, dann muss die Seite auch noch logischen Sinn ergeben.

inta · #7 (**permalink**) 03.03.2021, 13:50

Ein Beispiel haben wir gleich hier:

HTML-Code:

<div class="navtitle">Ausgabe 30</div>

Das ist nicht sinnvoll ausgezeichnet und sollte meiner Meinung nach eine Überschrift sein.

Ich halte auch ol für die falsche Wahl und würde hier auf jeden Fall zu ul greifen (irgendwie klingelt es da bei mir, hatten wir das Thema schon mal?).

Wenn die einzelnen Navigationsbereiche nichts miteinander zu tun haben, würde ich auch zu zwei nav-Elementen greifen.

AndreasB · #8 (**permalink**) 03.03.2021, 14:19

Zitat:

Zitat von inta

Ein Beispiel haben wir gleich hier:

HTML-Code:

<div class="navtitle">Ausgabe 30</div>

Das ist nicht sinnvoll ausgezeichnet und sollte meiner Meinung nach eine Überschrift sein.

Das macht weder für Screenreader noch für Suchmaschinen Sinn.

Zitat:

Zitat von inta

Ich halte auch ol für die falsche Wahl und würde hier auf jeden Fall zu ul greifen.

Nein. OL gilt für Screenreader als besser.

Falsch/richtig sind schonmal gar keine passende Kategorien.

inta · #9 (**permalink**) 03.03.2021, 16:32

Zitat:

Zitat von AndreasB

Das macht weder für Screenreader noch für Suchmaschinen Sinn.

Da kann ich dir nicht folgen. Warum sollte es keinen Sinn ergeben eine Überschrift als solche auszuzeichnen? Du überschreibst doch deine Navigationsliste damit. Da sich die ganze folgende Navigation dem Anschein nach auf diese „Ausgabe 30“ bezieht, ist das für mich ein sehr starkes Indiz dafür, dass es eine Überschrift sein müsste.

Zitat:

Zitat von AndreasB

Nein. OL gilt für Screenreader als besser.

Das höre ich zum ersten Mal. Eine ol hat eine definierte Reihenfolge, das trifft nach meinem Verständnis auf diese Listen nicht zu.

Die beiden Punkte sind für mich sehr viel klarer als die Abgrenzung, ob man ein oder zwei nav-Elemente verwendet, daher habe ich sie angesprochen.

AndreasB · #10 (**permalink**) 03.03.2021, 17:39

Markup für "Ausgabe 30":

Kürzlich stieß ein SEO-Spezialist zur Redaktion. Das erste, was er geändert haben wollte, war die Überschriftenstruktur. hn nur noch für den Artikel und dessen Zwischenüberschriften.
Ursprünglich hatte ich nämlich für "Ausgabe 30" eine h2.

Die Überschriftenhierarchien waren seit jeher ein strittiges Thema. Das W3C schweigt sich letztlich dazu aus, wie man damit am besten umgehen soll - außerhalb des Hauptinhaltes (wo es unstrittig ist).

Wenn dazu jemand eine fundierte Betrachtung kennt, inklusive der Berücksichtigung aktueller Screenreader und aktuellem Wissensstand aus dem SEO: lese ich gern

OL oder UL:

Die Artikel haben eine bewußt festgelegte Reihenfolge.

OL ist allein von daher in dieser Liste sinnvoll.

Toll wäre ja:

Code:

<nav>
    <caption>Ausgabe 30
    <li href="...">foo
    <li>bar
    <li href="...">zot
</nav>

Hamwanich. Jibbetnich.
Also abwarten, bis für die Navigation mal bessere Möglichkeiten existieren.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 16:43
Dynamische Größen	Killhunter	CSS	0	14.05.2011 17:56
Problem mit 3 Navigationsebene im CSS-Menü im Internet Explorer	Chellisa	CSS	0	15.08.2008 11:28
Multi-Level Navigation mit Grafiken	koncrete	CSS	3	02.08.2008 03:28
Probleme beim ausrichten	Mojo83	CSS	4	25.06.2008 20:54