HTML5-Sehenswürdigkeiten werden zur Verbesserung der Navigation verwendet

HTML5-Elemente wie main, nav und aside dienen als Orientierungspunkte, bestimmte Regionen auf der Seite, Screenreader und andere assistive Technologien springen können. Durch die Verwendung von Orientierungspunkten können Sie die Navigation auf Ihrer Website erheblich verbessern. für Nutzende von assistiven Technologien. Weitere Informationen finden Sie in der HTML 5 und ARIA Landmarks:

Orientierungspunkte manuell prüfen

Verwenden Sie die Liste der Markierungselemente des W3C. können Sie überprüfen, ob jeder Hauptbereich Ihrer Seite von einem Landmark-Element umgeben 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 Microsofts Erweiterung „Accessibility Insights“ um Ihre Seitenstruktur zu visualisieren und Abschnitte zu erfassen, die nicht in Orientierungspunkten enthalten sind:

Screenshot von web.dev mit durch die Erweiterung „Accessibility Insights“ hervorgehobenen Sehenswürdigkeiten

Orientierungspunkte effektiv verwenden

  • Mit Sehenswürdigkeiten-Elementen wichtige Bereiche einer Seite definieren statt sich auf generische Elemente wie <div> oder <span> zu verlassen.
  • Verwenden Sie Orientierungspunkte, um die Struktur Ihrer Seite zu vermitteln. Das Element <main> sollte beispielsweise alle Inhalte enthalten, die direkt mit dem Element zu tun haben der Hauptidee der Seite hinzu. Es sollte also nur eine pro Seite vorhanden sein. Siehe Zusammenfassung der Elemente zur Unterteilung von Inhalten von MDN um mehr über die Verwendung der einzelnen Markierungen zu erfahren.
  • Verwenden Sie Orientierungspunkte mit Bedacht. Zu viele Orientierungspunkte können die Navigation für Nutzer von Hilfstechnologien erschweren, und verhindert, dass Nutzer leicht zum gewünschten Inhalt springen.

Den Beitrag Überschriften und Markierungen ansehen .

Ressourcen