tabindex

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

Он принимает целое число в качестве значения, с различными результатами в зависимости от значения целого числа:

• Отрицательное значение (точное отрицательное значение фактически не имеет значения, обычно 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-элементов (Порядок элементов в гибкой компоновке). Это затрудняет навигацию и работу с содержимым страницы для людей, которые полагаются на навигацию с помощью клавиатуры или вспомогательных технологий. Вместо этого запишите документ с элементами в логической последовательности.

У некоторых фокусируемых 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 | The Paciello Group

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