Перейти к содержимому
Pandus
ru Сменить язык
Меню

Требование WCAG A/AA Приоритет: Серьёзно

На скрытые элементы всё ещё можно попасть с клавиатуры

Некоторые части страницы скрыты от скринридеров, но всё ещё получают фокус с клавиатуры.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Пользователи клавиатуры попадают на невидимые ссылки, а пользователи скринридеров — на «немые» элементы без названия. В закрытых меню и всплывающих окнах это сильно мешает ориентироваться в магазине.

Кого это касается

  • пользователи скринридеров
  • пользователи, которые работают только с клавиатуры
  • незрячие покупатели

Как исправить

Не размещайте фокусируемые элементы внутри aria-hidden="true". Когда скрываете меню или диалог, убирайте его и из порядка фокуса: атрибут hidden, display:none, inert или tabindex="-1" на его элементах управления.

В Shopify

Обычно это выдвижные меню, панели, всплывающие окна или карусели в теме или приложениях. Исправьте логику скрытия в JavaScript или Liquid темы; о виджетах приложений сообщите разработчику.

В Shoptet (CZ)

Обычно это меню, карусели или всплывающие окна шаблона. Сообщите об этом в Shoptet или партнёру.

В PrestaShop

Обычно это мобильные меню, карусели или модули модальных окон. Исправьте в шаблонах и JavaScript темы или сообщите разработчику модуля.

В WooCommerce

Обычно это мобильные меню, слайдеры, плагины всплывающих окон или cookie-баннеров. Исправьте в коде дочерней темы или сообщите автору плагина.

Стандарты

Стандарты
СтандартПункт
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

Автоматическая проверка: правило axe-core aria-hidden-focus. dequeuniversity.com, github.com, www.w3.org

Похожие проверки

Все правила, которые мы проверяем