nav Element ohne Überschrift - Dokument Gliederung

Question

Diese Frage hat mit Dokument Gliederung Struktur, wie es bezieht sich auf Header innerhalb der <nav> Element. Es geht nicht um die Validierung.

Wenn ich eine der Seiten für meine Web-App zu validieren, und das Feld überprüfen, die dieses "Dokument outline" der Umriss umfasst sagt:

[nav Element ohne Überschrift]

Ich möchte meinem nav-Element keine Überschrift hinzufügen, da es für den Nutzer der App im Kontext meines Navs irrelevant erscheint (es ist ein Navigationselement für die Seitennummerierung eines Unterabschnitts der Seite). aber ich möchte einen gut strukturierten Dokumentenentwurf haben.

So ist meine Frage mehrteilige:

• der Umriss einschließlich dieses Warum?
• Was ist der richtige Weg, um eine Überschrift zu einem Navigationselement hinzuzufügen?
• Muss eine Überschrift zu einem nav-Element hinzugefügt werden? weil es auf den meisten Websites nicht üblich scheint.

Answer 1

Dies ist, weil das Element nav innerhalb der Sections section of the HTML5 specification definiert ist und Abschnitte voraussichtlich Überschriften haben.

Was das Dokument outline:

Der Umriss mit schneidendem Inhaltselement oder einem Sektionierung Wurzelelement besteht aus einer Liste von einem oder mehrere potentiell verschachtelt Abschnitten. Ein Abschnitt ist ein Container, der einigen Knoten in der ursprünglichen DOM-Struktur entspricht. Jedem Abschnitt kann eine Überschrift zugeordnet sein, und er kann eine beliebige Anzahl weiterer verschachtelter Abschnitte enthalten.

— 4.3.10.1 Creating an outline - HTML5 Specification

Hinweis das Wort kann - sie sind nicht erforderlich. Wenn sie benötigt würden, würde der Validator Warnungen und Fehler werfen, nicht etwas freundliche Notizen, um Sie daran zu erinnern, dass eine Überschrift fehlt.

---

So Ihre Fragen zu beantworten:

Warum ist der Umriss dies einschließlich?

Es ist nur eine freundliche Erinnerung, dass eine Überschrift nicht vorhanden ist. Nur für den Fall, dass Sie erwartet haben, dass eine Überschrift vorhanden ist, aber Sie zum Beispiel vergessen haben, eine hinzuzufügen.

Was ist der richtige Weg, um eine Überschrift zu einem Navigationselement hinzuzufügen?

Das hängt ganz davon ab, was Sie erreichen möchten. Die HTML5-Spezifikation selbst gibt folgendes Beispiel:

<nav> 
    <h1>Navigation</h1> 
    <ul>...</ul> 
</nav> 

Ist es notwendig, eine Überschrift zu einem nav Elemente hinzufügen? weil es auf den meisten Websites nicht üblich scheint.

Überhaupt nicht. Es ist völlig optional. Einige mögen argumentieren, dass es für SEO-Zwecke gut wäre, allen Bereichen eine Überschrift hinzuzufügen, aber das liegt ganz bei Ihnen. Sie können die Überschrift immer mit CSS ausblenden, wenn Sie sie hinzufügen möchten, sie aber nicht anzeigen möchten.

Answer 2

• The nav element is a sectioning element, ähnlich wie Körper, Artikel, Abschnitt und zur Seite. Jeder Abschnitt wird erwartet, obwohl nicht erforderlich, um eine Überschrift zu haben.
• Der richtige Weg ist mit einem h1, h2, ... Element, genauso wie mit jedem anderen Schnittelement.
• Nein, das ist nicht notwendig. Wenn Sie sich wirklich Gedanken über die Gliederung machen, können Sie immer eine hinzufügen und sie mit CSS verstecken, aber es ist nichts falsch daran, die Überschrift ganz wegzulassen.

Die Gliederung, die von einem Dokument erstellt wird, hat keine Auswirkung auf die Validierung. Ein Dokument kann als HTML5 validiert werden, während eine völlig andere Gliederung erstellt wird als vom Autor erwartet. Im Rahmen der Validierung werden Überschriften von keinem Schnittelement benötigt.

Answer 3

Es ist keine HTML-Konformität Fehler ein nav-Element ohne eine Überschrift zu haben. Die im Conformance-Checker bereitgestellte Übersichtsansicht ist rein informativ.

Answer 4

@ james-Donnelly Antwort ist vor Ort auf. hinzufügen wollte nur, dass ich so etwas wie dies in der Regel tun:

<nav> 
    <h1 class="v-h">Site Navigation</h1> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</nav> 

Und dann in meiner CSS wird die v-h Klasse wie folgt definiert:

.v-h { 
    position: absolute !important; 
    height: 1px; width: 1px; 
    overflow: hidden; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
} 

Dies macht den Header unsichtbar im gerenderten HTML-Inhalten, aber ermöglicht Screenreadern den Inhalt zu "sehen".

Referenzen: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility