Перейти к содержимому
Pandus

Требование 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

Все правила, которые мы проверяем