webentwicklung-frage-antwort-db.com.de

HTML5 nav element vs. role = "navigation"

Haben alle folgenden Bedeutungen dieselbe semantische Bedeutung? Wenn nicht, erläutern Sie bitte Ihre Antwort.


1.

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>


2.

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>


.

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>
html5semantic-markupnav
48
Web_Designer

Wie Alohci vermerkt laut HTML5 ist Beispiel 3 nicht erlaubt .

Aber Beispiel 1 und 2 sind nicht semantisch äquivalent.

nav ist ein Schnittelement, div nicht. Beispiel 1 erstellt also einen Abschnitt ohne Titel (ähnlich einer leeren Überschrift) und ändert das gesamte Dokument Gliederung .

Außerdem gehört nav immer gehört zum übergeordneten Abschnitt (bzw. zum Abschnittsstamm), sodass Sie eine Navigation für die gesamte Site, eine Navigation für den Hauptinhalt und eine Navigation haben können nur für Kapitel 3 des Hauptinhalts und/oder eine Navigation für sekundären Inhalt in der Seitenleiste usw.

Dieser Unterschied ist in den Definitionen der Rolle navigation dargestellt

Eine Sammlung von Navigationselementen (normalerweise Links) zum Navigieren im Dokument oder in verwandten Dokumenten.

und das nav -Element (von mir fett gedruckt):

Das nav -Element repräsentiert einen Abschnitt einer Seite , der auf andere Seiten oder Teile der Seite verweist: einen Abschnitt mit Navigationslinks.

Beachten Sie auch: Ein HTML5-Benutzeragent, der WAI-ARIA nicht unterstützt/kennt, würde nicht verstehen, dass Beispiel 2 Navigation enthält (und umgekehrt).

45
unor

Twitter Bootstrap verwendet <nav role="navigation">

Dies scheint, als würde es alle Bedürfnisse am effektivsten abdecken.

Stellen Sie sicher, dass Sie jeder Navigationsleiste eine role = "navigation" hinzufügen, um die Barrierefreiheit zu verbessern.

Es wird auch von w3.org empfohlen

21
bdanin

<nav role="navigation"> validiert für mich mit HTML5 dtd für den W3C-Validierungsdienst.

Es scheint mir eine gute Option zu sein, da es sowohl alte als auch neue Technologien unterstützt, bis die unterstützende Technologie aufgeholt hat.

5
sam

Die ersten beiden Fälle sind semantisch äquivalent. Der dritte ist nicht. <ul> hat ein standardmäßig implizite ARIA-Semantik von list und kann nur gültig auf directory, list, listbox [$ var] gesetzt werden _, menu, menubar, presentation, tablist, toolbar oder tree, setzen Sie es also auf navigation ist ungültig und bricht die list Semantik, die das <ul> Element hat in den ersten beiden Fällen.

5
Alohci

WAVE Web Accessibility Tool kann verwendet werden, um Informationen über solche Dinge zu erhalten.

Allerdings finde ich die Dokumentation dort und die Ergebnisansicht bei der Prüfung etwas verwirrend. Ich denke, es wäre gut mit klaren Beispielen, da nicht jeder viel über die Barrierefreiheit im Web weiß. (Die Ergebnisansicht sieht sehr gut aus, aber Beispiele wären trotzdem hilfreich.)

2
Leo

OK, das ist eine gute Frage. Kurz gesagt, dies passiert, wenn zwei oder mehr Spezifikationen mit ähnlichen Problemen zu unterschiedlichen Zeiten veröffentlicht und von verschiedenen Browsern/Bildschirmlesern unterstützt werden.

Dem Element <nav> Sollte automatisch die Rolle navigation zugewiesen werden. Theoretisch können Sie also nur die Option 1 verwenden. Einige Screenreader wissen dies jedoch noch nicht, weshalb die Verwendung von 2 besser wäre . Option 3 erscheint seltsam, da es sich nicht nur um eine ungeordnete Liste handelt, sondern um ein Navigationssystem.

Natürlich ist dies ein gutes Beispiel - für viele ARIA-Rollen gibt es kein passendes HTML-Element, daher können Sie Option 2 wählen, weil Sie andere Dinge von ARIA verwenden und explizit sein möchten.

Persönlich benutze ich 2, weil GZIP die Dateigröße irrelevant macht und es funktioniert in dem von mir getesteten Format AT (Voice-over und etwas anderes unter Windows, an das ich mich momentan nicht erinnern kann).

2
Rich Bradshaw