Empfohlene Praxis Priorität: Mittel
Die Seite hat mehr als einen Seitenkopf
Die Seite enthält zwei oder mehr Kopfbereiche („banner“), zum Beispiel den normalen Header plus eine separate Sticky- oder Mobil-Kopie oder einen als banner ausgezeichneten Aktionsstreifen. 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 erwarten genau ein Kopf-Kapitel mit Logo, Suche, Kundenkonto und Warenkorb. Bei zwei oder mehr hören sie den Kopfbereich mehrfach, wissen nicht, welcher der richtige ist, und gehen womöglich dieselben Links und den Warenkorb-Button doppelt durch.
Wen es betrifft
- Screenreader-Nutzer
- blinde Kundinnen und Kunden
- Menschen, die einen Screenreader auf dem Smartphone nutzen
So beheben Sie es
Behalten Sie pro Seite nur einen <header> der obersten Ebene oder ein role="banner". Gibt das Theme getrennte Desktop- und Mobil-Header aus oder kopiert es den Header für eine Sticky-Leiste, machen Sie die Kopie zu einem einfachen <div> oder blenden Sie die inaktive Version mit display:none oder dem hidden-Attribut für alle aus. Entfernen Sie role="banner" von Hero-Bildern und Ankündigungsleisten: Ein Werbebanner ist keine banner-Landmark.
Bei Shopify
Meist verursacht durch eine Ankündigungsleiste, eine Sticky-Header-Kopie oder eine App, die einen eigenen <header> oder role="banner" einfügt. Prüfen Sie die Header-Section-Gruppe und layout/theme.liquid und ändern Sie das zusätzliche Element in ein <div>; bei App-Code wenden Sie sich an den App-Entwickler.
Bei Shoptet (CZ)
Wird durch das Template bestimmt, das eventuell getrennte Header für Desktop und Mobil ausgibt. Prüfen Sie, ob eine neuere Template-Version das behebt; andernfalls melden Sie es Shoptet oder einem Partner.
Bei PrestaShop
Meist fügt ein Modul (Mega-Menü, Banner-Slider oder Sticky-Header) einen zweiten <header> oder role="banner" ein. Überschreiben Sie das Modul-Template in Ihrem Theme und ersetzen Sie es durch ein <div>.
Bei WooCommerce
Page-Builder geben oft getrennte Desktop-, Mobil- und Sticky-Header aus, die alle <header>-Elemente sind. Ändern Sie das HTML-Tag der zusätzlichen Header in <div>, sofern der Builder das erlaubt, oder passen Sie die header.php eines Child-Themes an.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel landmark-no-duplicate-banner.
dequeuniversity.com, github.com, www.w3.org