В HTML есть глобальный атрибут
tabindex, который управляет возможностью фокусировки на элементе при навигации с помощью клавиатуры и порядком элемента в последовательности этой фокусировки.Первоначальная задумка атрибута в том, чтобы указывать порядковый номера элемента в последовательности перехода по интерактивным элементам с помощью клавиш
Tab и Shift+Tab, откуда и название.tabindex всё ещё так работает, но индексы больше 0 считаются плохой практикой. Элементы с tabindex больше 0 переносятся в начало последовательности фокусировки и выстраиваются в своём порядке, что нарушают естественный поток. Это запутывает пользователей, делает клавиатурную навигацию непоследовательной и непредсказуемой. Сегодня
tabindex стоит использовать только со значениями -1 и 0 для решения некоторых задач.tabindex="-1" убирает фокусируемый элемент из последовательности фокусировки, но сохраняет возможность установки фокуса с помощью вызова метода focus() в JS или за счёт атрибута autofocus. Есть два варианта применения:- Реализация техники roving tabindex — навигации с помощью стрелок внутри виджетов, которые подразумевают такую навигацию;
- Добавление возможности программно сфокусироваться на не фокусируемом элементе. Например заголовке
<h1> в SPA или первом элементе <p> внутри модального окна.tabindex="0" делает изначально не фокусируемый элемент фокусируемым и добавляет его в последовательность фокусировки. Это нужно при создании интерактивных пользовательских виджетов на основе паттернов ARIA с требованиями к клавиатурной навигации.В редких случаях нужно сделать интерактивные элементы временно не фокусируемыми, например в неактивных слайдах карусели. Атрибут
inert лучше подходит для этого, так как отключает фокусировку и убирает из дерева доступности.Если вы используете стандартные фокусируемые элементы HTML, не создаёте собственные виджеты на основе ARIA, не реализуете техники клавиатурной навигации и не управляете поведением фокуса из JS, атрибут
tabindex вам не понадобится.#ydkhtml
