tabindex HTML атрибут - порядок фокусування елементів
Глобальний атрибут tabindex дозволяє авторам контролювати фокусування елемента та його позицію в послідовному порядку навігації фокусом.
Атрибут tabindex приймає цілочисельні значення: позитивне число визначає його відносний порядок, 0 розміщує його в порядку навігації за замовчуванням на основі його позиції в документі, а -1 робить елемент фокусованим програмно, але виключає його з послідовної навігації за допомогою клавіатури. Атрибут не може зробити елемент нефокусованим; цього можна досягти лише шляхом вимкнення або інертизації елемента.
Використовуйте tabindex з обережністю. Позитивні значення (більші за 0) можуть ускладнити навігацію для користувачів клавіатури, оскільки вони змінюють природний порядок фокусування. Зазвичай рекомендується використовувати tabindex="0" або tabindex="-1".
Синтаксис
<div tabindex="0">...</div>Значення
Атрибут може приймати наступні значення:
позитивне число (наприклад, 1, 2, ...)Елемент стає фокусованим і його порядок у послідовній навігації визначається значенням. Елементи з меншим позитивним
tabindexотримують фокус раніше.0Елемент стає фокусованим і його порядок у послідовній навігації визначається його позицією в документі (DOM-порядком).
-1Елемент стає фокусованим програмно (наприклад, за допомогою JavaScript
element.focus()), але виключається з послідовної навігації за допомогою клавіатури (клавіша Tab).
Приклади використання
<p>Натисніть <kbd>Tab</kbd>, щоб побачити порядок фокусування:</p>
<button>Кнопка 1 (за замовчуванням)</button>
<button tabindex="3">Кнопка 2 (tabindex="3")</button>
<button tabindex="1">Кнопка 3 (tabindex="1")</button>
<button tabindex="2">Кнопка 4 (tabindex="2")</button>
<button tabindex="0">Кнопка 5 (tabindex="0")</button>
<div tabindex="-1" style="border: 1px solid #ccc; padding: 10px; display: inline-block;">
<p>Цей div можна сфокусувати програмно, але не за допомогою Tab.</p>
<button onclick="this.parentNode.focus()">Сфокусувати div</button>
</div>Підтримка браузерів
tabindex |
|---|