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

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

Кликабельные элементы вложены друг в друга

Некоторые кликабельные элементы находятся внутри других кликабельных элементов, например кнопка «в избранное» внутри кликабельной карточки товара.

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

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

Пользователи скринридеров и клавиатуры могут не добраться до внутреннего элемента или не отличить его, поэтому пропустят быстрое добавление в корзину или избранное либо откроют не то.

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

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

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

Не размещайте ссылки, кнопки или поля внутри другой ссылки или кнопки либо внутри элемента с role="button" и подобными ролями. Сделайте основную ссылку карточки и её кнопки соседними элементами; при необходимости расширьте кликабельную область основной ссылки через CSS.

В Shopify

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

В Shoptet (CZ)

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

В PrestaShop

Обычно это шаблоны миниатюр товаров с кнопками быстрого просмотра или избранного. Перестройте шаблон .tpl миниатюры товара в теме.

В WooCommerce

Обычно это списки товаров из темы, конструкторов страниц или плагинов избранного. Перестройте шаблон в дочерней теме или сообщите автору плагина.

Стандарты

Стандарты
СтандартПункт
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 nested-interactive. dequeuniversity.com, github.com, www.w3.org

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

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