Рекомендована практика Пріоритет: Незначно
Елемент має роль, яка йому не підходить
HTML-елемент має атрибут role, недозволений для цього елемента, наприклад <button>, позначений як заголовок, або меню <nav>, позначене як кнопка. Це рекомендована практика, а не окрема вимога WCAG рівня AA, але вона часто вказує на інші проблеми.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Програми зчитування екрана можуть оголошувати елемент не тим, чим він є, або по-різному в різних браузерах, тож покупці очікують від нього іншої поведінки. Зазвичай це невелика плутанина, а не перешкода.
Кого це стосується
- користувачі програм зчитування екрана
- користувачі голосового керування
Як виправити
Використовуйте нативний HTML-елемент, що відповідає призначенню (<button> для дій, <a href> для переходів, <h2> для заголовків), і приберіть суперечливу роль. Якщо власна роль справді потрібна, задайте її нейтральному елементу, як-от <div> чи <span>, і додайте поведінку клавіатури, якої очікує ця роль. Дозволені ролі для кожного елемента наведено в специфікації W3C «ARIA in HTML».
У Shopify
Зазвичай це власні секції, сніпети або застосунки (меню, слайдери, спливні вікна). Виправте розмітку у відповідній секції чи сніпеті Liquid або повідомте розробника застосунку.
У Shoptet (CZ)
Зазвичай це шаблон або власний код. Виправте свій код; якщо причина в шаблоні, повідомте Shoptet чи партнера.
У PrestaShop
Зазвичай це шаблони .tpl теми або сторонні модулі (меню, слайдери). Виправте розмітку в шаблонах теми чи модуля, бажано через перевизначення.
У WooCommerce
Зазвичай це віджети конструктора сторінок, плагіни меню чи слайдерів або власні шаблони теми. Виправте це в шаблоні дочірньої теми або повідомте автора плагіна.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core aria-allowed-role.
dequeuniversity.com, github.com, www.w3.org