Деякі векторні зображення не мають текстового опису

Деякі SVG-зображення, наприклад логотипи, іконки чи значки, позначені як зображення, але не мають текстової альтернативи.

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

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

Користувачі програм зчитування з екрана не чують нічого корисного про таке зображення, тож можуть пропустити значок, логотип платіжної системи чи значення іконки.

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

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

Як виправити

Для <svg> з role="img" додайте <title> першим дочірнім елементом або використайте aria-label чи aria-labelledby. Якщо зображення декоративне, приберіть role="img" і додайте aria-hidden="true".

У Shopify

Зазвичай це сніпети іконок у темі або віджети застосунків. Додайте title чи aria-label у SVG-сніпетах теми; про іконки застосунків повідомте розробника.

У Shoptet (CZ)

Зазвичай це іконки чи логотипи шаблону. Зверніться до Shoptet або до партнера Shoptet.

У PrestaShop

Зазвичай це іконки теми чи модулів. Додайте назви в шаблонах .tpl теми або у файлах SVG.

У WooCommerce

Зазвичай це іконки теми, завантажені логотипи чи плагіни іконок. Додайте назви в шаблонах дочірньої теми або в налаштуваннях плагіна.

Стандарти

Стандарти
Стандарт	Пункт
WCAG 2.2	1.1.1 (A) Non-text Content
WCAG 2.1	1.1.1 (A) Non-text Content
WCAG 2.0	1.1.1 (A) Non-text Content
EN 301 549 4.1.1	9.1.1.1
EN 301 549 3.2.1	9.1.1.1
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.1.1.1

Автоматична перевірка: правило axe-core svg-img-alt. dequeuniversity.com, github.com, www.w3.org

Назва чи значення стоїть поза своїм списком
WCAG 1.3.1 A
Випадний список не має підпису
WCAG 4.1.2 A
Клікабельне зображення працює лише з мишею
WCAG 2.1.1 A
Уся сторінка прихована від програм зчитування з екрана
WCAG 1.3.1 A

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