Деякі кнопки форм не мають назви

Деякі кнопки, створені через <input type="button">, "submit" чи "reset", не мають тексту, який можна прочитати, наприклад кнопка пошуку чи підписки на розсилку лише з іконкою або порожнім value.

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

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

Користувачі програм зчитування з екрана та голосового керування не розуміють, що робить кнопка: шукає, підписує, застосовує промокод чи надсилає форму. Вони можуть її пропустити або натиснути не ту, тож не знайдуть товар чи не завершать крок.

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

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

Як виправити

Дайте кожній кнопці-input назву. Зазвичай це змістовний атрибут value, наприклад value="Шукати" або value="Застосувати промокод". Для кнопок-іконок додайте aria-label або замініть input на <button> із видимим чи візуально прихованим текстом. Не залишайте value порожнім і не покладайтеся на фонове зображення чи атрибут title.

У Shopify

Зазвичай це кнопка пошуку чи підписки в темі, оформлена як іконка з порожнім value, або кнопки, які додають застосунки. Додайте value чи aria-label у сніпетах Liquid теми; попросіть розробників застосунків виправити їхні кнопки.

У Shoptet (CZ)

Зазвичай у формі пошуку чи розсилки шаблону або у власних формах. Спершу виправте власний код; щодо шаблону запитайте Shoptet або партнера Shoptet, чи є новіша версія шаблону з підписаними кнопками.

У PrestaShop

Зазвичай у модулях пошуку, розсилки чи ваучерів, шаблони .tpl яких використовують input-іконку з порожнім value. Додайте value чи aria-label у темі або в перевизначених шаблонах модулів.

У WooCommerce

Часто трапляється у віджетах пошуку, формах розсилки, полях промокоду та плагінах форм, що виводять <input type="submit" value="">. Задайте текст кнопки в налаштуваннях віджета чи плагіна або виправте шаблон дочірньої теми; про кнопки плагінів повідомте автора плагіна.

Стандарти

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

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

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