Zalecana praktyka Priorytet: Umiarkowane
Strona ma więcej niż jeden nagłówek serwisu
Strona zawiera dwa lub więcej obszarów nagłówka („banner”), na przykład zwykły nagłówek oraz osobną kopię przyklejaną lub mobilną albo pasek promocyjny oznaczony jako banner. 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 i oczekują dokładnie jednego rozdziału nagłówka z logo, wyszukiwarką, kontem i koszykiem. Gdy nagłówków jest kilka, słyszą go na liście wielokrotnie, nie wiedzą, który jest właściwy, i mogą dwa razy przechodzić przez te same linki i przycisk koszyka.
Kogo to dotyczy
- użytkownicy czytników ekranu
- niewidomi klienci
- osoby korzystające z czytnika ekranu na telefonie
Jak to naprawić
Zostaw na stronie tylko jeden <header> najwyższego poziomu lub role="banner". Jeśli motyw wyświetla osobne nagłówki na komputer i telefon albo kopiuje nagłówek do przyklejanego paska, zamień kopię na zwykły <div> lub ukryj nieaktywną wersję dla wszystkich przez display:none albo atrybut hidden. Usuń role="banner" z grafik w hero i pasków ogłoszeń: baner marketingowy to nie punkt orientacyjny banner.
W Shopify
Zwykle przyczyną jest pasek ogłoszeń, kopia przyklejanego nagłówka lub aplikacja dodająca własny <header> albo role="banner". Sprawdź grupę sekcji nagłówka i layout/theme.liquid i zamień dodatkowy element na <div>; w przypadku kodu aplikacji zwróć się do jej twórcy.
W Shoptet (CZ)
Zależy od szablonu, który może wyświetlać osobne nagłówki na komputer i telefon. Sprawdź, czy nowsza wersja szablonu to poprawia; w przeciwnym razie zgłoś to Shoptet lub partnerowi.
W PrestaShop
Zwykle moduł (mega menu, slider banerów lub przyklejany nagłówek) dodaje drugi <header> lub role="banner". Nadpisz szablon modułu w swoim motywie i zastąp go elementem <div>.
W WooCommerce
Page buildery często generują osobne nagłówki na komputer, telefon i przyklejany pasek, a wszystkie są elementami <header>. Zmień tag HTML dodatkowych nagłówków na <div>, jeśli builder na to pozwala, lub popraw header.php motywu potomnego.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core landmark-no-duplicate-banner.
dequeuniversity.com, github.com, www.w3.org