Для чого використовується tabindex = “- 1” у bootstrap


100

Для чого призначений tabindexатрибут у Bootstrap 3?

Його документація нічого не говорить про них, хоча вони використовують їх практично у всіх модальних режимах.

Я знаходжу це лише щодо його використання, що насправді не говорить багато про що

Доступні підказки для користувачів клавіатури та допоміжних технологій

Користувачам, які здійснюють навігацію за допомогою клавіатури, і зокрема користувачам допоміжних технологій, слід додавати підказки лише до елементів, націлених на клавіатуру, таких як посилання, елементи керування формою або будь-який довільний елемент з атрибутом tabindex = "0".

І я з’ясував, що не можу натиснути, escщоб приховати модаль, якщо tabindexатрибут не є-1 .

Відповіді:


159

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

[Обидва] tabindex="0"і tabindex="-1"мають особливе значення та забезпечують чітке функціонування в HTML. Значення 0вказує на те, що елемент слід розміщувати в порядку навігації за замовчуванням. Це дозволяє елементи, які з самого початку не фокусируемое (такі , як <div>, <span>, і <p>) , щоб отримати фокус клавіатури. Звичайно, зазвичай слід використовувати посилання та елементи керування формою для всіх інтерактивних елементів, але це дозволяє іншим елементам бути фокусованими та викликати взаємодію.

tabindex="-1"Значення видаляє елемент з потоку навігації за замовчуванням (тобто, користувач не може вкладка до нього), але він дозволяє отримати програмну спрямованість , тобто фокус може бути встановлений на нього за посиланням або з допомогою сценаріїв. ** Це може бути дуже корисно для елементів, на які не слід вкладати вкладки, але для яких, можливо, потрібно встановити фокус .

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

Значення -1також може бути корисним у складних віджетах та меню, які використовують клавіші зі стрілками або інші комбінації клавіш, щоб забезпечити можливість переміщення лише одним елементом у віджеті за допомогою клавіші табуляції, але все ж дозволяють встановлювати фокус на інших компонентах віджета.

Джерело: http://webaim.org/techniques/keyboard/tabindex

Ось чому вам потрібен tabindex="-1"модальний <div>, щоб користувачі мали доступ до загальних комбінацій клавіш миші та клавіатури. Сподіваюся, що це допомагає.


1
Атрибут є частиною HTML, він не має нічого спільного з Bootstrap.
Lutz Prechelt

8
Так, саме про це тут говорять, що це "окрема функціональність у HTML", а не щось спільне з Bootstrap.
Кайл Андерсон,

1
Щоб мати змогу зосередитись на <div> за допомогою JavaScript, атрибут tabindex ПОВИНЕН бути визначений для цього елемента (будь-які значення, такі як tabindex = -1). Якщо табіндекс відсутній у div, фокусування не буде працювати. Ось чому BS додає tabindex = -1 до модального div. Див developer.mozilla.org/en-US/docs/Web/Accessibility / ... : якщо TabIndex немає, то фокусна з JS буде слідувати платформи конвенції елемента (так для елементів форми, посилання і т.д.). Це означає, що <div> не можна фокусувати, якщо табіндекс відсутній.
Канада Ван

Варто додати, що елементи з tabindex = "- 1" також можна фокусувати, натискаючи на них.
Black Mantha

13

TabIndex атрибут пов'язаний з HTML , це не відноситься до Bootstrap.

Ця властивість відповідає за вказівку, чи доступний елемент за допомогою навігації за допомогою клавіатури.

Вам потрібно звернути увагу на три різні сценарії:

  1. При додаванні tabindex = "0"до елемента це означає, що він доступний за допомогою навігації за допомогою клавіатури, але порядок визначається порядком джерела документів.

  2. При додаванні позитивного значення до атрибута tabindex (наприклад tabindex = "1", tabindex = "2") ці елементи доступні за допомогою навігації за допомогою клавіатури, а порядок визначається значенням атрибута.

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.