Stellen Sie sicher, dass der gesamte Seiteninhalt durch Landmarks strukturiert ist
Die Web-Accessibility-Standards empfehlen, dass sämtliche Inhalte – mit Ausnahme von Skip-Links – in klar definierten Bereichen wie header, nav, main und footer untergebracht werden.
Warum es wichtig ist
Wenn Inhalte in mehrere Hauptbereiche unterteilt sind, können Screenreader-Nutzer Webseiten viel leichter navigieren. Inhalte außerhalb dieser Bereiche sind schwer auffindbar und ihr Zweck ist möglicherweise unklar.
Behebung des Problems
Stellen Sie sicher, dass alle Inhalte innerhalb eines Landmark-Bereichs liegen. Verwenden Sie dafür HTML5-Landmark-Elemente oder ARIA-Landmark-Rollen.
Screenreader-Nutzer können dann direkt zu einem Abschnitt springen, basierend auf seinem HTML-Element oder ARIA-Landmark.
Gutes Codebeispiel
<html lang="de">
<head>
<title>Hallo</title>
</head>
<body>
<header>Dies ist der Header</header>
<nav>Dies ist die Navigation</nav>
<main>Dies ist der Hauptinhalt</main>
<footer>Dies ist der Footer</footer>
</body>
</html>
Kopieren
Die bewährten Methoden von ARIA erfordern, wo immer möglich, die Verwendung nativer HTML5-Landmark-Elemente anstelle von ARIA-Rollen. Das Markup im folgenden Beispiel funktioniert jedoch:
<html lang="de">
<head>
<title>Hallo</title>
</head>
<body>
<div role="banner">Dies ist die Kopfzeile</div>
<div role="navigation">Dies ist die Navigation</div>
<div role="main">Dies ist die Hauptseite</div>
<div role="contentinfo">Dies ist die Fußzeile</div>
</body>
</html>
Kopieren