XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Navigation: Zwei aufeinander folgende NAV oder NAV mit zwei Kindern SECTION? (http://xhtmlforum.de/showthread.php?t=74201)

AndreasB 03.03.2021 08:23

Navigation: Zwei aufeinander folgende NAV oder NAV mit zwei Kindern SECTION?
 
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 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 03.03.2021 11:40

Zitat:

Zitat von MrMurphy (Beitrag 554575)
- 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 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 03.03.2021 11:58

Zitat:

Zitat von MrMurphy (Beitrag 554575)
- 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 03.03.2021 12:25

Zitat:

Zitat von MrMurphy (Beitrag 554579)
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 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 03.03.2021 14:19

Zitat:

Zitat von inta (Beitrag 554582)
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 (Beitrag 554582)
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 03.03.2021 16:32

Zitat:

Zitat von AndreasB (Beitrag 554586)
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 (Beitrag 554586)
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 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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:26 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023