Wymaganie WCAG A/AA Priorytet: Drobne
Lista jest zbudowana nieprawidłowo
Lista punktowana lub numerowana zawiera elementy, które nie powinny znajdować się bezpośrednio w liście.
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ą usłyszeć złą liczbę pozycji lub stracić strukturę listy w menu, filtrach czy cechach produktu, przez co trudniej przejrzeć stronę.
Kogo to dotyczy
- osoby korzystające z czytników ekranu
Jak to naprawić
Wewnątrz <ul> i <ol> umieszczaj tylko elementy <li> (oraz <script> lub <template>). Elementy opakowujące, np. <div>, przenieś do środka <li>, a nie wokół niego. Sprawdź menu, filtry i stopki.
W Shopify
Zwykle w menu lub sekcjach motywu albo w kodzie dodanym przez aplikacje. Popraw strukturę listy w sekcjach lub fragmentach Liquid motywu.
W Shoptet (CZ)
Zwykle w menu lub stopce szablonu. Zgłoś problem do Shoptet lub partnera Shoptet, ponieważ kod jest częścią szablonu.
W PrestaShop
Zwykle w menu motywu lub modułach, np. stopki czy wyszukiwania fasetowego. Popraw kod w plikach .tpl motywu lub nadpisanych szablonach modułów.
W WooCommerce
Zwykle w menu, widżetach motywu lub blokach kreatora stron. Popraw kod w szablonach motywu potomnego lub ustawieniach widżetu w kreatorze.
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 list.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Przyciski i linki są za małe, by wygodnie je dotknąć
WCAG 2.5.8 AA
-
Klikalny obraz działa tylko z myszą
WCAG 2.1.1 A
-
Niektóre grafiki wektorowe nie mają opisu tekstowego
WCAG 1.1.1 A
-
Nazwa lub wartość znajduje się poza swoją listą
WCAG 1.3.1 A