web-dev-qa-db-fra.com

Quel est le tabindex = "- 1" dans bootstrap pour

A quoi sert l'attribut tabindex dans Bootstrap 3?

Sa documentation ne dit rien d'eux, bien qu'ils les utilisent pratiquement dans tous les modaux.

Je n'ai trouvé que ce qui concerne son utilisation, ce qui ne dit pas grand chose

Infobulles accessibles pour les utilisateurs de clavier et de technologies d'assistance

Pour les utilisateurs naviguant avec un clavier, et en particulier les utilisateurs de technologies d'assistance, vous ne devez ajouter des info-bulles qu'aux éléments pouvant être centrés au clavier, tels que des liens, des contrôles de formulaire ou tout élément arbitraire doté d'un attribut tabindex = "0".

Et j'ai découvert je ne peux pas appuyer sur esc pour masquer un modal si l'attribut tabindex n'est pas -1 .

twitter-bootstraptwitter-bootstrap-3bootstrap-modal
79
Alvaro

L'attribut tabindex définit explicitement l'ordre de navigation des éléments focalisables (généralement des liens et des contrôles de formulaire) dans une page. Il peut également être utilisé pour définir si les éléments doivent être focalisables ou non.

[Les deux] tabindex="0" et tabindex="-1" ont une signification particulière et fournissent des fonctionnalités distinctes en HTML. Une valeur de 0 indique que l'élément doit être placé dans l'ordre de navigation par défaut. Cela permet aux éléments qui ne peuvent pas être mis au point de manière native (tels que <div>, <span> et <p>)) reçoivent le focus du clavier. Bien sûr, il faut généralement utiliser des liens et des contrôles de formulaire pour tous les éléments interactifs, mais cela permet à d’autres éléments d’être focalisables et de déclencher une interaction.

Une valeur de tabindex="-1" supprime l'élément du flux de navigation par défaut (autrement dit, un utilisateur ne peut pas y accéder), mais il lui permet de recevoir le focus programmatique , ce qui signifie que le focus peut être défini depuis un lien ou avec un script. ** Cela peut être très utile pour les éléments qui ne doivent pas être tabulés, mais sur lesquels il peut être nécessaire de définir le focus .

Un bon exemple est une fenêtre de dialogue modale - une fois ouverte, le focus doit être défini sur la boîte de dialogue afin qu'un lecteur d'écran puisse commencer lecture et le clavier commence à naviguer dans la boîte de dialogue. Étant donné que la boîte de dialogue (probablement probablement un élément <div>) ne peut pas être mise au point par défaut, son affectation à tabindex="-1" permet de lui affecter le focus avec un script lors de sa présentation.

Une valeur de -1 peut également être utile dans les widgets et les menus complexes qui utilisent des touches de direction ou d'autres touches de raccourci pour garantir qu'un seul élément le widget est navigable à l'aide de la touche de tabulation, tout en permettant de définir le focus sur d'autres composants du widget.

Source: http://webaim.org/techniques/keyboard/tabindex

C'est pourquoi vous avez besoin de tabindex="-1" sur le modal <div> afin de permettre aux utilisateurs d'accéder aux raccourcis souris et clavier courants. J'espère que ça t'as aidé.

124
Kyle Anderson

L'attribut tabindex est associé à HTML , il n'est pas spécifique à Bootstrap.

Cette propriété est chargée d'indiquer si un élément est accessible par la navigation au clavier.

Vous devez rechercher trois scénarios différents:

  1. Lorsque vous ajoutez tabindex = "0" à un élément, cela signifie qu'il est accessible par la navigation au clavier, mais l'ordre est défini par l'ordre source des documents.

  2. Lorsque ajoute une valeur positive à l'attribut tabindex (par exemple tabindex = "1", tabindex = "2"), ces éléments sont accessibles par la navigation au clavier et l'ordre est défini par la valeur de l'attribut.

  3. Lorsque l'ajout d'une valeur négative à tabindex (généralement tabindex="-1"), cela signifie que l'élément est non accessible par la navigation au clavier, mais peut être utilisé à l’aide de la fonction de mise au point dans JS

7
Nesha Zoric