Wymaganie WCAG A/AA Priorytet: Umiarkowane · test eksperymentalny: warto sprawdzić ręcznie

Niektóre nagłówki to tylko pogrubiony lub duży tekst

Niektóre akapity wyglądają jak nagłówki, bo są pogrubione, pochylone lub większe, ale w kodzie to zwykły tekst, a nie prawdziwe nagłówki.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Niewidomi klienci często przechodzą od nagłówka do nagłówka, aby znaleźć sekcje takie jak „Opis”, „Dostawa” czy „Opinie”. Udawane nagłówki są dla tej nawigacji niewidoczne, więc muszą wysłuchać całej strony i mogą przeoczyć ważne informacje.

Kogo to dotyczy

niewidomi klienci
użytkownicy czytników ekranu
osoby nawigujące skrótami klawiszowymi

Jak to naprawić

Zamień tekst pełniący rolę tytułu sekcji na prawdziwy nagłówek (<h2>, <h3> itd.) w logicznej kolejności, a wygląd ustaw w CSS. W edytorach wybieraj „Nagłówek 2” lub „Nagłówek 3” z menu formatowania zamiast pogrubiać lub powiększać tekst. Jeśli tekst nie jest nagłówkiem, zostaw go jako akapit: axe oznacza tę kontrolę jako eksperymentalną i czasem zgłasza pogrubione zdania wstępu.

W Shopify

Zwykle w opisach produktów, stronach lub wpisach na blogu. W edytorze tekstu sformatowanego zaznacz tekst i wybierz format nagłówka zamiast pogrubienia; w sekcjach motywu używaj bloku nagłówka, jeśli motyw go oferuje.

W Shoptet (CZ)

Zwykle w opisach produktów lub artykułach. Wybierz w edytorze format nagłówka zamiast pogrubienia lub popraw HTML w widoku kodu źródłowego.

W PrestaShop

Zwykle w opisach produktów lub stronach CMS. Wybierz format nagłówka na pasku narzędzi edytora lub popraw HTML w widoku kodu źródłowego.

W WooCommerce

Zwykle w opisach produktów lub treściach z page buildera. Użyj bloku „Nagłówek” w edytorze blokowym lub widżetu nagłówka w page builderze zamiast pogrubionego akapitu.

Normy

Normy
Norma	Punkt
WCAG 2.2	1.3.1 (A) Info and Relationships
WCAG 2.1	1.3.1 (A) Info and Relationships
WCAG 2.0	1.3.1 (A) Info and Relationships
EN 301 549 4.1.1	9.1.3.1
EN 301 549 3.2.1	9.1.3.1
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.1.3.1

Automatyczny test: reguła axe-core p-as-heading. dequeuniversity.com, github.com, www.w3.org

Atrybuty dostępności użyte w niewłaściwych elementach
WCAG 4.1.2 A
Niektóre elementy mają rolę, która nie istnieje
WCAG 4.1.2 A
Niektóre osadzone pliki lub multimedia nie mają opisu tekstowego
WCAG 1.1.1 A
Niektóre etykiety wskazują niewłaściwy element
WCAG 4.1.2 A

Wszystkie reguły, które sprawdzamy