Вимога WCAG A/AA Пріоритет: Серйозно
Деякі посилання не повідомляють, куди ведуть
Деякі посилання не мають тексту, який можна прочитати. Часто це іконки — кошик, сердечко чи логотип без текстового підпису.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Користувачі програм зчитування з екрана чують лише «посилання» і не розуміють, що воно відкриває: кошик, обліковий запис чи Instagram. Вони втрачають час або так і не знаходять кошик чи сторінку контактів.
Кого це стосується
- незрячі покупці
- користувачі програм зчитування з екрана
- користувачі голосового керування
Як виправити
Дайте кожному посиланню текстову назву: видимий текст, alt-текст зображення всередині посилання або aria-label для посилань лише з іконкою. Назва має описувати, куди веде посилання, наприклад «Кошик, 2 товари». Декоративні іконки приховуйте за допомогою aria-hidden="true".
У Shopify
Зазвичай це посилання-іконки в шапці чи підвалі теми. Додайте візуально прихований текст або aria-label у секціях і сніпетах Liquid теми; посилання, які додають застосунки, треба виправити в застосунку або повідомити про них розробника.
У Shoptet (CZ)
Зазвичай це посилання-іконки в шапці чи підвалі шаблону. Перевірте, чи є в налаштуваннях шаблону підписи посилань; інакше код шаблону має змінити Shoptet або партнер 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