Empfohlene Praxis Priorität: Mittel
Der Hauptinhalt liegt innerhalb eines anderen Seitenbereichs
Das Element <main> oder der Bereich mit role="main", der den Beginn des eigentlichen Seiteninhalts markiert, ist in einer anderen Landmark verschachtelt, etwa im Kopfbereich, in einer Navigation oder einer Seitenleiste. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Screenreader-Nutzer springen zwischen Seitenbereichen (Kopf, Menü, Hauptinhalt, Fußbereich) wie zwischen Kapiteln, und das Kapitel „Hauptinhalt“ nutzen sie am häufigsten: Es führt direkt zur Produktliste, zur Produktbeschreibung oder zum Bestellformular. Steckt es im Kopfbereich oder Menü, wird die Gliederung verwirrend, und Kunden verlieren Zeit, bis sie erkennen, wo das eigentliche Einkaufen beginnt.
Wen es betrifft
- Screenreader-Nutzer
- blinde und sehbehinderte Kunden
- Menschen, die mit Browser-Werkzeugen nach Seitenbereichen navigieren
So beheben Sie es
Machen Sie <main> (oder role="main") zu einem Bereich der obersten Ebene: nicht innerhalb von <header>, <nav>, <aside>, <footer> oder einem Element mit Landmark-Rolle. Meist liegt es an einem Wrapper mit role="banner" oder role="navigation" um die ganze Seite oder an einem zusätzlichen role="main" innerhalb einer vorhandenen Landmark. Behalten Sie genau einen Hauptbereich pro Seite.
Bei Shopify
<main> ist meist in layout/theme.liquid definiert. Prüfen Sie, dass kein Header-Wrapper und kein App-Embed es umschließt und dass Sections kein eigenes role="main" setzen.
Bei Shoptet (CZ)
Wird durch die HTML-Struktur des Templates bestimmt. Prüfen Sie, ob eine neuere Template-Version das behebt; andernfalls melden Sie es Shoptet oder einem Partner.
Bei PrestaShop
Meist in den Layout-.tpl-Dateien des Themes, in denen der Inhalts-Wrapper geöffnet wird. Stellen Sie sicher, dass er nicht im Kopfbereich, in einer Spalte oder einem anderen Element mit Landmark-Rolle liegt.
Bei WooCommerce
Meist öffnet die header.php des Themes einen Wrapper mit Landmark-Rolle, der später den Inhaltsbereich enthält, oder ein Page-Builder setzt role="main" auf einen inneren Container. Korrigieren Sie das in den Templates eines Child-Themes oder in den Layout-Einstellungen des Builders.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel landmark-main-is-top-level.
dequeuniversity.com, github.com, www.w3.org