web-dev-qa-db-fra.com

Où tabindex = "0" les éléments HTML se retrouvent-ils dans l'ordre de tabulation?

Dans quel ordre les éléments avec une valeur tabindex de 0 sont-ils centrés lorsque la page Web est tabulée?

htmltabindex
35
HELP

La spécification HTML déclare:

Les éléments ayant un tabindex identique les valeurs doivent être parcourues dans le fichier ordre ils apparaissent dans le caractère courant.

31
Alan Haggai Alavi

Les assignations tabindex sont gérées de la manière suivante (pour les éléments qui supportent l'attribut tabindex):

  • Les nombres positifs (1,2,3 ... 32767) sont traités par ordre de tabulation.
  • 0 est traité dans l'ordre source (l'ordre dans lequel il apparaît dans le DOM)
  • -1 est ignoré pendant la tabulation mais peut être mis au point.

Ces informations proviennent de: http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

83
haltersweb

C'est un peu plus compliqué que la réponse d'Alan Haggai Alavi.

Après l'analyse, IE8 et Opera respectent les spécifications HTML4. Firefox et Chrome utilisent toutefois l'ordre du DOM. Cela est important avec un balisage mal formé comme celui-ci.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test case 1</title>
  </head>
  <body>
    <form>
      <table>
        <tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
        <div><input id="second" value="second in the character stream" tabindex="0"></div>
      </table>
    <form>
  </body>
</html>

Vous pourriez bien affirmer qu'avec une marge mal formée, tous les paris sont de côté, alors qu'en est-il de JavaScript?

Considérons ce cas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test case 2</title>
    <script type="text/javascript">
      moveFirst = function()
      {
        var f = document.getElementById("first");
        f.parentNode.removeChild(f);
        document.body.appendChild(f);
      }
    </script>
  </head>
  <body>
    <form>
      <table>
        <tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
        <tr><td><div><input id="second" value="second in the character stream" tabindex="0"></div></td></tr>
      </table>
    <form>
    <div onclick="moveFirst()">move</div>
  </body>
</html>

Dans ce cas, lorsqu'un utilisateur clique sur "déplacer", IE8, Firefox, Chrome et Opera utilisent tous l'ordre du DOM, et non l'ordre des flux de caractères.

Enfin, HTML5 n'offre aucune garantie quant à l'ordre de tabulation entre les éléments ayant un tabindex de 0, indiquant simplement qu'il doit respecter les conventions de plate-forme.

22
Alohci

Un exemple est la meilleure façon de se souvenir.

Supposons que vous appuyez sur la touche Tab du clavier

<button tabindex="0">one</button>
<button tabindex="-1">two</button>
<button tabindex="0">three</button>
<button tabindex="5">four</button>

La première four sera centrée lors de la pression de tabulation (car tabindex est le plus élevé)
then one (car tabindex est 0, premier en haut, mais 1er affiché dans le document)
then three (car tabindex est égal à 0, comme ci-dessus, mais le deuxième élément est affiché dans le document)
alors rien d'autre (La two n'est jamais centrée car tabindex est -1)

Pourquoi tabindex = "0" est-il requis? de toute façon l'onglet s'arrête à un bouton, non?
Vrai, vous pouvez aussi avoir des tabulations pour une div, comme:

<div tabindex="0">some content</div>

Par exemple, cela est utile lorsque vous voulez qu'un lecteur d'écran cesse de lire un texte dans un div.

J'espère que ça a aidé.

1
Manohar Reddy Poreddy

tabindex="0" peut inclure la tabulation vers des éléments du navigateur Web autres que la page, tels que la barre d'adresse URL 

Testé pour être le cas pour Firefox 32.03.

0
Kevin