Требование WCAG A/AA Приоритет: Критично
У кнопки-изображения нет текстового описания
У кнопки, сделанной из изображения, нет текстовой альтернативы, поэтому непонятно, что она делает.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи скринридеров и голосового управления не могут распознать кнопку поиска, заказа или подписки. Из-за этого они могут не завершить действие.
Кого это касается
- незрячие покупатели
- пользователи скринридеров
- пользователи голосового управления
Как исправить
Добавьте каждому <input type="image"> атрибут alt с названием действия, например alt="Поиск" или alt="Оформить заказ". Лучше замените его обычным <button> с текстом или aria-label.
В Shopify
В современных темах встречается редко; обычно это старые темы или собственный код. Добавьте alt или замените кнопку-изображение на button в Liquid-шаблоне.
В Shoptet (CZ)
Обычно это старые шаблоны или собственный код. Попросите 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
Похожие проверки
-
Атрибуты доступности стоят не на тех элементах
WCAG 4.1.2 A
-
Некоторые элементы используют несуществующую роль
WCAG 4.1.2 A
-
У некоторых встроенных файлов или медиа нет текстового описания
WCAG 1.1.1 A
-
У кнопки-изображения нет текстового описания
WCAG 1.1.1 A