Empfohlene Praxis Priorität: Gering
Zwei Seitenbereiche klingen für Screenreader gleich
Die Seite hat mehrere Bereiche desselben Typs, etwa zwei Menüs oder zwei Seitenleisten, ohne eine Beschriftung, die sie unterscheidet. 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. Steht in der Liste zweimal „Navigation“, wissen sie nicht, welches das Hauptmenü des Shops und welches das Konto- oder Footer-Menü ist, öffnen das falsche und kehren zurück.
Wen es betrifft
- blinde Menschen, die Screenreader nutzen
- Menschen mit kognitiven Einschränkungen, die Lesewerkzeuge nutzen
- Menschen, die Browser-Erweiterungen mit einer Liste der Seitenbereiche nutzen
So beheben Sie es
Geben Sie jeder wiederholten Landmark einen eindeutigen zugänglichen Namen per aria-label oder aria-labelledby, zum Beispiel <nav aria-label="Hauptmenü"> und <nav aria-label="Footer">. Gehen Sie bei wiederholten <aside>, <section> oder <form>, die als Landmarks wirken, ebenso vor. Ist ein Element eigentlich kein eigener Bereich, entfernen Sie besser seine Landmark-Rolle.
Bei Shopify
Meist sind das Header-Menü, das mobile Ausklappmenü und das Footer-Menü jeweils <nav> ohne Beschriftung. Ergänzen Sie aria-label an jedem <nav> in den Header- und Footer-Section-Dateien des Themes.
Bei Shoptet (CZ)
Meist durch die Menüs des Templates bedingt. Melden Sie es Shoptet oder einem Partner; liegt der doppelte Bereich in selbst eingefügtem HTML, beschriften Sie ihn dort selbst.
Bei PrestaShop
Meist geben das Menümodul, die Link-Blöcke im Footer und die Konto-Links jeweils ein unbeschriftetes <nav> oder <section> aus. Ergänzen Sie aria-label in den Template-Overrides der Module im Theme.
Bei WooCommerce
Meist die Menüs oder Widget-Bereiche des Themes (mehrere Seitenleisten, mehrere Navigationsmenüs). Ergänzen Sie aria-label in den Templates des Child-Themes oder in den Einstellungen des Navigationsblocks im Block-Editor, wenn Ihr Theme Blöcke nutzt.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel landmark-unique.
dequeuniversity.com, github.com, www.w3.org