Как и когда использовать атрибут 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-элементов.