<code>tabindex</code> атрибут также определяет точный порядок вкладок элементов. Это достигается, когда значение атрибута установлено как положительное число, равное 1 или выше.
Установка <code>tabindex = "1"</code> сначала приведет фокусировку клавиатуры на этот элемент. Затем он перемещается по последовательности указанных значений <code>tabindex</code> (2, 3 и т.д.), прежде чем перейти к настройкам по умолчанию и <code>tabindex = "0"</code> элементам.
Важно отметить, что когда порядок табуляции задан таким образом, он переопределяет порядок по умолчанию (который использует источник HTML). Это может смутить пользователей, которые ожидают начать навигацию в верхней части страницы. Этот метод может быть необходим в некоторых случаях, но с точки зрения доступности, будьте аккуратны сего применением.
Вот пример:
<code><div tabindex="1">Я получаю фокус клавиатуры, и я получаю его первым!</div></code>
<code><div tabindex="2">Я получаю фокус клавиатуры, и я получаю его вторым!</div></code>
Camper Cat имеет поле поиска на странице Вдохновляющие цитаты, которое он планирует позиционировать в верхнем правом углу с помощью CSS. Он хочет ввести <code>input</code> и представить элементы управления формой <code>input</code> как первые два элемента в порядке табуляции. Добавьте атрибут <code>tabindex</code>, со значением «1» в поиск <code>input</code> и атрибут <code>tabindex</code>со значением «2», в отправляемый <code>input</code>.
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
```
</section>
## Challenge Seed
<sectionid='challengeSeed'>
<divid='html-seed'>
```html
<body>
<header>
<h1>Even Deeper Thoughts with Master Camper Cat</h1>