Quel est le tabindex=“-1” dans le bootstrap pour

Quelle est la tabindex attribut dans le Bootstrap 3 pour?

Sa documentation ne dit rien sur eux alors qu'ils les utilisent pratiquement dans tous les auxiliaires modaux.

J'ai seulement trouver ce qui concerne son utilisation, ce qui ne veut pas vraiment dire grand-chose

Accessibles les info-bulles pour le clavier et la technologie d'assistance aux utilisateurs

Pour les utilisateurs de la navigation avec un clavier, et en particulier les utilisateurs de technologies d'assistance, vous devez uniquement ajouter des info-bulles pour clavier-focusable des éléments tels que des liens, des contrôles de formulaire, ou n'importe quel élément avec un tabindex="0" attribut.

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

InformationsquelleAutor Alvaro | 2015-10-02
  1. 132

    La tabindex attribut définit explicitement l'ordre de navigation pour focusable éléments (généralement des liens et des contrôles de formulaire) à l'intérieur d'une page. Elle peut également être utilisée pour déterminer si les éléments doivent être focusable ou pas.

    [À la fois] tabindex="0" et tabindex="-1" ont une signification spéciale et de fournir des fonctionnalités distinctes en HTML. Une valeur de 0 indique que l'élément doit être placé dans la navigation par défaut de la commande. Cela permet à des éléments qui ne sont pas nativement focusable (comme <div>, <span>, et <p>) pour recevoir le focus du clavier. Bien sûr, on doit généralement utiliser les liens et les contrôles de formulaire pour tous les éléments interactifs, mais ce n'est permettre à d'autres éléments peut recevoir le focus et le déclencheur de l'interaction.

    Un tabindex="-1" valeur supprime l'élément de la navigation par défaut des flux de (c'est à dire, un utilisateur ne peut pas l'onglet pour elle), mais il lui permet de recevoir des programmatique focus, sens de l'orientation peut être définie à partir d'un lien ou avec des scripts.** Cela peut être très utile pour les éléments qui ne devraient pas être à onglets, mais qui peuvent avoir besoin d'avoir l'accent mis à leur.

    Un bon exemple est un fenêtre de dialogue modale - lorsqu'il est ouvert, l'accent doit être fixé à la boîte de dialogue de sorte qu'un lecteur d'écran va commencer lecture et le clavier va commencer navigation dans la boîte de dialogue. Parce que la boîte de dialogue (probablement juste un <div> élément) n'est pas peut recevoir le focus par défaut, en l'assignant tabindex="-1" permet de se concentrer à être ensemble avec les scripts, lorsqu'elle est présentée.

    Une valeur de -1 peut également être utile dans le complexe des widgets et des menus qui utilisent les touches fléchées ou les autres touches de raccourci assurer qu'un seul élément dans le widget est navigable avec la touche tab, mais permettent toujours de se concentrer sur d'autres composants à l'intérieur du widget.

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

    C'est pourquoi vous avez besoin de tabindex="-1" sur le modal <div>, de sorte que les utilisateurs peuvent accéder à des communes de la souris et des raccourcis clavier. Espérons que cela aide.

    • L'attribut est une partie de code HTML, cela n'a rien à voir avec Bootstrap en particulier.
    • Oui, c'est exactement ce qui est dit ici, que c'est une "fonctionnalité distincte dans le HTML" et non pas quelque chose à faire avec Bootstrap.
    • Pour être en mesure de se concentrer sur un <div> avec le JavaScript, l'attribut tabindex DOIT être défini sur cet élément (toutes les valeurs telles que tabindex=-1). Si tabindex n'est pas présent sur la div, en se concentrant ne fonctionnera pas. C'est pourquoi BS ajoute tabindex=-1 pour la lightbox div. Voir developer.mozilla.org/en-US/docs/Web/Accessibility/...: si la propriété tabindex est pas présent, la focusable avec JS suivra la plate-forme de convention de l'élément (oui pour les contrôles de formulaire, des liens, etc...). Cela signifie <div> n'est pas focuable si tabindex n'est pas présent.
    • Vaut la peine d'ajouter que des éléments avec tabindex="-1" sont également focusable en cliquant sur eux.
    InformationsquelleAutor Kyle Anderson
  2. 8

    La tabindex attribut est associé avec HTML, il n'est pas spécifique à la méthode Bootstrap.

    Cette propriété est responsable pour indiquer si un élément est accessible par la navigation au clavier.

    Vous avez besoin pour regarder dehors pour les trois scénarios différents:

    1. Lors de l'ajout d' tabindex = "0" à un élément, cela signifie qu'il est accessible par le clavier de navigation, mais l'ordre est défini par les documents de l'ordre de la source.

    2. Quand l'ajout d'une valeur positive de l'attribut tabindex (par exemple tabindex = "1", tabindex = "2") ces éléments sont accessibles par le clavier de navigation et la commande est définie par la valeur de l'attribut.

    3. Quand l'ajout d'une valeur négative à tabindex (généralement tabindex="-1"), cela signifie que l'élément est pas accessible par le clavier de navigation, mais peut être porté à l'aide de fonction de mise au point en JS.

    InformationsquelleAutor Nesha Zoric