Рекомендована практика Пріоритет: Незначно · експериментальна перевірка: варто перевірити вручну
Елемент, доступний з клавіатури, не повідомляє, чим він є
Елемент, до якого можна дійти клавішею Tab, наприклад клікабельний div чи span, не має ролі, яка повідомляла б допоміжним технологіям, що це кнопка, посилання чи інший елемент керування. axe позначає цю перевірку як експериментальну, тому результати треба переглядати вручну. Це рекомендована практика, а не вимога WCAG рівня AA.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Користувач клавіатури чи програми зчитування екрана потрапляє на елемент, але чує лише його текст або нічого, без слів «кнопка» чи «посилання». Він не розуміє, що елемент можна активувати, тож може пропустити вибір розміру, фільтр чи «додати в обране».
Кого це стосується
- користувачі програм зчитування екрана
- користувачі клавіатури
- люди, які керують голосом
Як виправити
Використовуйте нативні елементи для керування: <button> для дій і <a href> для переходів. Якщо власний елемент потрібно залишити, додайте відповідну роль (button, link, tab, checkbox тощо) і поведінку з клавіатури, якої ця роль очікує. Якщо елемент не інтерактивний, приберіть tabindex, щоб він не отримував фокус. Оскільки правило експериментальне, перевіряйте кожен результат вручну перед зміною коду.
У Shopify
Зазвичай причина у власному коді теми чи застосунків, наприклад у кольорових свотчах, швидкому перегляді чи кнопках обраного. Замініть клікабельний div чи span на <button> у Liquid-сніпеті або попросіть розробника застосунку виправити це.
У Shoptet (CZ)
Залежить від шаблону та доповнень. Повідомте про елемент Shoptet або розробнику доповнення; власний код, який ви додали самі, можна виправити напряму.
У PrestaShop
Зазвичай це JavaScript теми або модулі, як-от вибір варіантів і слайдери. Виправте розмітку в .tpl-файлах і скриптах теми або зверніться до автора модуля.
У WooCommerce
Часто це віджети конструктора сторінок або плагіни, що роблять div клікабельними. Оновіть плагін або змініть розмітку в шаблоні дочірньої теми, щоб елементи керування були справжніми кнопками чи посиланнями.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core focus-order-semantics.
dequeuniversity.com, github.com