Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов
tabindex атрибут также определяет точный порядок вкладок элементов. Это достигается, когда значение атрибута установлено как положительное число, равное 1 или выше.
Установка tabindex = "1" сначала приведет фокусировку клавиатуры на этот элемент. Затем он перемещается по последовательности указанных значений tabindex (2, 3 и т.д.), прежде чем перейти к настройкам по умолчанию и tabindex = "0" элементам.
Важно отметить, что когда порядок табуляции задан таким образом, он переопределяет порядок по умолчанию (который использует источник HTML). Это может смутить пользователей, которые ожидают начать навигацию в верхней части страницы. Этот метод может быть необходим в некоторых случаях, но с точки зрения доступности, будьте аккуратны с его применением.
Вот пример:
<div tabindex="1">Я получаю фокус клавиатуры, и я получаю его первым!</div>
<div tabindex="2">Я получаю фокус клавиатуры, и я получаю его вторым!</div>
Camper Cat имеет поле поиска на странице Вдохновляющие цитаты, которое он планирует позиционировать в верхнем правом углу с помощью CSS. Он хочет ввести input и представить элементы управления формой input как первые два элемента в порядке табуляции. Добавьте атрибут tabindex, со значением «1» в поиск input и атрибут tabindex со значением «2», в отправляемый input.