Zalecana praktyka Priorytet: Umiarkowane
Strona nie ma głównego nagłówka
Strona nie ma nagłówka najwyższego poziomu (H1), który nazywa jej temat, na przykład nazwy produktu lub kategorii. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Wielu użytkowników czytników ekranu jednym klawiszem przechodzi do głównego nagłówka, aby dowiedzieć się, gdzie są. Bez niego muszą zgadywać na podstawie menu i banerów, czy trafili na właściwy produkt lub kategorię. Wyraźny H1 pomaga też wyszukiwarkom zrozumieć stronę.
Kogo to dotyczy
- osoby niewidome korzystające z czytników ekranu
- osoby z niepełnosprawnością poznawczą
- osoby przeglądające strony za pomocą narzędzi do czytania
Jak to naprawić
Nadaj każdej stronie jeden <h1> opisujący jej treść: nazwę produktu na stronach produktów, nazwę kategorii na stronach kategorii, „Koszyk” lub „Kasa” na tych krokach. Użyj prawdziwego <h1> (a nie tylko dużego pogrubionego tekstu) i nie rób z logo nagłówka H1 na każdej stronie. W razie potrzeby zachowaj wygląd za pomocą CSS.
W Shopify
Zwykle tytuł produktu, kolekcji lub strony w plikach sekcji motywu jest w <div> lub <h2>. Zmień go na <h1> w odpowiedniej sekcji; na stronie głównej dodaj h1 lub ustaw pierwszy blok nagłówka jako H1, jeśli motyw na to pozwala.
W Shoptet (CZ)
Zwykle nazwy produktów i kategorii są już H1; często brakuje go na stronie głównej lub stronach własnych. Dodaj nagłówek w edytorze treści strony lub zapytaj Shoptet albo partnera o szablon.
W PrestaShop
Zwykle nazwa produktu lub kategorii w szablonach .tpl motywu nie jest w <h1>. Zmień znacznik w szablonach produktu i kategorii motywu lub motywu potomnego.
W WooCommerce
Zwykle motyw lub kreator stron ukrywa tytuł strony albo używa niższego poziomu. Włącz ponownie tytuł lub ustaw poziom H1 dla bloku nagłówka w kreatorze; w motywie potomnym sprawdź szablony WooCommerce dla tytułów produktów i archiwów.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core page-has-heading-one.
dequeuniversity.com, github.com, www.w3.org