Атрибут 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 нет):
Атрибут tabindex
Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab .
Синтаксис
Обязательный атрибут
Значения
Любое целое положительное число. Значения выстраиваются последовательно и переход между ссылками происходит от меньшего значения к большему. Значения меньше нуля игнорируются и переход к таким ссылкам не происходит.
Значение по умолчанию
HTML5 IE Cr Op Sa Fx
Тег А, атрибут tabindex Ссылка 1
Ссылка 3
Ссылка 2
Ссылка 4
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Как и когда использовать атрибут tabindex
tabindex является глобальным атрибутом, который может применяться к большинству HTML-элементов с содержимым. Он отвечает за:
- Способ установки фокуса ввода для элемента – с помощью клавиатуры или программно. Например, с помощью метода focus() ;
- В какой момент элемент попадает в фокус ввода, когда пользователь взаимодействует со страницей с помощью клавиатуры.
Обновлено: 2023-06-05 19:25:16 Вадим Дворников автор материала
Порядок выделения фокусом ввода
Существует шесть HTML-элементов, которые по умолчанию являются фокусируемыми:
- элементы с атрибутом href ;
- элементы с атрибутом href;
- элементы ;
- элементы , которым не задан type=»hidden»;
- элементы ;
- элементы .
Только эти элементы могут быть выделены мышью, с помощью клавиатуры, или с помощью метода focus() в Javascript.
document.querySelector("a").focus();
Без дополнительных действий метод focus() для любого другого элемента не будет работать.
document.querySelector("div").focus();
Не будет работать
Порядок размещения элементов в HTML-документе определяет порядок, в котором они выделяются фокусом ввода с помощью клавиатуры.
Но иногда нужно изменить этот порядок. Здесь в дело вступает атрибут tabindex .
Как использовать tabindex
Атрибут tabindex может быть применен к любому элементу. Значение атрибута должно быть целым числом (отрицательным, положительным или равным нулю).
Отрицательные значения tabindex
Tabindex = -1 полностью исключит элемент из последовательности выделения фокусом ввода. Пользователь, перемещающийся по странице с помощью клавиатуры, не сможет получить доступ к элементу.
Любое отрицательное значение атрибута удалит элемент из последовательности выделения фокусом ввода.
Значение tabindex, равное нулю
Tabindex =0 добавит элемент в последовательность выделения фокусом ввода по умолчанию, определяемую его положением в HTML-коде. Это значение может быть применено к элементам, которые обычно не выделяются фокусом ввода.
Положительные значения tabindex
Положительный tabindex поместит элемент в последовательность выделения фокусом ввода. При этом его позиция будет определяться конкретным числом, начиная с 1 и больше. Элементы с положительным значением tabindex будут размещены перед элементами, которые не имеют атрибута tabindex .
Чтобы проверить это, кликните мышкой в адресной строке браузера, затем нажмите клавишу табуляции. Вы увидите, что первые два фокусируемых элементы – созданные нами кнопки. Даже если они находятся в середине исходного HTML-кода.
Программное выделение фокусом ввода и tabindex
Атрибут tabindex также определяет, какие элементы могут быть выделены фокусом ввода с помощью Javascript.
Добавление к элементу атрибута tabindex его фокусируемым с помощью Javascript. Это означает, что мы сможем сделать элементы, которые ранее не выделялись, фокусируемыми через Javascript. При этом пользователь не сможет выделить их с помощью клавиатуры. Например, с отрицательным tabindex .
Если бы нам пришлось использовать клавиатуру, мы бы увидели, что он не может быть выделен фокусом ввода.
Тем не менее, мы можем выделить их фокусом ввода с помощью метода focus() .
Когда использовать tabindex
Атрибут tabindex может быть полезным. Но при этом потенциально его применение может иметь разрушительные последствия.
Когда использовать отрицательное значение tabindex
Отрицательное значение tabindex удалит элемент из последовательности выделения фокусом ввода с помощью табуляции. Но элементы можно сделать фокусируемыми программно.
Модальные окна представляют собой нефокусируемые элементы, такие как или . Когда модальное окно открыто, пользователь может захотеть переместить на него фокус ввода. Но при этом модальный контейнер мог выделяться фокусом ввода с помощью табуляции. Это может быть достигнуто с помощью отрицательного значения tabindex .
Когда использовать tabindex=0
Нулевой tabindex делает элемент фокусируемым, когда это поведение было отменено программно.
Еще один хороший вариант использования – пользовательские элементы. Например, если нужно создать кнопку, которая по умолчанию не будет выделяться фокусом ввода. Это можно реализовать с помощью атрибута tabindex .
Click me!
Когда использовать положительное значение tabindex
Если нужно использовать это значение для изменения порядка, в котором элементы выделяются фокусом ввода, легче изменить исходный порядок HTML-элементов.
Вадим Дворников автор-переводчик статьи « How and when to use the tabindex attribute »
tabindex
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018 .
Примечание: Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)
Глобальный атрибут tabindex — целое число, определяющее должен ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:
- если представлено отрицательное значение – элемент может быть выделен, однако не участвует в последовательной навигации;
- если представлен 0 – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;
- если представлено положительное целое значение – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение tabindex, их порядок навигации определён относительным расположением в документе (DOM).
Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением tabindex должны быть расположены после элементов с положительным целым числом.
Для более полного объяснения навигации смотри данную статью (en-US) .
Спецификации
| Specification |
|---|
| HTML Standard # attr-tabindex |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Все глобальные атрибуты.
- HTMLElement.tabindex (en-US) отражает этот атрибут.
- Проблемы доступности (юзабилити): смотри Don’t Use Tabindex Greater than 0 | Adrian Roselli.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.