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

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

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

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

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

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

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

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

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

document.querySelector('#yourElement').tabIndex = -1; // JavaScript в деле!

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

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

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

Disabled или tabindex?

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

<button disabled>Кнопка на сегодня недоступна.</button>

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

Подмога от ARIA

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

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

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

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

$('selector').prop('disabled', true);

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

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

🟢 Зеленый свет: Переключение Tab'ом допускается! 
🟡 Желтый свет: Осторожно, почти у цели.
🔴 Красный свет: Tab'ом переключиться здесь не получится. Продолжайте движение.

<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. Навигация только с помощью клавиатуры для повышения доступности — Стратегии улучшения навигации с использованием клавиатуры.