Клікабельне зображення працює лише з мишею

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

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Користувачі клавіатури та програм зчитування з екрана не можуть вибрати частину зображення, і ніщо не підказує їм, що це за частини. Усе, що відкривається цими кліками, для них недоступне.

Кого це стосується

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

Як виправити

Замініть серверну карту зображення (<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

Усі правила, які ми перевіряємо