Zalecana praktyka Priorytet: Drobne
Nagłówek strony jest umieszczony w innym obszarze strony
Obszar nagłówka (punkt orientacyjny „banner” z logo, wyszukiwarką i koszykiem) jest zagnieżdżony w innym obszarze, na przykład w treści głównej lub nawigacji, zamiast stać osobno na górze strony. 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, stopka) jak między rozdziałami książki. Gdy nagłówek jest schowany w innym obszarze, lista rozdziałów się miesza: klient, który przeskakuje do nagłówka, by dotrzeć do wyszukiwarki, konta lub koszyka, może trafić w złe miejsce albo w ogóle nie znaleźć nagłówka jako osobnego rozdziału.
Kogo to dotyczy
- użytkownicy czytników ekranu
- niewidomi klienci szukający wyszukiwarki, konta lub koszyka
Jak to naprawić
Umieść <header> serwisu (lub element z role="banner") bezpośrednio w strukturze strony, poza <main>, <nav>, <aside> i każdym elementem z rolą punktu orientacyjnego. Zwykle przyczyną jest kontener strony z role="main" lub role="navigation" wokół nagłówka albo role="banner" dodane do elementu wewnątrz innego obszaru. <header> wewnątrz <article> lub <section> jest w porządku, bo nie jest traktowany jako nagłówek serwisu.
W Shopify
Zwykle przyczyną jest layout/theme.liquid lub własny kontener wokół grupy sekcji nagłówka, na przykład div z rolą punktu orientacyjnego w złym miejscu. Przenieś nagłówek poza ten kontener lub usuń zbędną rolę.
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 pliki .tpl układu motywu, które dołączają nagłówek. Upewnij się, że blok nagłówka nie leży wewnątrz elementu z role="main" ani inną rolą punktu orientacyjnego.
W WooCommerce
Zwykle wynika z header.php motywu lub szablonu nagłówka w page builderze, który obejmuje stronę elementem z rolą punktu orientacyjnego. Popraw to w header.php motywu potomnego lub w szablonie nagłówka buildera.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core landmark-banner-is-top-level.
dequeuniversity.com, github.com, www.w3.org