Атрибут tabindex
Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab .
Нажимая эту клавишу можно активировать последовательно некоторые элементы страницы (ссылки и элементы форм). Активные элементы будут получать фокус ввода.
Для полей ввода типа input и textarea фокус будет выражаться в том, что в поле будет моргать курсор и в него можно будет вводить текст, для ссылок и других элементов это будет выделение каким-то образом (подчеркивание, обведение пунктирной границей и т.п., зависит от браузера).
Чтобы поменять стили по умолчанию для элемента в фокусе смотрите псевдокласс focus.
Если в момент получения фокуса элемент не был виден на странице (из-за прокрутки), то страница прокрутится к этому элементу.
Если элементам не задан атрибут tabindex или он имеет значение 0 , то переход по ним клавишей Tab будет идти в порядке следования элементов в HTML коде.
Если на странице есть элементы, которым задан tabindex , то вначале переход будет идти по ним, начиная от меньшего значения атрибута tabindex (самым маленьким может быть единица) и так далее по возрастанию значений атрибута, а когда такие элементы закончатся — переход пойдет по тем элементам, которым не задан tabindex или он имеет значение 0 .
Значением атрибута служат целые числа от 1 до бесконечности. Если какие-то номера пропущены — ничего страшного не случится (к примеру, если нет номера 2 , то сначала фокус попадет на элемент с tabindex , равным 1 , а потом на элемент с tabindex , равным 3).
Если на странице в момент нажатия клавиши Tab есть элемент в фокусе (фокус мог быть получен не только нажатием Tab , но и кликом мышкой по элементу или атрибутом autofocus ), то следующее нажатие клавиши Tab приведет к тому, что фокус получит следующий по порядку элемент после того, который в фокусе (к примеру, если сейчас в фокусе элемент с tabindex 3 , то следующим получит фокус элемент с tabindex 4).
Если полю ввода задан атрибут disabled , то оно будет проигнорировано переходами через клавишу Tab, даже если этому полю задан атрибут tabindex .
Пример
Давайте инпутам зададим атрибут tabindex . Понажимайте последовательно клавишу Tab и вы увидите, как фокус ввода будет переходить от первого инпута к четвертому, а потом пойдет по ссылкам с начала страницы (так как больше элементов с заданным атрибутом tabindex нет):
Использование HTML tabindex для управления навигацией
Атрибут tabindex применяется для управления последовательностью переключения между элементами на веб-странице посредством клавиши Tab . Основные его значения:
- tabindex=»0″ : делает элемент фокусируемым и встраивает его в естественный порядок переключения между элементами.
- Положительное значение tabindex (например, tabindex=»1″ ): говорит о том, что элемент встретится ранее в цепочке переключения.
- Отрицательное значение tabindex (например, tabindex=»-1″ ): делает элемент программно фокусируемым, но исключает его из порядка переключения клавишей.
Пример:
Скопировать код
Нажимая Tab , сначала фокус окажется на input с tabindex=»1″ , потом перейдёт к div , а input с tabindex=»-1″ будет проигнорирован.
Применение tabindex: совершенствование клавиатурной навигации
Атрибут tabindex позволяет превратить навигацию посредством клавиатуры в наиболее удобный и интуитивно понятный процесс, даже в отношении элементов типа и , которые изначально не предусматривали этой возможности. Это критически важно для создания удобного пользовательского интерфейса, особенно для тех, кто в первую очередь полагается на клавиатурную навигацию.
Повышение интерактивности с помощью tabindex
С tabindex=»0″ вы можете включить в естественный порядок навигации интерактивные элементы, такие как персонализированные кнопки или слайдеры, улучшив тем самым логику перемещения фокуса и удобство использования.
Будьте внимательны: замечания и соображения по использованию tabindex
Помимо того, что положительные значения tabindex могут ввести пользователя в заблуждение, нарушив естественный порядок, так это ещё и требует предельной осторожности при использовании. Экспериментируя с нетипичными значениями, не забывайте о необходимости проверки функциональности.
Управление фокусом в динамическом контенте
В динамических веб-приложениях регулирование фокуса с помощью tabindex=»-1″ и JavaScript является способом акцентирования внимания на новопоявившихся элементах, таких как модальные окна, не меняя их положения в порядке переключения.
Визуализация
Можно представить, что tabindex — это своего рода управляющий клавиатурным переключением между элементами.
Атрибут tabindex
Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab .
Синтаксис
Обязательный атрибут
Значения
Любое целое положительное число. Значения выстраиваются последовательно и переход между ссылками происходит от меньшего значения к большему. Значения меньше нуля игнорируются и переход к таким ссылкам не происходит.
Значение по умолчанию
HTML5 IE Cr Op Sa Fx
Тег А, атрибут tabindex Ссылка 1
Ссылка 3
Ссылка 2
Ссылка 4
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут tabindex
Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab . Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установлен атрибут disabled) не участвуют в переходе и фокус не получают.
Синтаксис
tabindex=""Значения
Любое целое число.
Отрицательное значение говорит, что элемент может получить фокус, но к нему нельзя перейти с помощью клавиатуры.
Ноль, неверное значение или когда атрибут tabindex не задан означает, что к элементу можно перейти с помощью клавиатуры, но переход происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.
Положительное значение определяет порядок элемента в последовательности перехода через клавиатуру: чем больше число, тем больше раз требуется нажать Tab для перехода к элементу.
Максимальное значение не должно превышать 32767.
Значение по умолчанию
Пример
Спецификация
| Спецификация | Статус |
|---|---|
| HTML Living Standard | Живой стандарт |
| HTML 4.01 Specification | Заменённая рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 4 | 12 | 1 | 15 | 4 | 1.5 |
| 4.4 | 4 | 14 | 3.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.