Перейти к содержимому
Pandus

Рекомендуемая практика Приоритет: Серьёзно

Порядок перехода с клавиатуры принудительно нарушен

У некоторых элементов tabindex больше 0, поэтому они получают фокус раньше всех остальных, когда человек перемещается по странице клавишей Tab. Это рекомендуемая практика сверх уровня WCAG 2.2 AA.

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

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

Пользователи клавиатуры ожидают, что фокус будет двигаться в том порядке, который они видят на экране. С tabindex больше 0 фокус прыгает, например с логотипа сразу в поле подписки, а потом обратно в меню, поэтому люди теряются и могут пропустить важные поля при оформлении заказа.

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

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

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

Замените каждый положительный tabindex на tabindex="0" (чтобы элемент получал фокус на своём естественном месте) или уберите его совсем. Если порядок всё ещё кажется неправильным, измените порядок элементов в HTML так, чтобы он совпадал с визуальным, а не навязывайте его через tabindex. Используйте tabindex="-1" только для элементов, которые должны получать фокус из скрипта.

В Shopify

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

В Shoptet (CZ)

Если причина в вашем вставленном коде или стороннем виджете, исправьте этот код; если в шаблоне, обратитесь в Shoptet или к партнёру.

В PrestaShop

Проверьте файлы .tpl темы и шаблоны модулей на значения tabindex больше 0 и переопределяйте шаблоны модулей в теме, а не редактируйте сами модули.

В WooCommerce

Часто его добавляют плагины всплывающих окон, форм или чатов либо тема. Найдите tabindex в коде страницы, исправьте его в дочерней теме или сообщите автору плагина.

Стандарты

Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.

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

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