Перейти до вмісту
Pandus
uk Змінити мову
Меню

Вимога WCAG A/AA Пріоритет: Серйозно

Клікабельні ділянки зображення не мають опису

На сторінці є карта зображення (одна картинка, поділена на кілька клікабельних ділянок), і деякі ділянки не мають тексту, який пояснює, куди вони ведуть.

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

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

Користувачі програм зчитування з екрана чують лише «посилання» або адресу файлу, наприклад на банері з посиланнями на різні категорії чи на таблиці розмірів, поділеній на зони. Вони не можуть вибрати потрібну ділянку й можуть пропустити акції чи сторінки товарів.

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

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

Як виправити

Додайте кожному елементу <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

Схожі перевірки

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