Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[Gunnar Bittersmann]

@@einsiedler

<nav id="skip-to-section" aria-labelledby="skip-to-section-label" class="skip-navi-intern">
		<h6 id="skip-to-section-label" class="visually-hidden">Section - Skip</h6>

Nicht irgendwelche Überschriftlevel verwenden, sondern das passende. Dabei keine überspringen. (Punkt 4 auf der Liste)

Die Seitenüberschrift ist h1. Davon sollte es nur eine geben. Die Überschrift für die Navigation ist i.d.R. eine Ebene darunter, also h2.

Die Überschrift ist schon die Bezeichnung für einen Bereich; ARIA braucht man dann keins:

<nav id="skip-to-section" class="skip-navi-intern">
  <h2 class="visually-hidden">Section - Skip</h2>

☞ Beispiel 1

Mit aria-labelledby sollte es auch gehen; dann kanst du das Element (p oder div) aber gleich ganz verstecken:

<nav id="skip-to-section" aria-labelledby="skip-to-section-label" class="skip-navi-intern">
  <p id="skip-to-section-label" hidden>Section - Skip</p>

☞ Beispiel 2

Variante 1 ist wohl besser; dann kann das Navigations-Menü auch über das von Screenreadern angebotene Überschriften-Menü angewählt werden.

Kwakoni Yiquan

PS: Was soll „Section - Skip“ den Nutzern sagen? Mir sagt es nichts.