Empfohlene Praxis Priorität: Gering
Eine Seitenleiste liegt innerhalb eines anderen Seitenbereichs
Ein <aside> oder ein ergänzender Bereich („complementary“), etwa eine Filterleiste, ähnliche Produkte oder eine Werbebox, ist in einer anderen Landmark verschachtelt, statt eigenständig neben dem Hauptinhalt 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, Seitenleiste, Fußbereich) wie zwischen Kapiteln. Eine Seitenleiste mit Filtern oder ähnlichen Produkten soll ein eigenes Kapitel neben dem Hauptinhalt sein. Ist sie in einem anderen Bereich vergraben, wird sie an unerwarteter Stelle vorgelesen, leicht übersprungen, und es ist schwer zu erkennen, wo die Produktliste endet und die Zusatzinhalte beginnen.
Wen es betrifft
- Screenreader-Nutzer
- blinde und sehbehinderte Kunden, die Filter nutzen
So beheben Sie es
Verschieben Sie das <aside> (oder das Element mit role="complementary") aus <main>, <header>, <nav> oder <footer> heraus, sodass es in der Seitenstruktur neben diesen steht. Gehört die Box wirklich zum Hauptinhalt, etwa ein Hinweis in einer Produktbeschreibung, verwenden Sie ein <div> oder eine <section> mit Überschrift statt <aside> oder role="complementary".
Bei Shopify
Themes geben meist alle Sections innerhalb von <main> in layout/theme.liquid aus. Einfacher ist es daher meist, dieses <aside> im Liquid der Section (etwa Filterleiste oder Werbeblock) in ein <div> oder eine <section> zu ändern.
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 die linke oder rechte Spalte in den Layout-.tpl-Dateien des Themes. Stellen Sie sicher, dass die Spalte nicht in <main> oder einem Element mit role="main" liegt, oder ändern Sie das Tag der Spalte in ein <div>.
Bei WooCommerce
Meist die sidebar.php des Themes oder ein Widget-Bereich innerhalb des Content-Wrappers oder ein Page-Builder-Widget, das <aside> ausgibt. Korrigieren Sie die Struktur in den Templates eines Child-Themes oder ändern Sie das HTML-Tag des Elements im Builder, sofern er das erlaubt.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel landmark-complementary-is-top-level.
dequeuniversity.com, github.com, www.w3.org