HTML5-Elemente wie main, nav und aside fungieren als Orientierungspunkte oder spezielle Bereiche auf der Seite, zu denen Screenreader und andere Hilfstechnologien springen können.
Durch die Verwendung von Orientierungspunkten können Sie die Navigation auf Ihrer Website für Nutzer assistiver Technologien erheblich verbessern.
Weitere Informationen erhalten Sie unter HTML 5- und ARIA-Markierungen der Deque University.
Sehenswürdigkeiten manuell prüfen
Prüfen Sie anhand der Liste der Orientierungspunkte vom W3C, ob jeder Hauptabschnitt Ihrer Seite von einem solchen 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 Erweiterung „Accessibility Insights“ von Microsoft verwenden, um die Seitenstruktur zu visualisieren und Abschnitte abzufangen, die nicht in Orientierungspunkten enthalten sind:
Sehenswürdigkeiten effektiv verwenden
- Mit Sehenswürdigkeiten kannst du wichtige Bereiche deiner Seite definieren, anstatt allgemeine Elemente wie
<div>oder<span>zu verwenden. - Verwenden Sie Orientierungspunkte, um die Struktur Ihrer Seite zu vermitteln.
Beispielsweise sollte das
<main>-Element alle Inhalte enthalten, die direkt mit dem Hauptgedanken der Seite zusammenhängen. Es sollte also nur ein Element pro Seite vorhanden sein. Informationen zur Verwendung der einzelnen Orientierungspunkte findest du in der Zusammenfassung der Inhaltsabschnitte in der MDN. - Verwenden Sie Orientierungspunkte mit Bedacht. Zu viele Orientierungspunkte können die Navigation für Nutzer assistiver Technologien erschweren, da sie nicht einfach zu einem gewünschten Inhalt springen können.
Weitere Informationen finden Sie im Beitrag Überschriften und Markierungen.