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

Požadavek WCAG A/AA Priorita: Kritické

Některá tlačítka formulářů nemají název

Některá tlačítka vytvořená pomocí <input type="button">, "submit" nebo "reset" nemají čitelný text, například tlačítko vyhledávání nebo přihlášení k newsletteru jen s ikonou či prázdnou hodnotou value.

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 a hlasového ovládání nepoznají, co tlačítko dělá: vyhledává, přihlašuje k odběru, uplatňuje slevový kód, nebo odesílá formulář. Mohou ho přeskočit nebo stisknout nesprávné, a tak nenajdou zboží nebo nedokončí krok.

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 tlačítku typu input název. Obvykle stačí výstižný atribut value, například value="Hledat" nebo value="Uplatnit kód". U ikonových tlačítek doplňte aria-label nebo input nahraďte prvkem <button> s viditelným či vizuálně skrytým textem. Nenechávejte value prázdné a nespoléhejte na obrázek na pozadí ani na atribut title.

V Shopify

Obvykle tlačítko vyhledávání nebo newsletteru v šabloně, upravené jako ikona s prázdnou hodnotou value, nebo tlačítka vložená aplikacemi. Doplňte value nebo aria-label ve snippetech Liquid šablony; tlačítka aplikací ať opraví jejich vývojáři.

V Shoptet (CZ)

Obvykle ve formuláři vyhledávání nebo newsletteru v šabloně, případně ve vlastních formulářích. Nejprve opravte vlastní kód; kvůli šabloně se zeptejte Shoptetu nebo partnera Shoptet, zda novější verze tato tlačítka popisuje.

V PrestaShop

Obvykle v modulech vyhledávání, newsletteru nebo slevových kupónů, jejichž šablony .tpl používají ikonový input s prázdnou hodnotou value. Doplňte value nebo aria-label v motivu nebo v přepsaných šablonách modulů.

V WooCommerce

Časté ve widgetech vyhledávání, formulářích newsletteru, polích slevového kódu a pluginech formulářů, které vypisují <input type="submit" value="">. Nastavte text tlačítka v nastavení widgetu či pluginu, nebo opravte šablonu podřízené šablony (child theme); tlačítka pluginů nahlaste autorovi pluginu.

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 input-button-name. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme