tabindex глобальный атрибут HTML

tabindex глобальный атрибут позволяет разработчикам делать HTML-элементы фокусируемыми, разрешать или запрещать их последовательную фокусировку (обычно с помощью клавиши Tab, отсюда и название) и определять их относительный порядок при последовательной навигации по фокусу.

Попробуйте

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text" /></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

Значением служит целое число; результат зависит от его значения:

• Отрицательное значение (точное отрицательное значение не имеет значения, обычно tabindex="-1") означает, что элемент недоступен при последовательной навигации с клавиатуры.

  Примечание: tabindex="-1" может быть полезен для элементов, к которым не следует переходить напрямую с помощью клавиши Tab, но которым необходимо назначить фокус с клавиатуры. Например, это может быть скрытое за пределами экрана модальное окно, на которое следует перевести фокус, когда оно появляется, или сообщение об ошибке отправки формы, на которое следует сразу перевести фокус при отправке формы с ошибками.

• tabindex="0" означает, что элемент должен быть доступен при последовательной навигации с клавиатуры после любых положительных значений tabindex. Порядок навигации по фокусу для этих элементов определяется их расположением в исходном коде документа.

• Положительное значение означает, что элемент должен быть доступен при последовательной навигации с клавиатуры, а его порядок определяется числовым значением. То есть tabindex="4" получает фокус раньше, чем tabindex="5" и tabindex="0", но позже, чем tabindex="3". Если у нескольких элементов одинаковое положительное значение tabindex, их взаимный порядок определяется их расположением в исходном коде документа. Максимальное значение для tabindex — 32767.

• Если атрибут tabindex указан без значения, возможность фокусировки элемента определяется пользовательским агентом.

  Предупреждение: рекомендуется использовать только 0 и -1 в качестве значений tabindex. Избегайте использования значений tabindex больше 0 и свойств CSS, которые могут менять порядок фокусируемых HTML-элементов (Упорядочивание flex-элементов). Это затрудняет навигацию по содержимому страницы и взаимодействие с ним для людей, использующих клавиатуру или вспомогательные технологии. Вместо этого располагайте элементы в документе в логической последовательности.

Для некоторых фокусируемых HTML-элементов пользовательский агент по умолчанию задаёт значение tabindex, равное 0. К таким элементам относятся <a> или <area> с атрибутом href, <button>, <frame> , <iframe>, <input>, <object>, <select>, <textarea>, элемент SVG <a>, а также элемент <summary>, содержащий краткое описание элемента <details>. Разработчикам не следует добавлять атрибут tabindex к этим элементам, если только это не меняет поведение по умолчанию (например, отрицательное значение исключит элемент из порядка навигации по фокусу).

Проблемы доступности

Не используйте атрибут tabindex вместе с неинтерактивным содержимым, чтобы сделать элемент, предназначенный для взаимодействия, доступным для фокусировки с клавиатуры. Например, не следует использовать элемент <div> для описания кнопки вместо элемента <button>.

Интерактивные компоненты, созданные с помощью неинтерактивных элементов, не включаются в дерево доступности. Поэтому вспомогательные технологии не могут переходить к таким компонентам и управлять ими. Вместо этого содержимое следует семантически описывать с помощью интерактивных элементов (<a>, <button>, <details>, <input>, <select>, <textarea> и т. д.). Эти элементы имеют встроенные роли и состояния, которые передают информацию о статусе средствам обеспечения доступности; в противном случае ими пришлось бы управлять с помощью ARIA.

• Использование атрибута tabindex | Vispero

Спецификации

Совместимость с браузерами

См. также

• Все глобальные атрибуты
• HTMLElement.tabIndex, отражающее значение этого атрибута
• Проблемы доступности с tabindex: см. статью Не используйте tabindex больше 0 Адриана Росселли
• Порядок чтения