Požadavek WCAG A/AA Priorita: Kritické

Vlastní vstupní pole nemají popisek

Některá pole vytvořená na míru, například vyhledávání nebo výběr země, nemají název, 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 nevědí, k čemu pole slouží, a nemusí se jim podařit vyhledat produkt nebo vyplnit adresu.

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 prvku se vstupní rolí (combobox, textbox, searchbox, listbox, slider, spinbutton) název pomocí aria-labelledby odkazujícího na viditelný text, nebo pomocí aria-label. Ještě lepší je použít nativní <input> nebo <select> s <label>.

V Shopify

Obvykle jde o našeptávač vyhledávání, filtry nebo widgety aplikací. Opravte popisky v Liquid a JavaScriptu šablony; widgety aplikací nahlaste vývojáři.

V Shoptet (CZ)

Obvykle jde o vyhledávání nebo filtry v šabloně. Nahlaste to podpoře Shoptet nebo partnerovi.

V PrestaShop

Obvykle jde o moduly vyhledávání nebo filtrů. Doplňte popisky v přepsaných šablonách modulů, nebo to nahlaste vývojáři modulu.

V WooCommerce

Obvykle jde o pluginy pro vyhledávání, filtry nebo doplňování adres. Popisky doplňte v nastavení pluginu nebo v kódu podřízené šablony (child theme), případně to nahlaste autorovi pluginu.

Normy

Normy
Norma	Bod
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 aria-input-field-name. dequeuniversity.com, github.com, www.w3.org

Rozbalovací seznam nemá popisek
WCAG 4.1.2 A
Návštěvníci si nemohou stránku na mobilu přiblížit
WCAG 1.4.4 AA
Obrázkové tlačítko nemá textový popis
WCAG 1.1.1 A
Seznam je sestavený nesprávně
WCAG 1.3.1 A

Všechna pravidla, která kontrolujeme