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