Требование WCAG A/AA Приоритет: Умеренно
У некоторых графических элементов нет текстового описания
Некоторые элементы размечены как изображения, но не имеют текстовой альтернативы, например звёзды рейтинга или графические иконки.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи скринридеров не узнают, что показывает графика, например рейтинг 4.5 звезды или значок «бесплатная доставка», а это может влиять на решение о покупке.
Кого это касается
- незрячие покупатели
- пользователи скринридеров
Как исправить
Дайте каждому элементу с role="img" название через aria-label или aria-labelledby, например aria-label="Оценка 4.5 из 5". Если графика декоративная, удалите role="img" и скройте её с помощью aria-hidden="true".
В Shopify
Часто это звёзды рейтинга из приложений отзывов или иконки темы. Добавьте названия в Liquid-сниппетах темы; разметку приложений отзывов должен исправить разработчик приложения.
В Shoptet (CZ)
Часто это рейтинги или иконки в шаблоне. Сообщите об этом в Shoptet или партнёру.
В PrestaShop
Часто это элементы рейтинга или иконки из модулей. Исправьте в переопределённых шаблонах модулей или сообщите разработчику модуля.
В WooCommerce
Часто это звёзды рейтинга из 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 role-img-alt.
dequeuniversity.com, github.com, www.w3.org
Похожие проверки
-
У видео нет субтитров
WCAG 1.2.2 A
-
В названиях атрибутов доступности опечатки
WCAG 4.1.2 A
-
Нестандартные меню или списки собраны неправильно
WCAG 1.3.1 A
-
Посетители не могут увеличить страницу на телефоне
WCAG 1.4.4 AA