1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: tabindex
slug: Web/HTML/Global_attributes/tabindex
tags:
- Attribut
- Attribut universel
- HTML
- Reference
translation_of: Web/HTML/Global_attributes/tabindex
original_slug: Web/HTML/Attributs_universels/tabindex
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>tabindex</strong></code> est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche <kbd>Tab</kbd>). Si plusieurs éléments partagent la même valeur d'attribut <strong><code>tabindex</code></strong>, leur ordre sera calculé en fonction de leur position dans le document.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>Cet attribut peut prendre l'une des valeurs suivantes :</p>
<ul>
<li>Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ;
<div class="note">
<p><strong>Note :</strong> Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec <a href="/fr/docs/Web/API/HTMLElement/focus">la méthode <code>focus()</code></a>.</p>
</div>
</li>
<li><code>0</code> : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ;
<div class="warning">
<p><strong>Attention !</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p>
</div>
</li>
<li>Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant.
<div class="warning">
<p><strong>Attention !</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p>
</div>
</li>
</ul>
<p>Si on utilise l'attribut <code>tabindex</code> sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si <code>tabindex</code> est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">cet exemple JSFiddle</a>.</p>
<div class="note">
<p><strong>Note :</strong> La valeur maximale pour <code>tabindex</code> est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><button tabindex="1">Un bouton</button>
<textarea>Saisir un texte</textarea>
<button tabindex="0">Un autre bouton</button>
<button tabindex="1">Et un troisième</button></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Il faut éviter d'utiliser l'attribut <code>tabindex</code> avec du contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">non-interactif</a> si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).</p>
<p>Les composants rendus interactifs par cette méthode ne feront pas partie de l'<a href="/fr/Apprendre/a11y/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via <a href="/fr/docs/Accessibilité/ARIA">ARIA</a>).</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Utiliser l'attribut <code>tabindex</code>|<em>The Paciello Group</em> (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("html.global_attributes.tabindex")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>La propriété {{domxref("HTMLElement.tabIndex")}} qui reflète cet attribut.</li>
<li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
<li><a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Ce billet en anglais sur l'accessibilité et <code>tabindex</code></a> écrit par Adrian Roselli</li>
<li><code><a href="/fr/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></code></li>
</ul>
|
