web-dev-qa-db-fra.com

Comment ignorer un élément HTML de tabindex?

Le langage HTML permet-il au navigateur de ne pas autoriser l’indexation par tabulation sur des éléments particuliers?

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

htmltabindex
301
Tom Gullen

Vous pouvez utiliser tabindex="-1" .

La spécification HTML5 du W3C prend en charge les valeurs tabindex négatives:

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

Attention, il s'agit d'une fonctionnalité HTML5 qui risque de ne pas fonctionner avec les anciens navigateurs.
Pour être conforme au { norme HTML 4.01 du W3C (à partir de 1999) }, tabindex devra être positif.

Exemple d'utilisation ci-dessous en HTML pur.

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

487
Martin Hennings

N'oubliez pas que, même si tabindex est tout en minuscule dans les spécifications et dans le code HTML, dans Javascript /, la propriété DOM appelée tabIndex.

N'oubliez pas d'essayer de comprendre pourquoi votre index de tabulation modifié par programmation appelant element.tabindex = -1 ne fonctionne pas. Utilisez element.tabIndex = -1.

91
Eric Lawler

Si ces éléments sont naturellement dans l'ordre de tabulation, comme les boutons et les ancres, les supprimer de l'ordre de tabulation avec tabindex = -1 est en quelque sorte une 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.

8
Matt

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>

4
Val

Si vous travaillez dans un navigateur qui ne prend pas en charge tabindex="-1", vous pourrez peut-être vous contenter de donner les éléments à ignorer un index de tabulation très élevé . Par exemple, tabindex="500" déplace fondamentalement 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 de celui-ci. Ce n’est pas un bouton sur lequel les gens cliquent très souvent, je ne voulais donc pas qu’ils appuient accidentellement sur celui-ci et appuyez sur Entrée. disabled ne fonctionnerait pas parce que c'est un bouton.

4
Jemmeh

Ajoutez simplement l'attribut disabled à l'élément (ou utilisez jQuery pour le faire à votre place). Désactivé empêche la focalisation ou la sélection de l'entrée.

1
Yaakov Ainspan

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

0
Nesha Zoric