Comment ignorer l'élément HTML de tabindex?

362

Existe-t-il un moyen en HTML de dire au navigateur de ne pas autoriser l'indexation des onglets sur des éléments particuliers?

Sur ma page, bien qu'il y ait un diaporama qui est rendu avec jQuery, lorsque vous passez à travers cela, vous obtenez beaucoup de pressions sur les onglets avant que le contrôle d'onglet ne passe au lien visible suivant sur la page car toutes les choses tabulées sont masquées pour l'utilisateur visuellement.

Tom Gullen
la source

Réponses:

592

Vous pouvez utiliser tabindex="-1".

La spécification W3C HTML5 prend en charge les tabindexvaleurs négatives :

Si la valeur est un entier négatif
L'agent utilisateur doit définir l'indicateur de focus tabindex de l'élément, mais ne doit pas permettre à l'élément d'être atteint à l'aide de la navigation de focus séquentielle.


Attention cependant, il s'agit d'une fonctionnalité HTML5 et peut ne pas fonctionner avec les anciens navigateurs.
Pour être conforme à la norme W3C HTML 4.01 (depuis 1999) , tabindex doit être positif.


Exemple d'utilisation ci-dessous en HTML pur.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Martin Hennings
la source
12
Il semble que Google Chrome ne prend pas en charge le -1, ce qui est logique car techniquement tabIndex ne prend en charge que 0 -32767 selon le lienW3 . Alors quand j'ai fait ça; J'en ai utilisé 500. Hackish; mais a fonctionné.
Flea
38
@Flea Depuis la version 23, Google Chrome prend en charge -1 sur tabindex. Je ne sais pas combien de temps cela s'est passé, peut-être avant 23. J'ai testé "-1" dans Chrome 23, Firefox 18, IE8, IE9 et Opera 12.11 et cela a fonctionné dans tous les domaines.
jkupczak
5
J'ai modifié la réponse pour créer un lien vers la spécification HTML5 mise à jour. tabindexpermet désormais d'avoir des valeurs négatives.
James Donnelly
1
@JamesDonnelly Merci pour votre modification. J'ai rajouté la référence à la spécification W3C HTML4 pour la compatibilité du navigateur.
Martin Hennings
2
Pris en charge depuis IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
Skurpi
121

N'oubliez pas que, même si tabindextout est en minuscules dans les spécifications et dans le HTML, dans Javascript / le DOM, cette propriété est appelée tabIndex.

Ne perdez pas la tête en essayant de comprendre pourquoi votre appel d'index d'onglet modifié par programme element.tabindex = -1ne fonctionne pas. Utilisez element.tabIndex = -1.

Eric L.
la source
34
Cela semble être un commentaire et non une réponse.
DrCord
47
Eh, j'étais heureux de le lire, et je l'aurais probablement manqué s'il avait été enterré en tant que commentaire.
MalcolmOcean
10

Si ce sont des éléments naturellement dans l'ordre de tabulation comme les boutons et les ancres, les supprimer de l'ordre de tabulation avec tabindex = -1 est une sorte d'odeur d'accessibilité. S'ils fournissent des fonctionnalités en double, les supprimer de l'ordre de tabulation est correct, et envisagez d'ajouter aria-hidden = true à ces éléments pour que les technologies d'assistance les ignorent.

Mat
la source
8

Si vous travaillez dans un navigateur qui ne prend pas en charge tabindex="-1", vous pourrez peut-être vous contenter de donner aux éléments qui doivent être ignorés un index de tabulation très élevé . Par exemple, tabindex="500"déplace essentiellement l'ordre de tabulation de l'objet à la fin de la page.

Je l'ai fait pour un long formulaire de saisie de données avec un bouton jeté au milieu. Ce n'est pas un bouton sur lequel les gens cliquent très souvent, donc je ne voulais pas qu'ils y accèdent accidentellement et appuyez sur Entrée. disabledne fonctionnerait pas parce que c'est un bouton.

Jemmeh
la source
5

Un tel hack comme "tabIndex = -1" ne fonctionne pas pour moi avec Chrome v53.

C'est ce qui fonctionne pour Chrome et la plupart des navigateurs:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Val
la source
Cela n'affectera-t-il pas simplement un index de tabulation par défaut à l'élément plutôt que de désactiver la tabulation?
Lawyerson
@Lawyerson non, il désactive en fait la tabulation car il explique lui-même 'removeAttribute'. l'avez-vous essayé mais avec un résultat différent?
Val
2
Je l'ai essayé sans effet. Les navigateurs par défaut vous permettent de parcourir les entrées dans l'ordre dans lequel elles apparaissent sur la page même si aucun tabindex n'est défini dessus, il est donc logique pour moi que la simple suppression de l'attribut ne désactive pas réellement la tabulation. De plus, l'entrée que je veux utiliser celle-ci n'a pas d'attribut "tabindex" pour commencer.
Lawyerson
En exécutant l'extrait, je peux tabuler dans la notabindexboîte comme s'il l'avait fait tabIndex=5après avoir appuyé sur le bouton. Ce n'est pas un problème de maire mais cela ne le rend pas entièrement "non tabable".
Mikael Dúi Bolinder du
Cela ne fonctionne probablement pas parce que vous utilisez un étui à chameau. Ce devrait être tout en minusculestabindex
dman
3

Pour ce faire, ajoutez tabindex="-1". En l'ajoutant à un élément spécifique, il devient inaccessible par la navigation au clavier. Il y a un excellent article ici qui vous aidera à mieux comprendre tabindex .

Nesha Zoric
la source
2

Ajoutez simplement l'attribut disabledà l'élément (ou utilisez jQuery pour le faire pour vous). Désactivé empêche l'entrée d'être focalisée ou sélectionnée du tout.

Yaakov Ainspan
la source
Quelle version de Chrome?
Yaakov Ainspan
Chrome 49.0.2623.75 (64 bits).
Felix Eve
Ma version est 51.0.2704.103. Découvrez ce violon . Vous pourriez avoir le mauvais code, vous ne savez jamais.
Yaakov Ainspan
@AtulChaudhary, comment ça ne marche pas? Vous pouvez toujours le concentrer?
Yaakov Ainspan
une fois que les champs sont désactivés, ils restent désactivés et c'est un problème dans IOS9 mais semble fonctionner dans IOS10
Atul Chaudhary