Empfohlene Praxis Priorität: Mittel
Die Seite hat mehr als einen Hauptinhaltsbereich
Zwei oder mehr Teile der Seite sind als Hauptinhalt gekennzeichnet. Es sollte nur einen geben. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.
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 (Kopfbereich, Menü, Hauptinhalt, Footer) wie zwischen Kapiteln. Wenn sie zum „Hauptinhalt“ springen, landen sie womöglich auf einem Banner oder Widget statt auf der Produktseite oder im Warenkorb und müssen erneut suchen.
Wen es betrifft
- blinde Menschen, die Screenreader nutzen
- Tastaturnutzer, die sich auf einen Link „Zum Inhalt springen“ verlassen
- Menschen mit Sehschwäche, die Bildschirmlupen mit Sprachausgabe nutzen
So beheben Sie es
Behalten Sie ein einziges <main>-Element (oder role="main"), das den eigentlichen Seiteninhalt umschließt. Ersetzen Sie zusätzliche <main> oder role="main" in verschachtelten Templates, Sections und eingebetteten Widgets durch <div> oder <section>. Prüfen Sie auch Pop-ups, Schnellansichten von Produkten und Mega-Menüs, da diese oft aus einer Kopie des Seiten-Templates gebaut werden.
Bei Shopify
Meist enthält layout/theme.liquid des Themes bereits ein <main>, und eine Section oder ein App-Block fügt ein weiteres hinzu. Ändern Sie das überzählige <main> in der Section-Datei oder bitten Sie den App-Entwickler, es zu entfernen.
Bei Shoptet (CZ)
Meist durch eigenes HTML auf einer Seite oder durch das Template bedingt. Prüfen Sie zuerst Ihren selbst eingefügten Code; liegt das Problem im Template, melden Sie es Shoptet oder einem Partner.
Bei PrestaShop
Meist geben sowohl das Layout-Template (.tpl) des Themes als auch ein Modul-Template <main> aus. Bearbeiten Sie den Template-Override des Moduls im Theme, sodass nur das Layout ein <main> enthält.
Bei WooCommerce
Meist umschließt das Theme den Inhalt mit <main>, und ein Page-Builder oder ein WooCommerce-Template-Override fügt ein zweites hinzu. Beheben Sie es im Template des Child-Themes oder stellen Sie das Container-Tag im Builder auf div um.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel landmark-no-duplicate-main.
dequeuniversity.com, github.com, www.w3.org