HTML5-Sehenswürdigkeiten werden zur Verbesserung der Navigation verwendet

HTML5-Elemente wie main, nav und aside dienen als Markierungen oder spezielle Bereiche auf der Seite, zu denen Screenreader und andere Hilfstechnologien springen können. Mithilfe von Markierungselementen können Sie die Navigation auf Ihrer Website für Nutzer von Hilfstechnologien erheblich verbessern. Weitere Informationen finden Sie im Deque University-Artikel HTML 5 und ARIA-Markierungen.

Markierungen manuell prüfen

Anhand der Liste der Landmark-Elemente des W3C können Sie prüfen, ob jeder wichtige Abschnitt Ihrer Seite in einem Landmark-Element enthalten ist. Beispiel:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Sie können auch Tools wie die Accessibility Insights-Erweiterung von Microsoft verwenden, um die Seitenstruktur zu visualisieren und Bereiche zu erkennen, die nicht in Markierungen enthalten sind:

Screenshot von web.dev mit Markierungen für Sehenswürdigkeiten, die von der Accessibility Insights-Erweiterung hervorgehoben werden

Markierungen effektiv verwenden

  • Verwenden Sie Landmark-Elemente, um wichtige Bereiche Ihrer Seite zu definieren, anstatt auf generische Elemente wie <div> oder <span> zurückzugreifen.
  • Verwenden Sie Markierungen, um die Struktur Ihrer Seite zu verdeutlichen. Das <main>-Element sollte beispielsweise alle Inhalte enthalten, die sich direkt auf die Hauptidee der Seite beziehen. Es sollte also nur ein solches Element pro Seite geben. In der Zusammenfassung der Elemente zur Segmentierung von Inhalten der MDN erfahren Sie, wie Sie die einzelnen Markierungen verwenden.
  • Verwenden Sie Markierungen mit Bedacht. Zu viele Markierungen können die Navigation für Nutzer von Hilfstechnologien erschweren, da sie sie daran hindern, einfach zu einem gewünschten Inhalt zu springen.

Weitere Informationen finden Sie im Beitrag Überschriften und Markierungen.

Ressourcen