Zalecana praktyka Priorytet: Umiarkowane
Poziomy nagłówków przeskakują
Nagłówki na stronie przeskakują poziomy, np. z <h2> od razu do <h4>, przez co w strukturze strony powstają luki. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby korzystające z czytników ekranu często poznają stronę po nagłówkach, jak po spisie treści. Pominięte poziomy sprawiają wrażenie, że brakuje sekcji, i utrudniają zrozumienie, jak opis produktu, opinie i informacje o dostawie łączą się ze sobą.
Kogo to dotyczy
- użytkownicy czytników ekranu
- osoby nawigujące po nagłówkach
- osoby z niepełnosprawnościami poznawczymi
Jak to naprawić
Używaj poziomów nagłówków do budowania struktury, a nie do ustawiania rozmiaru tekstu: jeden <h1> dla głównego tematu, <h2> dla głównych sekcji, <h3> wewnątrz nich i tak dalej, bez przeskakiwania. Jeśli nagłówek ma wyglądać na mniejszy lub większy, zmień jego styl w CSS, a nie poziom. Sprawdź powtarzające się bloki, takie jak karty produktów, paski boczne i stopka, które często mają stały poziom.
W Shopify
Poziomy nagłówków są zwykle zapisane na stałe w sekcjach i snippetach motywu, np. w kartach produktów lub tytułach stopki. Zmień znaczniki w plikach Liquid; ustawienie rozmiaru nagłówka w edytorze motywu zwykle zmienia tylko wygląd, a nie poziom.
W Shoptet (CZ)
Zależy głównie od szablonu; poziomami sterujesz tylko we własnych treściach. Używaj formatów nagłówków w edytorze po kolei, a problemy z szablonem zgłaszaj do Shoptet lub partnera.
W PrestaShop
Poziomy są ustawione w plikach .tpl motywu i w modułach, takich jak listy produktów i bloki stopki. Nadpisz szablony w swoim motywie, aby poziomy następowały po kolei.
W WooCommerce
Ustaw właściwy poziom w edytorze bloków lub kreatorze stron; większość widżetów nagłówka ma opcję poziomu niezależną od rozmiaru. Tytuły widżetów motywu i nazwy produktów na listach mogą wymagać zmiany w motywie potomnym.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core heading-order.
dequeuniversity.com, github.com, www.w3.org