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>
, чтобы пользователи могли получить доступ к обычным сочетаниям клавиш и мыши. Надеюсь, это поможет.
TabIndex атрибут связан с HTML , это не относится к Bootstrap.
Это свойство отвечает за указание, доступен ли элемент с помощью клавиатуры.
Вам нужно учитывать три разных сценария:
При добавлении
tabindex = "0"
к элементу это означает, что он доступен для навигации с клавиатуры, но порядок определяется исходным порядком документов.При добавлении положительного значения к атрибуту tabindex (например
tabindex = "1", tabindex = "2"
) эти элементы становятся доступными с помощью навигации с клавиатуры, а порядок определяется значением атрибута.При добавлении отрицательного значения к tabindex (обычно
tabindex="-1"
) это означает, что элемент недоступен для навигации с клавиатуры, но его можно сфокусировать с помощью функции фокуса в JS.источник