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

Požadavek WCAG A/AA Priorita: Kritické

Obrázkové tlačítko nemá textový popis

Tlačítko vytvořené z obrázku nemá textovou alternativu, takže není jasné, co dělá.

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í tlačítko pro vyhledávání, objednávku nebo přihlášení k odběru. To jim může znemožnit akci dokončit.

Koho se to týká

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

Jak to opravit

Přidejte ke každému <input type="image"> atribut alt, který popisuje akci, například alt="Hledat" nebo alt="Odeslat objednávku". Lepší je nahradit ho běžným <button> s textem nebo s aria-label.

V Shopify

V současných šablonách vzácné; obvykle jde o staré šablony nebo vlastní kód. Doplňte alt nebo nahraďte obrázkový vstup tlačítkem v Liquid šabloně.

V Shoptet (CZ)

Obvykle jde o starší šablony nebo vlastní kód. Požádejte podporu Shoptet nebo partnera o doplnění alt nebo o nahrazení běžným tlačítkem.

V PrestaShop

Obvykle jde o starší motivy nebo moduly. Doplňte atribut alt nebo prvek nahraďte <button> v šabloně .tpl.

V WooCommerce

Obvykle jde o starší šablony nebo pluginy. Doplňte atribut alt nebo prvek nahraďte <button> v šabloně podřízené šablony (child theme) či v nastavení pluginu.

Normy

Normy
NormaBod
WCAG 2.2 1.1.1 (A) Non-text Content
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 1.1.1 (A) Non-text Content
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 1.1.1 (A) Non-text Content
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.1.1.1
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.1.1.1
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.1.1
ДСТУ EN 301 549 2022 9.4.1.2

Automatická kontrola: pravidlo axe-core input-image-alt. dequeuniversity.com, github.com, www.w3.org, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme