Wymaganie WCAG A/AA Priorytet: Drobne
Lista nazw i wartości jest zbudowana nieprawidłowo
Lista opisowa (<dl>), często używana do parametrów produktu lub wybranych opcji, zawiera elementy w złym miejscu lub w złej kolejności.
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 mogą nie usłyszeć, która wartość należy do której nazwy, np. która liczba to waga, a która rozmiar, przez co trudniej zrozumieć szczegóły produktu.
Kogo to dotyczy
- osoby korzystające z czytników ekranu
Jak to naprawić
Wewnątrz <dl> należy umieszczać tylko grupy <dt> (nazwa) i <dd> (wartość) w tej kolejności: każda grupa zaczyna się od jednego lub kilku <dt>, po których następuje jeden lub kilka <dd>. Całą grupę można objąć elementem <div>; dozwolone są też <script> i <template>. Inne elementy należy przenieść do środka <dt> lub <dd>.
W Shopify
Rzadziej; zwykle we własnych sekcjach parametrów, blokach metapól lub kodzie aplikacji. Strukturę należy poprawić w sekcjach lub fragmentach Liquid motywu.
W Shoptet (CZ)
Parametry produktu generuje szablon. Warto zgłosić to do Shoptet lub partnera Shoptet.
W PrestaShop
Motywy często pokazują cechy produktu jako <dl>; w zmodyfikowanych motywach struktura może być uszkodzona. Kod należy poprawić w plikach .tpl strony produktu w motywie.
W WooCommerce
WooCommerce pokazuje wybrane opcje produktu w koszyku i szczegółach zamówienia jako <dl>; motywy lub wtyczki nadpisujące te szablony mogą zepsuć strukturę. Należy to poprawić w szablonie motywu potomnego lub zgłosić autorowi wtyczki.
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 definition-list.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Niektóre komórki tabeli wskazują niewłaściwe nagłówki
WCAG 1.3.1 A
-
Ustawienie języka strony jest nieprawidłowe
WCAG 3.1.1 A
-
Niestandardowe menu lub listy są zbudowane nieprawidłowo
WCAG 1.3.1 A
-
Niektóre rozwijane sekcje nie mają nazwy
WCAG 4.1.2 A