Кнопка-зображення не має текстового опису

Кнопка, зроблена із зображення, не має текстової альтернативи, тому незрозуміло, що вона робить.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Користувачі програм зчитування з екрана та голосового керування не можуть розпізнати кнопку пошуку, замовлення чи підписки. Через це вони можуть не завершити дію.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
користувачі голосового керування

Як виправити

Додайте до кожного <input type="image"> атрибут alt, який називає дію, наприклад alt="Пошук" або alt="Оформити замовлення". Краще замініть його на звичайний <button> з текстом або aria-label.

У Shopify

У сучасних темах трапляється рідко; зазвичай це старі теми або власний код. Додайте alt-текст або замініть кнопку-зображення на <button> у шаблоні Liquid.

У Shoptet (CZ)

Зазвичай це старіші шаблони або власний код. Попросіть Shoptet або партнера Shoptet додати alt-текст або замінити елемент на звичайну кнопку.

У PrestaShop

Зазвичай це старіші теми чи модулі. Додайте атрибут alt або замініть елемент на <button> у шаблоні .tpl.

У WooCommerce

Зазвичай це старі теми чи плагіни. Додайте атрибут alt або замініть елемент на <button> у шаблоні дочірньої теми чи в налаштуваннях плагіна.

Стандарти

Стандарти
Стандарт	Пункт
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

Автоматична перевірка: правило axe-core input-image-alt. dequeuniversity.com, github.com, www.w3.org, www.w3.org

Усі правила, які ми перевіряємо