Рекомендуемая практика Приоритет: Умеренно
У всплывающего окна нет названия
Диалоговое окно, например боковая корзина, баннер о 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