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

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.

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 />

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.

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.

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.

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>

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 .

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.