Kein Hauptbereich ausgezeichnet – jeder Besuch beginnt beim Menü

Wer eine Seite mit einem Vorleseprogramm benutzt, springt normalerweise direkt zum Hauptinhalt. Dafür muss dieser als solcher ausgezeichnet sein – mit <main>.

Warum das mehr ist als Formsache

Ohne ausgezeichneten Hauptbereich gibt es keinen Sprungpunkt. Bei jedem Seitenaufruf wandert man erneut durch Logo, Menü und Nebenspalte, bevor der eigentliche Text beginnt. Bei zwanzig Menüpunkten ist das jedes Mal derselbe Weg.

Die Bereiche einer Seite

<header>   Kopfbereich mit Logo
<nav>      Navigation
<main>     der eigentliche Inhalt  ← genau einmal je Seite
<aside>    Nebeninhalte
<footer>   Fußbereich

Diese Elemente ersetzen <div> ohne jede optische Änderung – sie sagen lediglich, wozu ein Abschnitt da ist.

Der Stolperstein bei Rasterlayouts

Ein <main> um mehrere Rasterspalten zu legen, zerstört oft das Layout, weil ein zusätzliches Element in der Rasterstruktur landet. Lösung ohne Umbau:

<main style="display:contents"> … </main>

display:contents lässt das Element für die Darstellung verschwinden, während es für Vorleseprogramme erhalten bleibt.

Dazu passend

Ein Sprunglink ganz am Anfang der Seite hilft zusätzlich – auch denen, die mit der Tastatur navigieren:

<a href="#inhalt" class="sprunglink">Zum Inhalt springen</a>

Häufige Fragen

Wie viele main-Elemente darf eine Seite haben?

Genau eines. Mehrere sind ein Fehler, keines ebenfalls.

Ändert sich das Aussehen der Seite?

Nein. Die Bereichselemente sind rein bedeutungstragend. Wo das Layout stört, hilft display:contents.

Weitere Befunde aus dem Bereich Barrierefreiheit

← Alle Befunde im Überblick