Zalecana praktyka Priorytet: Drobne
Panel boczny jest umieszczony w innym obszarze strony
Element <aside> lub obszar uzupełniający („complementary”), na przykład panel filtrów, podobne produkty lub blok promocyjny, jest zagnieżdżony w innym obszarze zamiast stać osobno obok treści głównej. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Użytkownicy czytników ekranu przechodzą między obszarami strony (nagłówek, menu, treść główna, panel boczny, stopka) jak między rozdziałami. Panel z filtrami lub podobnymi produktami ma być osobnym rozdziałem obok treści głównej. Gdy jest ukryty w innym obszarze, słychać go w nieoczekiwanym miejscu, łatwo go przypadkiem pominąć i trudno zorientować się, gdzie kończy się lista produktów, a zaczynają dodatki.
Kogo to dotyczy
- użytkownicy czytników ekranu
- niewidomi i słabowidzący klienci korzystający z filtrów
Jak to naprawić
Przenieś <aside> (lub element z role="complementary") poza <main>, <header>, <nav> lub <footer>, tak aby stał obok nich w strukturze strony. Jeśli blok naprawdę należy do treści głównej, na przykład wskazówka w opisie produktu, użyj <div> lub <section> z nagłówkiem zamiast <aside> albo role="complementary".
W Shopify
Motywy zwykle wyświetlają wszystkie sekcje wewnątrz <main> w layout/theme.liquid, więc prościej jest zwykle zamienić ten <aside> w kodzie Liquid sekcji (na przykład panelu filtrów lub bloku promocyjnego) na <div> lub <section>.
W Shoptet (CZ)
Zależy od struktury HTML szablonu. Sprawdź, czy nowsza wersja szablonu to poprawia; w przeciwnym razie zgłoś to Shoptet lub partnerowi.
W PrestaShop
Zwykle chodzi o lewą lub prawą kolumnę w plikach .tpl układu motywu. Upewnij się, że kolumna nie leży wewnątrz <main> ani elementu z role="main", albo zmień jej tag na <div>.
W WooCommerce
Zwykle chodzi o sidebar.php motywu lub obszar widżetów wewnątrz kontenera treści albo widżet page buildera, który generuje <aside>. Popraw strukturę w szablonach motywu potomnego lub zmień tag HTML elementu w builderze, jeśli na to pozwala.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core landmark-complementary-is-top-level.
dequeuniversity.com, github.com, www.w3.org