Рекомендована практика Пріоритет: Помірно
Пункти деревоподібного меню не мають назви
Деякі пункти деревоподібного меню, наприклад дерева категорій, що розгортається, не мають тексту, який можуть прочитати допоміжні технології. Це рекомендована практика, а не вимога WCAG рівня AA.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Користувач програми зчитування екрана, що рухається деревом категорій, чує лише «елемент дерева» без назви категорії, тож не розуміє, яка гілка веде до потрібних товарів. Багато хто перестає шукати й іде з магазину.
Кого це стосується
- користувачі програм зчитування екрана
- незрячі люди
- люди, які керують голосом
Як виправити
Дайте кожному елементу з role="treeitem" доступну назву: видимий текст усередині або aria-label / aria-labelledby, якщо пункт показує лише значок. Назва має збігатися з тим, що бачать зрячі користувачі. Якщо віджет насправді не є деревом, приберіть ролі дерева й використайте звичайний вкладений список посилань.
У Shopify
Ролі дерева зазвичай додає застосунок мегаменю, фільтрів чи категорій, а не тема. Перевірте налаштування застосунку або зверніться до його розробника; якщо role="treeitem" додає сніпет меню самої теми, виправте його в цьому Liquid-сніпеті.
У Shoptet (CZ)
Залежить від шаблону або доповнення. Перевірте, чи нова версія шаблону виправляє дерево категорій; інакше зверніться до Shoptet або партнера.
У PrestaShop
Зазвичай це походить від модуля дерева категорій або меню. Перевизначте .tpl-шаблон модуля у своїй темі, щоб кожен пункт містив назву категорії, або зверніться до автора модуля.
У WooCommerce
Зазвичай це походить від віджета категорій, плагіна меню чи фільтрів. Оновіть плагін, перевірте його налаштування доступності або перевизначте його шаблон у дочірній темі, щоб кожен пункт виводив свій текст.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core aria-treeitem-name.
dequeuniversity.com, github.com, www.w3.org