Przejdź do treści
Pandus
pl Zmień język
Menu

Wymaganie WCAG A/AA Priorytet: Krytyczne

Lista rozwijana nie ma etykiety

Lista rozwijana nie ma etykiety, którą mogą odczytać technologie wspomagające.

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 „pole kombi” i nie wiedzą, czy wybierają rozmiar, kolor, ilość czy kraj. Może to uniemożliwić wybór wariantu produktu lub złożenie zamówienia.

Kogo to dotyczy

  • niewidomi klienci
  • osoby korzystające z czytników ekranu
  • osoby sterujące urządzeniem za pomocą głosu
  • osoby z niepełnosprawnością intelektualną lub trudnościami poznawczymi

Jak to naprawić

Połącz widoczną etykietę <label for> z każdym <select> albo użyj aria-labelledby wskazującego na widoczny tekst. aria-label stosuj tylko wtedy, gdy widoczna etykieta nie jest możliwa. Sprawdź wybór wariantów, sortowanie i wybór kraju.

W Shopify

Zwykle wybór wariantów, sortowanie lub przełączniki waluty i języka w motywie. Dodaj etykiety we fragmentach Liquid motywu; listy dodane przez aplikacje musi poprawić ich twórca.

W Shoptet (CZ)

Zwykle wybór wariantów lub sortowania w szablonie. Poproś Shoptet lub partnera Shoptet o dodanie etykiet w kodzie szablonu.

W PrestaShop

Zwykle wybór atrybutów produktu, sortowanie lub pola kraju. Dodaj etykiety w szablonach .tpl motywu lub nadpisanych szablonach modułów.

W WooCommerce

Zwykle wybór wariantów, listy sortowania lub widżety wtyczek. Dodaj etykiety w szablonach motywu potomnego lub użyj ustawień wtyczki, które generują poprawne etykiety.

Normy

Normy
NormaPunkt
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 select-name. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy