Accessibility Inspector effectue des vérifications WCAG 2.1 Level AA automatisées sur n'importe quelle page web et génère un rapport catégorisé des problèmes d'accessibilité. Détectez les contrast ratios insuffisants, les alt text manquants sur les images, les rôles et attributs ARIA incorrects, les labels de formulaires manquants, les problèmes de navigation au clavier et les landmark regions absentes — avec mise en surbrillance de chaque élément concerné en un seul clic.
L'accessibilité web n'est pas facultative — c'est une obligation légale dans de nombreuses juridictions et une nécessité pour les 15 % de la population mondiale vivant avec un handicap. Pourtant, les problèmes d'accessibilité sont invisibles lors du développement et des tests habituels. Un bouton peut sembler correct visuellement mais être totalement inaccessible aux screen readers parce qu'il s'agit d'un div stylisé sans attribut role. Un texte peut vous paraître lisible mais ne pas satisfaire les exigences de contrast ratio pour les utilisateurs malvoyants. Accessibility Inspector détecte automatiquement ces problèmes invisibles. Il vérifie des dizaines de critères WCAG 2.1 Level AA, notamment les contrast ratios (minimum 4,5:1 pour le texte normal, 3:1 pour le grand texte), les alt text manquants sur les images, les labels absents sur les champs de formulaire, les rôles et attributs ARIA incorrects, les landmarks de document manquants (nav, main, footer) et les indicateurs de focus au clavier. Chaque problème indique l'élément concerné, le critère WCAG spécifique enfreint et une recommandation de correction. Cliquez sur n'importe quel problème pour mettre en évidence l'élément correspondant dans la page.
Effectue des vérifications automatisées par rapport aux critères de succès WCAG 2.1 Level AA, couvrant les catégories perceptibilité, opérabilité, compréhensibilité et robustesse. Chaque vérification affiche le critère spécifique (ex. : 1.4.3 Contrast, 1.1.1 Non-text Content) et son statut réussite/échec.
Calcule le contrast ratio entre la couleur du texte et la couleur d'arrière-plan pour chaque élément textuel de la page. Signale les éléments en dessous de 4,5:1 pour le texte normal ou 3:1 pour le grand texte (18px+ ou 14px+ en gras). Affiche le ratio réel et le minimum requis.
Analyse chaque élément img, svg et image role. Signale les attributs alt manquants, les alt vides sur des images non décoratives, et les alt text trop génériques ("image", "photo"). Suggère si chaque image nécessite un alt descriptif, un alt vide (décoratif) ou role="presentation".
Vérifie les utilisations incorrectes de rôles ARIA (rôles appliqués aux mauvais éléments), les attributs ARIA obligatoires manquants (ex. : aria-label sur les boutons icônes), les IDs en double référencés par aria-labelledby, et les landmark regions absentes (absence de main, de nav). Recommande des alternatives en HTML sémantique.
S'assure que chaque champ de formulaire (text, email, password, checkbox, select) dispose d'un label associé — via un élément label avec for/id correspondants, aria-label ou aria-labelledby. Les champs sans label sont inaccessibles aux screen readers.
Les problèmes sont classés en Erreurs (à corriger absolument — obstacles à l'accès), Avertissements (à corriger — obstacles potentiels) et Réussites (accessible confirmé). Le nombre d'erreurs est affiché en évidence. Cliquez sur n'importe quel problème pour mettre en surbrillance l'élément concerné dans la page.
Avant de lancer une nouvelle page ou fonctionnalité, exécutez Accessibility Inspector pour détecter les problèmes tôt. Les alt text manquants, les champs de formulaire sans label et les violations de contrast ratio sont faciles à corriger en phase de développement, mais coûteux à découvrir en production.
De nombreuses juridictions exigent la conformité WCAG 2.1 Level AA (ADA aux États-Unis, EAA dans l'UE). Exécutez l'inspecteur sur vos pages publiques pour identifier les lacunes de conformité avant qu'elles ne deviennent des risques juridiques.
Intégrez la vérification de l'accessibilité dans votre processus de QA. Après les tests visuels et fonctionnels, exécutez Accessibility Inspector pour vérifier que l'implémentation n'introduit pas de régressions d'accessibilité.
Exécutez l'inspecteur sur votre site actuel lors d'une réunion d'équipe pour montrer de vrais problèmes d'accessibilité. La mise en surbrillance visuelle et les explications claires aident les développeurs à comprendre à quoi ressemble un balisage accessible et pourquoi c'est important.
Auditez les pages intégrant des widgets tiers, du contenu embarqué ou du HTML généré par les utilisateurs. Ces sources introduisent souvent des problèmes d'accessibilité (alt text manquants, violations de contrast ratio) dont vous restez responsable en tant que propriétaire de la page.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Accessibility Inspector. L'outil analyse le DOM de la page à la recherche de problèmes d'accessibilité.
Un rapport catégorisé s'affiche avec les Erreurs (rouge), les Avertissements (jaune) et les Réussites (vert). Chaque section liste les problèmes spécifiques avec les éléments concernés et les références aux critères WCAG.
Cliquez sur n'importe quel problème pour mettre en surbrillance l'élément concerné dans la page avec une bordure colorée et y faire défiler la vue. Le lien entre le rapport et l'élément du DOM est immédiat.
Chaque problème inclut une recommandation précise : "Ajoutez un alt text décrivant le contenu de l'image", "Augmentez le contrast ratio de la couleur du texte à au moins 4,5:1", "Ajoutez un élément label avec for='email'".
Apportez les modifications dans votre code, rechargez la page et relancez l'audit. Le nombre d'erreurs devrait diminuer au fur et à mesure que les problèmes sont résolus. Visez zéro erreur.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
