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.
Voir la version Pro par lots: analysez jusqu'à 10 URL avec détection outline:none et export CSV/preuves →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.
Avertissement juridique important
Cet outil est uniquement une aide à l'auto-évaluation et ne constitue pas un conseil juridique ni une évaluation de conformité officiellement certifiée. Les sorties, y compris rapports, scores, listes de contrôle et déclarations d'accessibilité, sont à usage interne et doivent être examinées par un représentant juridique qualifié ou un auditeur d'accessibilité indépendant avant d'être utilisées à des fins réglementaires, d'achat ou de divulgation publique. Tout le risque de l'évaluation incombe à l'évaluateur interne. accessibilityref, ses développeurs et son personnel n'acceptent aucune responsabilité pour les pertes résultant de l'utilisation ou de la confiance accordée à ces sorties. Vérifiez toujours auprès des sources officielles: la Recommandation W3C WCAG 2.2, le European Accessibility Act (Directive 2019/882), et votre autorité d'application nationale.