logo

Исключение элементов из порядка табуляции HTML: решение

Быстрый ответ

Если вы хотите исключить элемент из навигации клавишей Tab, всего лишь добавьте атрибут tabindex="-1":

HTML
Скопировать код
<div tabindex="-1">При переключении Tab'ом этот элемент будет пропущен!</div>

Этот подход действен в большинстве случаев, и элемент перестаёт быть включен в переключение по Tab.

Что с доступностью?

Применение tabindex="-1" удаляет элемент из фокусировки при навигации с использованием клавиатуры, что возможно скажется отрицательно на доступности. Ваша основная задача — гарантировать равный доступ ко всем элементам для пользователей, в том числе при навигации через клавиатуру. Отсюда – обязательная проверка, что исключение элементов из навигационной последовательности не ухудшает доступность.

JavaScript приходит на помощь

Для динамического изменения значения tabindex следует использовать JavaScript:

JS
Скопировать код
document.querySelector('#yourElement').tabIndex = -1; // JavaScript в деле!

Замечание: в JavaScript свойство называется tabIndex, и регистр букв в названии имеет значение.

Схватка века: HTML 4.01 против HTML5

HTML 4.01 позволяет указывать только положительные значения для tabindex. Взамен, HTML5 расширяет границы и допускает tabindex="-1". Но помните, что старые версии браузеров не всегда поддерживают новые стандарты HTML5.

Disabled или tabindex?

Для того чтобы сделать элементы формы недоступными, используйте атрибут disabled:

HTML
Скопировать код
<button disabled>Кнопка на сегодня недоступна.</button>

Атрибут disabled одновременно исключает элемент из последовательности переходов Tab и делает его неактивным.

Подмога от ARIA

ARIA-атрибут aria-hidden="true" позволяет скрыть содержимое от устроиств и программ поддержки, таких как скринридеры:

HTML
Скопировать код
<div aria-hidden="true">Этот элемент будет невидим для ассистивных технологий</div>

Автоматизация с помощью jQuery

Для автоматического добавления атрибута disabled можно использовать jQuery:

JS
Скопировать код
$('selector').prop('disabled', true);

Визуализация

Представьте себе переключение между элементами с помощью клавиши Tab в виде светофора:

Markdown
Скопировать код
🟢 Зеленый свет: Переключение Tab'ом допускается! 
🟡 Желтый свет: Осторожно, почти у цели.
🔴 Красный свет: Tab'ом переключиться здесь не получится. Продолжайте движение.
HTML
Скопировать код
<button tabindex="0">Вперед 🟢</button>
<div tabindex="-1">Элемент проигнорирован 🔴</div>
<button>Стоп 🟢</button>

Элементы с tabindex="-1" будут пропущены, будто вы на светофоре увидели красный сигнал.

Полное понимание

В каких случаях использовать отрицательный tabindex?

Применять tabindex="-1" подходит в случаях, когда вы хотите:

  • Сфокусировать внимание на неинтерактивном содержимом
  • Пропустить повторяющиеся элементы при навигации
  • Выделить элементы внутри модальных окон или всплывающих панелей
  • Игнорировать нефункциональные элементы

Динамическое обновление контента

При работе с динамически изменяющимся содержимым:

  • Программно добавляйте tabindex="-1", если это целесообразно
  • При необходимости точного следования порядку переходов по Tab — удаляйте указанный атрибут
  • С помощью обработчиков событий JavaScript контролируйте фокусировку в специфических ситуациях

Кроссбраузерная совместимость

При обеспечении совместимости работы в различных браузерах учитывайте:

  • Проводите тестирование в разных браузерах
  • Изучите, как ассистивные технологии взаимодействуют с атрибутом tabindex
  • Регулярно проверяйте валидность HTML кода

На что стоит обратить внимание

Не попадитесь на распространенные ошибки:

  • Избыточное применение tabindex усложняет навигацию для пользователей
  • Использование отрицательных значений, отличных от "-1", недопустимо
  • Изменения в последовательности перехода с помощью Tab могут запутать пользователей скринридеров

Полезные материалы

  1. tabindex – HTML: HyperText Markup Language | MDN — Руководство по tabindex.
  2. HTML Standard — Официальный стандарт HTML для tabindex.
  3. WebAIM: Accessibility In Mind – Tabindex — Рассуждения о доступности и навигации с клавиатуры.
  4. ARIA | WAI | W3C — Рекомендации по управлению фокусом в веб-приложениях.
  5. Не используйте ARIA меню роли для сайтовой навигации — Adrian Roselli — Анализ применения ARIA в навигации сайта.
  6. Deque University | Deque Systems — Практики для повышения доступности и управляемости с клавиатуры.
  7. Навигация только с помощью клавиатуры для повышения доступности — Стратегии улучшения навигации с использованием клавиатуры.