OUJOOD.COM
Définition et utilisation de l'attribut tabindex
HTML – Les attributs globaux
L'attribut tabindex permet de contrôler l'ordre de navigation au clavier
d'un élément HTML lorsque l'utilisateur appuie sur la touche Tab. Cet attribut est essentiel pour
améliorer l'accessibilité web et offrir une expérience utilisateur optimale, particulièrement pour
les personnes naviguant sans souris ou utilisant des technologies d'assistance.
En définissant un tabindex, vous pouvez rendre des éléments non interactifs focalisables ou modifier
l'ordre naturel de navigation du DOM (Document Object Model).
<element tabindex="number">
Exemple de liens avec un ordre de tabulation spécifié
Dans cet exemple concret, nous modifions l'ordre de tabulation par défaut de trois liens.
Normalement, la navigation suivrait l'ordre d'apparition dans le HTML, mais grâce à tabindex,
nous définissons un ordre personnalisé : Google (1), puis Oujood (2), et enfin Microsoft (3).
Exemple : 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Exemple attribut tabindex HTML5</title> </head> <body> <!-- Premier lien visuellement, mais second dans l'ordre de tabulation --> <a href="https://www.oujood.com/" tabindex="2">Apprendre à créer des sites web</a><br /> <!-- Deuxième lien visuellement, mais PREMIER dans l'ordre de tabulation --> <a href="http://www.google.com/" tabindex="1">Google</a><br> <!-- Troisième lien visuellement, et troisième dans l'ordre de tabulation --> <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a> <p><strong>Note :</strong> Essayez de naviguer entre les liens en utilisant la touche « Tab » de votre clavier. Vous constaterez que le focus commence par Google, puis Oujood, et enfin Microsoft.</p> <p><strong>Astuce :</strong> Utilisez Maj + Tab pour naviguer dans le sens inverse.</p> </body> </html>
Navigateurs pris en charge
L'attribut tabindex bénéficie d'une compatibilité universelle
avec tous les navigateurs modernes, incluant Internet Explorer 4.0+, Firefox 1.5+, Opera 9.0+, Chrome 1.0+ et
Safari 3.1+. Cette large prise en charge garantit une expérience cohérente pour tous vos utilisateurs.
Différences entre HTML 4.01 et HTML5
HTML5 a considérablement élargi la portée de tabindex : l'attribut peut désormais être appliqué sur n'importe quel élément HTML, offrant ainsi une flexibilité maximale pour gérer la navigation au clavier de manière granulaire (divs, spans, sections, articles, etc.).
En HTML 4.01, l'utilisation était strictement limitée aux éléments interactifs suivants : <a>, <area>, <button>, <input>, <object>, <select>, et <textarea>. Cette restriction limitait les possibilités de création d'interfaces riches et accessibles.
Valeurs de l'attribut tabindex
L'attribut tabindex accepte trois types de valeurs, chacune ayant un comportement spécifique :
| Valeur | Description |
|---|---|
| Nombre positif (1, 2, 3...) |
Définit un ordre de tabulation personnalisé. La valeur 1 reçoit le focus en premier, puis 2, puis 3, etc. Attention : cette approche peut créer une expérience déroutante si elle ne correspond pas à l'ordre visuel des éléments. |
| 0 | L'élément devient focalisable par la touche Tab et suit l'ordre naturel du DOM. C'est la valeur recommandée pour rendre des éléments non interactifs (comme des <div>) accessibles au clavier tout en préservant un ordre logique. |
| -1 | L'élément peut recevoir le focus programmatiquement via JavaScript (méthode element.focus())
mais est exclu de la navigation au clavier. Idéal pour des modales, des menus déroulants ou des contenus
qui doivent être focalisés uniquement dans certaines situations. |
Bonnes pratiques et recommandations d'accessibilité
- Évitez les valeurs positives (1, 2, 3...) sauf pour des cas très spécifiques. Un ordre de tabulation qui ne correspond pas à l'ordre visuel désoriente les utilisateurs et nuit à l'accessibilité.
- Privilégiez tabindex="0" pour rendre des éléments focalisables tout en respectant le flux naturel du document. C'est la solution la plus intuitive et accessible.
- Testez systématiquement la navigation au clavier sur l'ensemble de votre site. Parcourez toutes les pages avec uniquement la touche Tab pour identifier les problèmes d'ordre ou d'accessibilité.
- Utilisez tabindex="-1" pour les éléments qui nécessitent un focus programmatique uniquement (boîtes de dialogue modales, messages d'erreur dynamiques, panneaux de navigation cachés).
- Maintenez un ordre logique : l'ordre de tabulation doit toujours correspondre à l'ordre visuel et à la structure sémantique de votre contenu pour une expérience utilisateur cohérente.
- Ajoutez des indicateurs visuels de focus avec CSS (
:focus) pour que les utilisateurs sachent clairement quel élément est sélectionné lors de la navigation au clavier.
Exemple pratique avec tabindex="0" et tabindex="-1"
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple tabindex 0 et -1</title>
<style>
.focusable:focus {
outline: 3px solid #4CAF50;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<!-- Div normale : non focalisable par défaut -->
<div>Cette div n'est pas focalisable</div>
<!-- Div avec tabindex="0" : focalisable avec Tab -->
<div class="focusable" tabindex="0">Cette div est focalisable avec Tab</div>
<!-- Div avec tabindex="-1" : focalisable uniquement via JavaScript -->
<div class="focusable" tabindex="-1" id="modal">Ce contenu peut être focalisé par JS</div>
<button onclick="document.getElementById('modal').focus()">
Focaliser le contenu modal
</button>
</body>
</html>
Par carabde | Mis à jour le 15 novembre 2025