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