tabindex

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

tabindex глобальний атрибут вказує, що його елемент може бути сфокусований, і коли саме він бере участь в послідовності навігації за допомогою клавіатури (зазвичай за допомогою клавіші Tab , звідти і назва).

Він приймає в якості значення ціле позитивне або негативне число з різними наслідками в залежності від величини цого числа:

  • Негативне значення (зазвичай tabindex="-1") має на увазі, що елемент недоступний під час послідовної навігації за допомогою клавіатури, але може бути сфокусований за допомогою Javascript або за допомогою візуального інтерфейсу. Переважно рекомендується створювати доступні віджети за допомогою JavaScript.

    Негативне значення корисне при наявності матеріалів поза екраном, які з'являються в певний момент події. Користувач не зможе сфокусувати будь-якої елемент з негативним значенням. Негативний tabindex блокує навігацію клавіатурою, але скрипт може виконати це за допомогою виклику focus() method.

  • tabindex="0" передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, але його лад визначається системою розміщення у файлі додатка.
  • Позитивне значення передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, при цьому його порядок визначається величиною значення числа. Тобто, tabindex="4" фокусується попереду tabindex="5", але після tabindex="3". Якщо кілька елементів мають одне й те саме позитивне значення tabindex то порядок їх розташування відносно один одного визначається за їх позицією в исходнику документа. Максимальне значення для tab-індекса становить 32767. Якщо не вказано, він отримує значення за замовчуванням 0.

    Уникайте використання tabindex зі значенням больше 0. Це значно заважає людям, які використовують допоміжні технології для навігації і роботи з вмістом веб-сторінки. Замість цього створіть документ з елементами в логічній послідовності.

Якщо ви встановите атрибут tabindex з <div>, то його нащадки не зможуть бути прокручені за допомогою клавіш клавіатури зі стрілками, якщо тільки ви не встановите tabindex на вміст також. Ознайомтеся з цією статтею, щоб зрозуміти ефект від tabindex.

Вимоги доступності

Уникайте використання атрибута tabindex в поєднанні з не-інтерактивним вмістом , щоб зробити щось, призначене для інтерактивної фокусування при введенні з клавіатури. Прикладом цього може служити використання елемента <div> для опису кнопки, а не елементу <button>.

Інтерактивні компоненти, створені з використанням неінтерактивних елементів, у дереві доступності не відображаються. Це не дозволяє допоміжним технологіям керувати і маніпулювати цими компонентами. Вміст має бути описано семантично з використанням інтерактивних елементів (<a>, <button>, <details>, <input>, <select>, <textarea>, і т.д.) і т.п.). Ці елементи мають вбудовані ролі і стани, що передають статус доступності. В іншому випадку ці компоненти повинні управлятися за допомогою ARIA.

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

Specification Status Comment
HTML Living Standard
The definition of 'tabindex' in that specification.
Living Standard Ніяких змін порівняно з останнім snapshot, HTML 5.1.
HTML 5.1
The definition of 'tabindex' in that specification.
Recommendation Snapshot of HTML Living Standard, без змін від HTML5.
HTML5
The definition of 'tabindex' in that specification.
Recommendation Snapshot of HTML Living Standard. From HTML 4.01 Specification, атрибут наразі підтримується на всіх елементах  (global attributes).
HTML 4.01 Specification
The definition of 'tabindex' in that specification.
Recommendation Підтримується лише на <a>, <area>, <button><input>, <object>, <select>, and <textarea>.

Сумісність з браузерами

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
tabindexChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Подивіться також