Doporučený postup Priorita: Závažné
Pole formuláře nemají viditelný popisek
Některá pole formuláře jsou pojmenována jen nápovědou (atribut title), skrytým popisem nebo skrytým popiskem, takže na obrazovce žádný popisek není. Jde o doporučený postup nad rámec úrovně WCAG 2.2 AA, o kterou se opírají zákony o přístupnosti.
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
Zákazníci vidí prázdné pole a musí hádat, zda se čeká telefon, PSČ, nebo slevový kód. Nápověda se zobrazí jen po najetí myší, nikdy na telefonu, a placeholder zmizí, jakmile člověk začne psát. Lidé ovládající web hlasem nemohou vyslovit název pole, který nevidí.
Koho se to týká
- lidé s kognitivními obtížemi nebo potížemi s pamětí
- starší zákazníci
- uživatelé hlasového ovládání
- zákazníci na chytrých telefonech
Jak to opravit
Každému input, select a textarea dejte viditelný <label> propojený přes for a id, nebo pole vložte do popisku. Nepoužívejte atribut title, aria-describedby ani vizuálně skrytý popisek jako jediný název a placeholder nepovažujte za popisek. U kompaktních polí, jako je vyhledávání nebo newsletter, ponechte krátký viditelný popisek vedle pole.
V Shopify
Obvykle jde o formuláře newsletteru, vyhledávání nebo vlastní kontaktní formuláře v sekcích či snippetech šablony, kde je popisek skrytý a vidět je jen placeholder. Zobrazte popisek v Liquid a CSS dané sekce; u formulářů z aplikací se obraťte na vývojáře aplikace.
V Shoptet (CZ)
Záleží na šabloně. Zkontrolujte nastavení šablony nebo její novější verzi; pokud popisek existuje, ale je skrytý, lze ho zobrazit vlastním CSS přes možnosti vlastního kódu v Shoptetu. Jinak se obraťte na Shoptet nebo partnera.
V PrestaShop
Obvykle jde o šablony modulů newsletteru, vyhledávání nebo kontaktu. Přepište .tpl soubor modulu ve své šabloně a zobrazte skutečný popisek místo placeholderu nebo title.
V WooCommerce
Obvykle za tím stojí šablona, plugin formulářů nebo page builder, který popisky skrývá kvůli minimalistickému vzhledu. Zapněte popisky v nastavení pluginu formulářů, nebo je zobrazte přes šablony či CSS podřízené šablony.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core label-title-only.
dequeuniversity.com, github.com, www.w3.org