Рекомендована практика Пріоритет: Незначно
Декоративний елемент усе одно озвучується програмами зчитування екрана
Елемент, позначений як декоративний (role="presentation" або role="none"), має ще й ARIA-атрибути або отримує фокус з клавіатури, тому одні програми зчитування екрана його пропускають, а інші ні. Це рекомендована практика, що виходить за межі рівня WCAG 2.2 AA.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Користувачі програм зчитування екрана можуть чути зайві беззмістовні елементи або потрапляти на порожню зупинку під час натискання Tab, наприклад на декоративній іконці чи розділювачі. Це дрібна незручність, але зайвий «шум» сповільнює перегляд товарів і заповнення форм.
Кого це стосується
- користувачі програм зчитування екрана
- користувачі клавіатури
Як виправити
Якщо елемент справді декоративний, приберіть із нього глобальні ARIA-атрибути (наприклад, aria-label чи aria-describedby) і будь-який tabindex, щоб його стабільно ігнорували. Якщо він несе зміст або має бути клікабельним, приберіть role="presentation" чи role="none" і натомість задайте правильну роль та доступну назву. Ніколи не ставте декоративну роль на посилання, кнопку чи поле форми.
У Shopify
Зазвичай причина в сніпетах іконок чи секціях теми або в застосунку. Виправте розмітку в сніпетах чи секціях теми (Liquid) або зверніться до розробника застосунку.
У Shoptet (CZ)
Залежить від шаблону або доповнення. Перевірте, чи нова версія шаблону це виправляє; інакше зверніться до Shoptet чи партнера або виправте власний вставлений код.
У PrestaShop
Зазвичай це у файлах .tpl теми або в шаблонах модуля. Перевизначте шаблон у темі замість того, щоб редагувати модуль напряму.
У WooCommerce
Зазвичай причина в темі, конструкторі сторінок або плагіні. Виправте це в шаблоні дочірньої теми або повідомте автора плагіна, щоб оновлення не скасували виправлення.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core presentation-role-conflict.
dequeuniversity.com, github.com