Ответ
Tab индекс (tabindex) — это атрибут HTML, определяющий порядок перехода между элементами при навигации с клавиатуры (Tab/Shift+Tab).
Значения:
tabindex="0"— элемент включается в естественный порядок навигации.tabindex="-1"— элемент исключается из навигации, но может получать фокус программно (например, черезelement.focus()).tabindex="1"и выше — элемент получает приоритет в навигации (не рекомендуется из-за проблем с доступностью).
Пример:
<button tabindex="0">Кнопка 1</button>
<button tabindex="-1">Кнопка 2 (не в табуляции)</button>
<button tabindex="1">Кнопка 3 (первая в табуляции)</button> Важно:
- Используйте
tabindex="0"для интерактивных элементов. - Избегайте положительных значений — они нарушают логический порядок.
- Элементы с
tabindex="-1"полезны для модальных окон и динамического фокуса.
Ответ 18+ 🔞
А, слушай, вот эта штука с tabindex — это ж, блядь, как настройка очереди в столовой, только для твоей клавиатуры! Представь: ты тыкаешь Tab, и курсор прыгает по кнопкам, полям — вот этот порядок и есть та самая «табуляция».
Что за цифры, ёпта?
tabindex="0"— это как встать в хвост очереди, как все нормальные люди. Элемент вклинивается в естественный поток. Поставил на кнопку — и она теперь ловится Tab'ом. Честно, по-пацански.tabindex="-1"— это, типа, «я вне игры». Tab'ом до него не допрыгнешь, он как призрак. Но! Если ты его программно позовёшь —element.focus()— он материализуется и фокус получит. Штука для модалок, которые выскакивают по щелчку, а не по Tab'у.tabindex="1"или больше — это «я начальник, я первый». Элемент выпрыгивает в начало очереди, всех лохов обгоняя. И вот это — пиздец как не рекомендуется! Потому что получается каша, логика навигации ломается, и пользователь с клавиатуры просто обосрётся, пытаясь понять, куда его несёт.
Смотри, как это выглядит в коде, на примере:
<button tabindex="0">Кнопка 1 (в очереди)</button>
<button tabindex="-1">Кнопка 2 (невидимка для Tab)</button>
<button tabindex="1">Кнопка 3 (хам, прётся вперёд)</button>Главное, что надо вынести, чтобы не быть мудаком:
- Хочешь сделать элемент доступным с клавиатуры —
tabindex="0"и не еби мозг. Для кнопок, ссылок, полей ввода — то, что надо. - Положительные значения (
1,2,999) — это путь в ад доступности. Избегай их, как говна в луже. Они всё ломают. tabindex="-1"— хитрая, но полезная жопа. Используй для штук, которые появляются по какому-то событию (типа всплывающего окна), чтобы фокус можно было на него программно перекинуть, но он не мешался в обычной навигации.
Вот и вся магия, без всяких ебушки-воробушки. Сделаешь по-человечески — и пользователи тебя мысленно благодарить будут, а не проклинать в голос.