Přejít na obsah
Pandus

Požadavek WCAG A/AA Priorita: Kritické

Rozbalovací seznam nemá popisek

Rozbalovací seznam nemá popisek, který by asistenční technologie dokázaly přečíst.

Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.

Proč na tom záleží vašim zákazníkům

Uživatelé čteček obrazovky uslyší jen „pole se seznamem“ a nevědí, zda vybírají velikost, barvu, množství nebo zemi. To jim může zabránit vybrat variantu produktu nebo dokončit objednávku.

Koho se to týká

  • nevidomí zákazníci
  • uživatelé čteček obrazovky
  • uživatelé hlasového ovládání
  • lidé s kognitivními obtížemi

Jak to opravit

Propojte s každým <select> viditelný <label for>, nebo použijte aria-labelledby odkazující na viditelný text. aria-label použijte jen tam, kde viditelný popisek nejde. Zkontrolujte výběr variant, řazení a výběr země.

V Shopify

Obvykle jde o výběr variant, řazení nebo přepínače měny a jazyka v šabloně. Doplňte popisky ve snippetech Liquid šablony; výběry z aplikací musí opravit vývojář aplikace.

V Shoptet (CZ)

Obvykle jde o výběr variant nebo řazení v šabloně. Požádejte podporu Shoptet nebo partnera o doplnění popisků v kódu šablony.

V PrestaShop

Obvykle jde o výběr atributů produktu, řazení nebo pole země. Doplňte popisky v šablonách .tpl motivu nebo v přepsaných šablonách modulů.

V WooCommerce

Obvykle jde o výběr variant, rozbalovací řazení nebo widgety pluginů. Doplňte popisky v šablonách podřízené šablony (child theme), nebo použijte nastavení pluginu, které vypisuje správné popisky.

Normy

Normy
NormaBod
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

Automatická kontrola: pravidlo axe-core select-name. dequeuniversity.com, github.com, www.w3.org

Všechna pravidla, která kontrolujeme