У кликабельных областей изображения нет описания

На странице есть карта изображения (одна картинка, разделённая на несколько кликабельных областей), и у некоторых областей нет текста, который говорит, куда они ведут.

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

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

Пользователи скринридеров слышат только «ссылка» или адрес файла, например на баннере со ссылками на разные категории или на таблице размеров, разбитой на зоны. Они не могут выбрать нужную область и могут пропустить акции или страницы товаров.

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

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

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

Добавьте каждому элементу <area> с атрибутом href короткий alt, который называет место перехода, например alt="Женская обувь". Ещё лучше заменить карту изображения обычными ссылками или кнопками над картинкой или под ней: они к тому же удобнее на мобильных.

В Shopify

В темах Shopify встречается редко. Обычно это старый HTML, вставленный в страницу, запись блога или описание товара, либо приложение для карт изображений. Отредактируйте HTML в визуальном редакторе или попросите разработчика приложения добавить alt каждой области.

В Shoptet (CZ)

В шаблонах Shoptet встречается редко. Обычно это HTML, вставленный в страницу или описание в админке; добавьте alt там или обратитесь к партнёру Shoptet, если код является частью шаблона.

В PrestaShop

Обычно это HTML, вставленный в CMS-страницы или описания товаров, либо модуль баннеров. Добавьте alt каждому <area> в редакторе панели администратора или в шаблоне модуля.

В WooCommerce

Обычно это старый HTML на страницах или в описаниях товаров либо плагин для карт изображений или «горячих точек». Добавьте alt каждой области в редакторе или настройках плагина либо сообщите автору плагина.

Стандарты

Стандарты
Стандарт	Пункт
WCAG 2.2	2.4.4 (A) Link Purpose (In Context)
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	2.4.4 (A) Link Purpose (In Context)
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	2.4.4 (A) Link Purpose (In Context)
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.2.4.4
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.2.4.4
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.2.4.4
ДСТУ EN 301 549 2022	9.4.1.2

Автоматическая проверка: правило axe-core area-alt. dequeuniversity.com, github.com, www.w3.org, www.w3.org

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