Du résultat à l’élément concerné
L’Inspecteur relie un constat du plugin à son emplacement sur votre site. Vous pouvez repérer un lien difficile à reconnaître, lire l’explication et prévisualiser une amélioration sans modifier le HTML.
Il est disponible avec toutes les offres. L’ouverture, la navigation et la consultation des corrections enregistrées ne consomment aucun quota IA. Seule une nouvelle génération utilise le quota disponible. Un test automatique ou un aperçu ne remplace pas une évaluation WCAG manuelle complète.
Ouvrir et utiliser l’Inspecteur
- Ouvrez le test d’accessibilité du plugin, puis les détails d’un résultat enregistré.
- Choisissez l’action pour ouvrir l’Inspecteur. Celle placée près d’un constat mène directement à l’élément concerné.
- Utilisez les numéros, les commandes précédent et suivant ou la vue d’ensemble. Un élément peut présenter plusieurs constats.
- Lisez d’abord le constat. La carte de l’élément située au-dessus aide à reconnaître l’emplacement.
Sur ordinateur, choisissez la position d’ancrage et faites glisser le bord de redimensionnement. Sur téléphone, un panneau inférieur apparaît. Le masquer puis le restaurer conserve l’aperçu actif. Utilisez Tab pour atteindre les commandes, puis Entrée ou Espace pour actionner les boutons et rubriques dépliables.
Comprendre la carte de l’élément
| Indication | Signification et prochaine étape |
|---|---|
| Élément sélectionné | Texte ou description permettant de repérer l’emplacement, par exemple le texte alternatif d’une image. Une description enregistrée peut différer du contenu actuel. |
| Icône et type | Identifient notamment lien, image, titre ou bouton. Le type est également écrit. |
| Visibilité | Indique si l’élément actuel peut être vu et mis en évidence. Visible ne signifie pas accessible. |
| Chemin DOM | Adresse technique dans la page chargée, utile pour transmettre un constat à votre développeur. Ce n’est pas une adresse web. |
| Description | Aide à identifier l’élément ; elle ne garantit pas l’annonce d’un lecteur d’écran. |
| Rôle | Fonction de l’élément, par exemple link ou button. Ces valeurs techniques ne sont pas traduites. |
| Taille | Largeur et hauteur actuelles en pixels. La taille seule ne démontre pas la facilité d’utilisation. |
| Arbre d’accessibilité | Estimation de la disponibilité pour les technologies d’assistance, avec les limites expliquées ci-dessous. |
Dépliez le chemin DOM et les détails au besoin. L’icône de copie copie le chemin et affiche une confirmation.
Qu’est-ce que l’arbre d’accessibilité ?
Le navigateur fournit aux lecteurs d’écran une représentation simplifiée de la page, comprenant notamment les noms, rôles et états des commandes.
Une indication d’inclusion selon la meilleure estimation signifie que le plugin suppose l’élément disponible à partir de la page chargée. Il ne lit pas l’arbre d’accessibilité réel du navigateur. Cette indication ne prouve ni une annonce correcte ni une utilisation complète au clavier.
Une exclusion estimée n’est pas forcément une erreur : une décoration ou le contenu d’un menu fermé peut légitimement être masqué. Un lien nécessaire ou une commande active doit rester accessible. Vérifiez la fonction au clavier et, si nécessaire, avec un lecteur d’écran.
WCAG demande que les noms, rôles et états pertinents des commandes puissent être déterminés par logiciel. Ce champ de l’Inspecteur sert à s’orienter, pas à établir un résultat WCAG distinct. Explication du W3C sur WCAG 4.1.2 : nom, rôle et valeur
Lorsque l’emplacement reste incertain
| Situation | Action possible |
|---|---|
| Masqué | Ouvrez vous-même le menu, l’onglet ou la boîte de dialogue concernée. L’Inspecteur n’ouvre pas les commandes volontairement fermées. |
| Contexte visible uniquement | L’élément ne possède pas de surface visible propre. Une zone enfant visible est indiquée pour vous orienter ; comparez description et constat. |
| Introuvable | La page a pu changer. Relancez le test et ouvrez l’Inspecteur depuis ce nouveau résultat. |
| Plusieurs correspondances | Comparez le texte et le paragraphe environnant. Ne choisissez une cible d’aperçu que si vous pouvez l’identifier avec certitude ; un texte identique ou la première position ne suffit pas. |
| Constat concernant toute la page | Il n’existe pas de cible individuelle. Examinez la structure décrite dans le constat. |
| Contexte invalide ou expiré | Actualisez la liste des résultats et rouvrez l’Inspecteur. Relancez le test si la page a changé. |
Vérifier une proposition avec AI Element Fix
Générez un AI Element Fix. Le plugin utilise le constat et le contexte limité disponible de l’élément. Examinez la solution recommandée avant de modifier la page.
- L’explication de l’importance décrit les conséquences pour les visiteurs.
- La rubrique code et aperçu montre le balisage actuel et, s’il est disponible, le balisage proposé. Les longues lignes défilent horizontalement et peuvent être copiées.
- La rubrique de vérification explique comment contrôler la modification.
L’aperçu modifie uniquement votre navigateur, temporairement. Vous pouvez l’annuler ; passer à un autre élément le retire également. Masquer puis restaurer l’Inspecteur le conserve. L’aperçu n’enregistre rien dans WordPress.
Certaines solutions ne peuvent pas être prévisualisées de manière sûre. Si l’aperçu ou un code vérifiable manque, lisez l’explication affichée. Examinez le contexte, relancez le test si nécessaire ou transmettez les instructions à votre développeur. Ne modifiez pas des attributs au hasard pour supprimer un avertissement.
Constats courants et WCAG
Un lien dépend de la couleur : Un soulignement permanent peut le rendre reconnaissable sans distinguer les couleurs. Vérifiez aussi le contraste avec l’arrière-plan ; le contraste entre lien et texte environnant est une autre mesure. WCAG 1.4.1 : utilisation de la couleur
Un titre ne correspond pas à la structure : Examinez sa section et les titres précédents. Choisissez son niveau selon le sens, pas la taille des caractères. Revenir à une section de niveau supérieur n’est pas incorrect en soi. WCAG 1.3.1 : information et relations
Un bouton n’a pas de nom compréhensible : Ajoutez un libellé approprié expliquant l’action, puis vérifiez son annonce. Le rôle ne remplace pas le nom. WCAG 4.1.2 : nom, rôle et valeur
Appliquer et vérifier une modification permanente
- Repérez où l’élément est géré : contenu, bloc, constructeur de pages, modèle ou autre plugin.
- Appliquez la modification vérifiée à cet endroit. Copier une proposition ne modifie pas le site.
- Vérifiez ordinateur, téléphone, clavier et, si nécessaire, lecteur d’écran. Préservez les libellés clairs, le focus visible et le fonctionnement.
- Relancez le test d’accessibilité. La disparition d’un constat confirme uniquement ce contrôle automatique ; vérifiez aussi l’utilisation dans son contexte.
Pour aller plus loin : Test d’accessibilité · Explication et solution et AI Element Fix