Кликабельное изображение работает только с мышью

На странице используется серверная карта изображения: изображение-ссылка, где сервер по точному месту клика решает, что открыть, например старая карта магазинов или кликабельная картинка каталога.

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

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

Пользователи клавиатуры и скринридеров не могут выбрать часть изображения, и ничто не подсказывает им, какие там области. Всё, что открывается этими кликами, для них недоступно.

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

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

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

Замените серверную карту изображения (<img ismap> внутри ссылки) обычными текстовыми ссылками или кнопками для каждого направления. Если нужна кликабельная картинка, используйте клиентскую карту (<map> с элементами <area>, у каждого есть alt-текст) или отдельные изображения-ссылки. Также помогает текстовый список тех же ссылок рядом с изображением.

В Shopify

Встречается очень редко: темы Shopify не используют этот приём. Если нашлось, ищите старый HTML, вставленный в страницу, или устаревшее приложение и замените его обычными ссылками.

В Shoptet (CZ)

Встречается очень редко: шаблоны этого не используют. Если нашлось, это HTML, вставленный в страницу; замените его обычными ссылками.

В PrestaShop

Встречается очень редко; обычно это старый HTML на CMS-странице или устаревший модуль. Замените его обычными ссылками в содержимом или в шаблоне .tpl модуля.

В WooCommerce

Встречается очень редко; обычно это старый HTML на странице, устаревший плагин или контент, перенесённый со старого сайта. Замените его обычными ссылками или плагином карт изображений, который выводит alt-текст для каждой области.

Стандарты

Стандарты
Стандарт	Пункт
WCAG 2.2	2.1.1 (A) Keyboard
WCAG 2.1	2.1.1 (A) Keyboard
WCAG 2.0	2.1.1 (A) Keyboard
EN 301 549 4.1.1	9.2.1.1
EN 301 549 3.2.1	9.2.1.1
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.2.1.1

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

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