Visualiseur de l'ordre de focus
Cartographiez la séquence de tabulation clavier, détectez les tabindex positifs, les noms manquants et les éléments interactifs non sémantiques.
- 1Saisissez l'URL de votre page ou collez du HTML — Utilisez « Scanner l'URL » pour une page en direct ou « Coller du HTML » pour un composant. L'outil extrait tous les éléments interactifs (liens, boutons, champs, éléments avec tabindex).
- 2Lisez la liste de l'ordre de focus — Les éléments sont listés dans l'ordre de tabulation clavier. Chaque entrée montre le type d'élément, son nom accessible et sa valeur tabindex.
- 3Repérez les problèmes — Points à surveiller : valeurs tabindex positives (tabindex='1' ou plus force un ordre non naturel — utilisez uniquement 0 ou -1), éléments sans nom accessible (les utilisateurs de lecteur d'écran ne sauront pas ce qu'ils sont), et <div> ou <span> utilisés comme boutons.
- 4Corrigez et vérifiez — Supprimez les valeurs tabindex positives et fiez-vous à l'ordre du DOM. Ajoutez aria-label ou du texte visible aux éléments sans nom. Remplacez les éléments interactifs non sémantiques par des balises <button> ou <a> appropriées.
Besoin d'une analyse de focus par lots ?
Pro : analysez jusqu'à 10 URL simultanément, exportez les résultats complets en CSV.
Critères WCAG pertinents
SC 2.4.3 Ordre de focus (A) — Les composants focalisables doivent recevoir le focus dans un ordre qui préserve le sens et l'opérabilité.
SC 2.4.7 Focus visible (AA) — Toute interface utilisable au clavier doit avoir un indicateur de focus visible.
SC 4.1.2 Nom, rôle, valeur (A) — Tous les composants UI doivent avoir un nom accessible et un rôle.
Critères compagnons WCAG 2.2 — vérification manuelle requise
Cet outil détecte les problèmes programmatiques d'ordre de focus. Deux critères supplémentaires WCAG 2.2 de niveau AA ne peuvent pas être détectés automatiquement et doivent être vérifiés manuellement :
- SC 2.4.11 Focus non masqué (minimum, AA) — Quand un composant reçoit le focus clavier, il ne doit pas être entièrement masqué par du contenu créé par l'auteur (ex. en-têtes fixes, bannières de cookies).
- SC 2.4.13 Apparence du focus (AA) — L'indicateur de focus doit avoir une surface minimale (périmètre × 2 px CSS) et un rapport de contraste d'au moins 3:1 entre les états avec et sans focus.
Important Legal Disclaimer
This tool is a self-assessment aid only and does not constitute legal advice or a formally certified compliance assessment. Outputs — including reports, scores, checklists, and accessibility statements — are for internal use and should be reviewed by a qualified legal representative or independent accessibility auditor before being relied upon for regulatory, procurement, or public-disclosure purposes. All assessment risk lies with the internal assessor. accessibilityref, its developers, and staff accept zero liability for losses arising from use of or reliance on these outputs. Always verify against official sources: the W3C WCAG 2.2 Recommendation, the European Accessibility Act (Directive 2019/882), and your national enforcement authority.