Что tabindex = "- 1" в начальной загрузке для

100

Для чего tabindexнужен атрибут в Bootstrap 3?

В документации о них ничего не говорится, хотя они используются практически во всех модальных окнах.

Я нашел это только относительно его использования, что на самом деле мало что говорит

Доступные всплывающие подсказки для пользователей клавиатуры и вспомогательных технологий

Для пользователей, использующих клавиатуру, и, в частности, пользователей вспомогательных технологий, вы должны добавлять всплывающие подсказки только к элементам с фокусом на клавиатуре, таким как ссылки, элементы управления формы или любой произвольный элемент с атрибутом tabindex = "0".

И я обнаружил, что не могу нажать, escчтобы скрыть модальное окно, если tabindexатрибута нет-1 .

Альваро
источник

Ответы:

160

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). Если tabindex отсутствует в div, фокусировка работать не будет. Вот почему BS добавляет tabindex = -1 в модальный div. См developer.mozilla.org/en-US/docs/Web/Accessibility/... : если TabIndex нет, то фокусируемый с JS будет следовать платформы конвенции элемента (да для элементов формы, ссылки и т.д.). Это означает, что <div> нельзя сфокусировать, если tabindex отсутствует.
Canada Wan
Стоит добавить, что элементы с tabindex = "- 1" также можно фокусировать, щелкнув по ним.
Black
13

TabIndex атрибут связан с HTML , это не относится к Bootstrap.

Это свойство отвечает за указание, доступен ли элемент с помощью клавиатуры.

Вам нужно учитывать три разных сценария:

  1. При добавлении tabindex = "0"к элементу это означает, что он доступен для навигации с клавиатуры, но порядок определяется исходным порядком документов.

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

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

Неша Зорич
источник