Wymaganie WCAG A/AA Priorytet: Poważne

Niektóre rozwijane sekcje nie mają nazwy

Klikalny nagłówek rozwijanej sekcji (element <summary>) nie ma czytelnego tekstu, np. akordeon ze szczegółami produktu, grupa filtrów, pytanie w FAQ lub menu otwierane ikoną.

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 słyszą tylko, że coś można rozwinąć, ale nie co. Mogą nie znaleźć menu mobilnego, filtrów ani informacji o dostawie i rozmiarach.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby sterujące urządzeniem za pomocą głosu

Jak to naprawić

Każdy element <summary> powinien mieć widoczny tekst opisujący sekcję, np. „Dostawa i zwroty” lub „Menu”. Jeśli summary zawiera tylko ikonę, należy dodać do niego aria-label lub wizualnie ukryty tekst, a samą ikonę oznaczyć jako dekoracyjną za pomocą aria-hidden="true".

W Shopify

Często: wiele obecnych motywów używa <details> i <summary> do menu mobilnego, wyszukiwarki, filtrów i akordeonów produktu. Warto sprawdzić pliki Liquid nagłówka i sekcji produktu pod kątem summary zawierających tylko ikonę oraz upewnić się, że każdy blok akordeonu ma uzupełniony nagłówek.

W Shoptet (CZ)

Może występować w szablonach lub we własnym HTML z rozwijanymi sekcjami. Warto sprawdzić, czy nowsza wersja szablonu to poprawia; jeśli nie, można poprosić Shoptet lub partnera Shoptet o dodanie etykiet.

W PrestaShop

Występuje, gdy motyw lub moduły używają <details> do menu, filtrów lub zakładek produktu. Należy dodać tekst lub aria-label do <summary> w szablonach .tpl motywu albo w nadpisanych szablonach modułów.

W WooCommerce

Rzadziej; występuje w motywach, blokach FAQ lub akordeonów i widżetach kreatorów stron, które używają <details>. Należy uzupełnić tytuł bloku lub dodać aria-label w szablonie motywu potomnego; problemy z wtyczką warto zgłosić jej autorowi.

Normy

Normy
Norma	Punkt
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Automatyczny test: reguła axe-core summary-name. dequeuniversity.com, github.com, www.w3.org

Cała strona jest ukryta przed czytnikami ekranu
WCAG 1.3.1 A
Atrybuty dostępności użyto w niewłaściwej sytuacji
WCAG 4.1.2 A
Pola formularza nie mają etykiet
WCAG 4.1.2 A
Niektóre paski postępu nie mają nazwy
WCAG 1.1.1 A

Wszystkie reguły, które sprawdzamy