Das main-Landmark muss auf der obersten Ebene stehen
Das main-Landmark darf nicht innerhalb eines anderen Landmarks verschachtelt sein. Inhalte sollten klar strukturiert in Header (role=”banner”), Hauptbereich (role=”main”) und Fußzeile (role=”contentinfo”) untergebracht werden.
Warum es wichtig ist
Eine klare Trennung von Inhaltsbereichen erleichtert die Navigation, insbesondere für Screenreader-Nutzer. Befinden sich Inhalte außerhalb dieser Hauptbereiche, sind sie schwer zugänglich.
Es wird empfohlen, sowohl HTML5-Elemente als auch ARIA-Landmarks zu verwenden, um die bestmögliche Unterstützung für assistive Technologien zu gewährleisten.
Behebung des Problems
Das main-Landmark muss direkt innerhalb von <body> stehen.
Alle Inhalte sollten in einem definierten Landmark-Bereich untergebracht sein.
Eine Kombination aus HTML5-Strukturelementen (<header>, <nav>, <main>, <footer>) und deren ARIA-Äquivalenten (role=”banner”, role=”navigation”, role=”main”, role=”contentinfo”) stellt eine optimale Barrierefreiheit sicher.
Gutes Codebeispiel
Korrekt strukturierte Webseite mit klar definierten Landmarks:
<header role="banner">
<p>Firmenlogo usw. hier einfügen.</p>
</header>
<nav role="navigation">
<ul>
<li>Navigation hier einfügen</li>
</ul>
</nav>
<main role="main">
<p>Hauptinhalt hier einfügen.</p>
</main>
<footer role="contentinfo">
<p>Urheberrecht usw. hier einfügen.</p>
</footer>
Kopieren