Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Požadavek WCAG A/AA Priorita: Střední

Některá pole formulářů mají více popisků

Pole formuláře, například e-mail, množství nebo adresa, je propojeno se dvěma či více prvky <label>.

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

Čtečky obrazovky to zpracují různě: některé přečtou jen první popisek, jiné všechny, další jen poslední. Uživatelé hlasového ovládání nemusí vědět, jaká slova říct, aby se do pole dostali. Ve formuláři objednávky nebo registrace to zpomaluje vyplňování a vede k chybám.

Koho se to týká

  • nevidomí zákazníci
  • uživatelé čteček obrazovky
  • uživatelé hlasového ovládání

Jak to opravit

Dejte každému poli právě jeden <label>. Potřebujete-li další text, například nápovědu nebo ukázku formátu, propojte jej přes aria-describedby, ne druhým popiskem. Ověřte, zda vedle viditelného popisku není skrytý duplikát přidaný šablonou nebo pluginem.

V Shopify

Ve výchozích šablonách vzácné; obvykle jde o úpravy šablony nebo aplikace formulářů, které přidají vlastní popisek vedle popisku šablony. Odstraňte duplikát ve snippetu Liquid nebo v nastavení aplikace.

V Shoptet (CZ)

Ve standardní šabloně vzácné; obvykle jde o vlastní kód nebo formuláře třetích stran. Nejprve opravte vlastní kód; kvůli šabloně se obraťte na Shoptet nebo partnera Shoptet.

V PrestaShop

Obvykle v upravených šablonách formulářů .tpl nebo v modulech s vlastními popisky (newsletter, pole objednávky). V motivu nebo v přepsaných šablonách modulů ponechte jeden popisek na pole.

V WooCommerce

Často jej způsobují pluginy formulářů, editory polí pokladny nebo page buildery, které přidají druhý popisek vedle popisku šablony. Zkontrolujte nastavení pole nebo šablony pluginu a ponechte jeden popisek na pole.

Normy

Normy
NormaBod
WCAG 2.2 3.3.2 (A) Labels or Instructions
WCAG 2.1 3.3.2 (A) Labels or Instructions
WCAG 2.0 3.3.2 (A) Labels or Instructions
EN 301 549 4.1.1 9.3.3.2
EN 301 549 3.2.1 9.3.3.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.3.3.2

Automatická kontrola: pravidlo axe-core form-field-multiple-labels. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme