Empfohlene Praxis Priorität: Gering
Der Seitenkopf liegt innerhalb eines anderen Seitenbereichs
Der Kopfbereich (die Landmark „banner“ mit Logo, Suche und Warenkorb) ist in einer anderen Landmark verschachtelt, etwa im Hauptinhalt oder in einer Navigation, statt eigenständig oben auf der Seite zu stehen. 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 eines Buches. Steckt der Kopfbereich in einem anderen Bereich, gerät die Kapitelliste durcheinander: Wer zum Kopf springt, um Suche, Kundenkonto oder Warenkorb zu erreichen, landet womöglich an der falschen Stelle oder findet ihn gar nicht als eigenes Kapitel.
Wen es betrifft
- Screenreader-Nutzer
- blinde Kunden, die Suche, Kundenkonto oder Warenkorb suchen
So beheben Sie es
Platzieren Sie den <header> der Website (oder das Element mit role="banner") direkt in der Seitenstruktur, außerhalb von <main>, <nav>, <aside> und jedem Element mit Landmark-Rolle. Meist liegt es an einem Seiten-Wrapper mit role="main" oder role="navigation" um den Kopf oder an role="banner" auf einem Element innerhalb einer anderen Landmark. Ein <header> in einem <article> oder <section> ist in Ordnung, da er nicht als Seitenkopf gilt.
Bei Shopify
Meist verursacht durch layout/theme.liquid oder einen eigenen Wrapper um die Header-Section-Gruppe, etwa ein div mit Landmark-Rolle an falscher Stelle. Verschieben Sie den Kopf aus diesem Wrapper oder entfernen Sie die überflüssige Rolle.
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, die den Kopf einbinden. Stellen Sie sicher, dass der Kopfblock nicht in einem Element mit role="main" oder einer anderen Landmark-Rolle liegt.
Bei WooCommerce
Meist durch die header.php des Themes oder ein Header-Template des Page-Builders, das die Seite in ein Element mit Landmark-Rolle einschließt. Korrigieren Sie das in der header.php eines Child-Themes oder im Header-Template des Builders.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel landmark-banner-is-top-level.
dequeuniversity.com, github.com, www.w3.org