Рекомендована практика Пріоритет: Помірно
Текстовий блок приховує посилання чи кнопки всередині
Елемент із role="text" містить посилання, кнопку або інший елемент, що може отримати фокус. role="text" — нестандартна роль, яка змушує деякі програми зчитування екрана читати весь вміст як звичайний текст. Це рекомендована практика, а не вимога WCAG рівня AA.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
У програмах зчитування екрана, що підтримують role="text", зокрема VoiceOver на iPhone і Mac, посилання чи кнопку всередині може бути прочитано як звичайний текст. Покупець не знає, що на неї можна натиснути, або взагалі не може до неї дістатися. Якщо так обгорнуто посилання з ціною чи кнопку «Додати в кошик», це може зірвати покупку.
Кого це стосується
- користувачі програм зчитування екрана
- користувачі VoiceOver на iPhone, iPad і Mac
Як виправити
Використовуйте role="text" лише для елементів зі звичайним текстом, наприклад щоб розбита ціна на кшталт «€19<sup>99</sup>» не читалася частинами. Приберіть role="text" з будь-якого елемента, що містить посилання, кнопки, поля форм або елементи з tabindex, або винесіть ці інтерактивні елементи за його межі.
У Shopify
Зазвичай це власна розмітка цін чи значків у сніпетах Liquid або застосунок. Приберіть role="text" з елементів, що містять посилання чи кнопки.
У Shoptet (CZ)
Зазвичай це власний код. Приберіть role="text" з елементів, що містять посилання чи кнопки; якщо його додає шаблон, зверніться до Shoptet чи партнера.
У PrestaShop
Зазвичай це змінені шаблони .tpl списків товарів чи цін або модулі. Приберіть role="text" навколо інтерактивних елементів, бажано через перевизначення.
У WooCommerce
Зазвичай це власні шаблони цін, віджети конструктора сторінок або плагіни. Виправте це в шаблоні дочірньої теми або зверніться до автора плагіна.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core aria-text.
dequeuniversity.com, github.com