Überschrift für Hauptnavigation

[marctrix]

Hej Gunnar,

Das ganze braucht eine Überschrift "Hauptnavigation" (mindestens h2)

Braucht es das? Ist nicht Konsens, dass eine Navigation nur dann eine Überschrift oder ein anderes accessible label braucht, wenn es mehrere davon auf der Seite gibt?

Nein. Nicht einmal unter uns beiden.

Wieso „mindestens“? Ist nicht Konsens, dass es nur eine h1 pro Seite geben sollte und das die Seitenüberschrift ist (und nicht die Bezeichnung der Website)?

Nein, das wünschen sich nur Blinde, weil sie sich nicht darauf verlassen können, dass der Hauptinhalt einer Website korrekt ausgezeichnet ist. Dieser lässt sich mit dem Screenreader bequem mit der Taste "M" (für engl. main) anspringen.

Sie sollten das fordern!

Die Überschrift 2. Ordnung „Hauptnavigation“ hat keine übergeordnete Überschrift 1. Ordnung – komische Dokument-Outline, das.

Eben. In diesem Fall wäre h1 angebracht. Daher mindestens h2.

Meine Seiten beginnen daher meist mit einer h1, die den Namen des Angebotes enthält. Die Überschriften danach sind dann h2 und überschreiben die einzelnen Bereiche der Seite. Diese lauten meist "Hauptnavigation", Überschrift des Hauptbereiches (oft identisch mit dem Inhalt des title-Elementes), "Weiterführende Informationen" usw

Seit 15 Jahren bestehe ich damit jeden BITV- und WCAG-Compliance Test. Entgegen des von dir angenommenen Konsens. Inclusives Design ist eben kein Design für Blinde.

Insbesondere die Blindenverbände sind lange Jahre dadurch aufgefallen, Menschen mit allen möglichen Behinderungen und teilweise sogar Normalsichtige durch ihre schlecht gemachten Sites von der Nutzung Ihrer Angebote auszuschließen.

Wir sollten das nicht nachmachen.

Wie kommt man aus der Nummer raus? So?

		<nav aria-labelledby="nav-label">
			<p id="nav-label">Hauptnavigation</p>
			<ul>…</ul>
		</nav>

Das aria-labelledby kannst du dir sprane, wenn du eine h2 einsetzt. Das verstehen auch Menschen, die keinen Screenreader zur Verfügung haben und Bereich sollten überschrieben werden. Das ist der Sinn von HTML. Damit wird die Struktur einer Webseite wiedergeben. Und eine Website besteht nun mal (in aller Regel) nicht nur aus einem einzelnen Artikel, sondern aus einer Hauptnavigation, aus weiterführenden Informationen, aus Informationen über den Seitenbetreiber. Ich möchte auch als Blinder diese Struktur finden und beispielsweise auch dann schnell das Impressum finden, wenn das nicht in der Hauptnavigation ist.

Und gerade wenn man blind ist, ist eine nachvollziehbare Überschriftenstruktur eine gute (wenn nicht die beste) Hilfe, um den Aufbau einer Seite nachvollziehen zu können.

		<nav aria-label="Hauptnavigation">
			<ul>…</ul>
		</nav>

Betrachte das mal als Sehender bei abgeschaltetem oder eigenem CSS… 😉

Marc