У некоторых кнопок нет названия

У некоторых кнопок нет читаемой подписи, например у кнопок-иконок «в корзину», поиска или меню.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Пользователи скринридеров и голосового управления не понимают, какая кнопка добавляет товар в корзину, открывает меню или запускает поиск. Из-за этого они могут вообще не суметь купить.

Кого это касается

незрячие покупатели
пользователи скринридеров
пользователи голосового управления

Как исправить

Дайте каждой кнопке название: видимый текст, aria-label или aria-labelledby со ссылкой на видимый текст. Кнопкам только с иконкой нужен aria-label, например «Добавить в корзину» или «Закрыть». Не полагайтесь на атрибут title или иконки только на CSS.

В Shopify

Обычно это кнопки-иконки темы (меню, поиск, количество, закрыть) или кнопки, которые добавляют приложения. Добавьте подписи в Liquid-сниппетах темы; кнопки приложений попросите исправить их разработчиков.

В Shoptet (CZ)

Обычно это кнопки-иконки шаблона. Проверьте, есть ли новая версия шаблона с подписями; если нет, попросите Shoptet или партнёра изменить код шаблона.

В PrestaShop

Обычно это кнопки-иконки темы или модулей (корзина, поиск, меню). Добавьте aria-label в шаблонах .tpl темы или в переопределённых шаблонах модулей.

В WooCommerce

Часто встречается в темах, конструкторах страниц и плагинах корзины или избранного. Добавьте подписи в шаблонах дочерней темы или в настройках плагина; о кнопках плагинов без названия сообщите автору плагина.

Стандарты

Стандарты
Стандарт	Пункт
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 button-name. dequeuniversity.com, github.com, www.w3.org

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