Как и когда использовать атрибут tabindex

tabindex будет глобальным атрибутом, который может применяться к большинству HTML-элементов с содержимым. Он отвечает за:

  1. Метод установки фокуса ввода для элемента – при помощи клавиатуры или программно. К примеру, при помощи способа focus();
  2. В какой момент элемент попадает в фокус ввода, когда посетитель взаимодействует со страницей при помощи клавиатуры.

Порядок выделения фокусом ввода

Существует шесть HTML-элементов, которые по умолчанию являются фокусируемыми:

  • элементы <a> с атрибутом href;
  • элементы <link> с атрибутом href;
  • элементы <button>;
  • элементы <input>, которым не задан type=»hidden»;
  • элементы <select>;
  • элементы <textarea>.

Только данные элементы могут быть выделены мышью, при помощи клавиатуры, или при помощи способа 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. При этом посетитель не сможет выделить их при помощи клавиатуры. К примеру, <div> с отрицательным tabindex.

Если бы нам пришлось использовать клавиатуру, мы бы увидели, что он не может быть выделен фокусом ввода.

Тем не менее, мы можем выделить их фокусом ввода при помощи способа focus().

Когда использовать tabindex

Атрибут tabindex может быть полезным. Но при этом потенциально его применение может иметь разрушительные последствия.

Когда использовать отрицательное значение tabindex

Отрицательное значение tabindex удалит элемент из последовательности выделения фокусом ввода при помощи табуляции. Но элементы можно сделать фокусируемыми программно.

Модальные окна представляют собой нефокусируемые элементы, такие как <div> или <section>. Когда модальное окно открыто, посетитель может захотеть переместить на него фокус ввода. Но при этом модальный контейнер мог выделяться фокусом ввода при помощи табуляции. Это может быть достигнуто при помощи отрицательного значения tabindex.

<div id="modal" tabindex="-1"> <!-- Содержимое модального окна --></div><script>function openModal() { document.getElementById("modal").focus(); // Иные вещи, которые отображаются в модальном окне}</script>

Когда использовать tabindex=0

Нулевой tabindex делает элемент фокусируемым, когда это поведение было отменено программно.

Ещё один хороший вариант использования – пользовательские элементы. Например, если необходимо создать кнопку, которая по умолчанию не будет выделяться фокусом ввода. Это можно реализовать при помощи атрибута tabindex.

<my-custom-button tabindex="0">Click me!</my-custom-button>

Когда использовать положительное значение tabindex

Если необходимо использовать это значение для изменения порядка, в котором элементы выделяются фокусом ввода, легче настроить исходный порядок HTML-элементов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *