Zum Inhalt springen
Pandus

Empfohlene Praxis Priorität: Mittel

Auf der Seite ist kein Hauptinhalt gekennzeichnet

Kein Teil der Seite ist als Hauptinhalt gekennzeichnet, daher können Hilfstechnologien nicht erkennen, wo das Wesentliche beginnt. 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. Hier fehlt das Kapitel „Hauptinhalt“, also müssen sie auf jeder Produkt- oder Kategorieseite erst Logo, Menü und Banner anhören, bevor sie zu den Produkten kommen.

Wen es betrifft

  • blinde Menschen, die Screenreader nutzen
  • Tastaturnutzer
  • Menschen mit motorischen Einschränkungen, die Schaltergeräte nutzen

So beheben Sie es

Umschließen Sie den zentralen Inhalt jedes Seiten-Templates, also alles zwischen Kopfbereich und Footer, mit einem <main>-Element (oder einem Container mit role="main"). Legen Sie Kopfbereich, Navigation und Footer nicht hinein. Prüfen Sie jeden Template-Typ: Startseite, Kategorie, Produkt, Warenkorb, Checkout, Blog und statische Seiten.

Bei Shopify

Die meisten aktuellen Themes haben <main> in layout/theme.liquid; ältere oder eigene Themes nutzen eventuell ein einfaches <div>. Ändern Sie diesen Wrapper um {{ content_for_layout }} in <main id="MainContent">.

Bei Shoptet (CZ)

Meist durch das Template festgelegt und daher schwer selbst zu ändern. Melden Sie es Shoptet oder einem Partner und bitten Sie um ein <main>-Element um den Seiteninhalt.

Bei PrestaShop

Meist in den Layout-.tpl-Dateien des Themes festgelegt (zum Beispiel im Layout, das alle Seiten verwenden). Ändern Sie den Inhalts-Wrapper in jeder Layout-Datei oder in einem Child-Theme zu <main>.

Bei WooCommerce

Meist öffnen und schließen header.php/footer.php des Themes den Inhalts-Wrapper mit einem <div>. Ändern Sie diesen Wrapper in einem Child-Theme zu <main> oder stellen Sie das Container-Tag im Page-Builder auf main, falls er das anbietet.

Standards

Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.

Automatische Prüfung: axe-core-Regel landmark-one-main. dequeuniversity.com, github.com, www.w3.org

Alle Regeln, die wir prüfen