Перейти до вмісту
Pandus
uk Змінити мову
Меню

Вимога WCAG A/AA Пріоритет: Серйозно

Приховані елементи все одно доступні з клавіатури

Деякі частини сторінки приховані від програм зчитування з екрана, але на них усе ще переходить фокус клавіатури.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Користувачі клавіатури потрапляють на невидимі посилання, а користувачі програм зчитування з екрана — на елементи, які нічого не озвучують або не мають назви. У закритих меню та спливних вікнах через це складно орієнтуватися в магазині.

Кого це стосується

  • користувачі програм зчитування з екрана
  • користувачі, які керують сайтом з клавіатури
  • незрячі покупці

Як виправити

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

У Shopify

Зазвичай це бічні меню, висувні панелі, спливні вікна чи каруселі в темі або застосунках. Виправте логіку приховування в JavaScript або Liquid теми; про віджети застосунків повідомте розробника.

У Shoptet (CZ)

Зазвичай це меню, каруселі чи спливні вікна шаблону. Зверніться до Shoptet або до партнера 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

Схожі перевірки

Усі правила, які ми перевіряємо