Un bouton de paiement peut sembler parfait tout en étant dépourvu de nom accessible compréhensible. Un formulaire peut afficher tous ses champs obligatoires sans expliquer clairement les informations attendues. Ce qui compte est la possibilité d’accomplir une tâche, pas la couleur d’un score.
Auditez une page qui vous appartient ou que vous êtes autorisé à examiner, et gardez le rapport à côté du navigateur. L’analyse statique et l’essai du parcours apportent des preuves différentes. Une liste courte ou une note verte ne démontre pas la conformité complète aux WCAG.
Périmètre de cet audit
Ce qui peut être mesuré
- HTML statique d’une page demandée : libellés, noms, alternatives textuelles et structure.
- Certains motifs de balisage concernant le focus, les formulaires, les cadres, les tableaux et les médias.
- Certaines paires explicites de couleurs de texte et de fond définies dans des styles en ligne.
Ce qu’il ne prouve pas
- Pas d’exécution complète des parcours interactifs ni d’essai avec un lecteur d’écran.
- Pas d’évaluation exhaustive des couleurs CSS calculées et de tous les états visuels.
- Pas de certification WCAG ni de preuve de conformité juridique.
Le module d’accessibilité est disponible avec Starter, Professional et Enterprise ; il n’est pas inclus dans Free. Les vérifications manuelles restent réalisables indépendamment de l’abonnement.
Commencer par une tâche importante
Choisissez un parcours concret : demander un devis, créer un compte, lire une fiche technique ou contacter l’assistance. Notez l’URL exacte, la langue et le résultat attendu. Précisez également si la page est publique ou nécessite une connexion. Un audit de page publique ne valide pas le parcours effectué après authentification.
Commencez par une page représentative, puis examinez séparément les autres modèles. Un défaut de navigation partagé peut toucher de nombreuses pages ; une page d’accueil sans alerte ne prouve rien sur un formulaire de commande ou une fenêtre modale. Traitez d’abord les obstacles qui empêchent une tâche, avant les améliorations cosmétiques. La gravité d’un constat dépend du contexte d’utilisation et de ses conséquences réelles.
Comprendre ce qui a été mesuré
Le moteur actuel de Sitelemetry analyse le HTML statique d’une page. Il recherche notamment les images sans alternative, l’absence de titre ou de langue, les champs potentiellement sans libellé, les liens et boutons sans nom, des anomalies de hiérarchie des titres, les régions principales manquantes, les valeurs positives de tabindex et les identifiants dupliqués. Plusieurs contrôles sont des heuristiques à confirmer.
Il examine aussi certaines paires de couleurs en ligne. Ce n’est pas un contrôle complet du contraste : styles hérités, images de fond, superpositions et états interactifs peuvent échapper à l’analyse. Un échec de chargement, une page de vérification, un contenu tronqué ou non HTML produit une évaluation indisponible ou non applicable, pas un résultat accessible. Les conseils du W3C pour choisir un outil expliquent pourquoi le jugement humain reste nécessaire.
Lire la preuve avant d’attribuer une correction
Une tâche exploitable indique l’URL, l’élément ou l’exemple concerné, le comportement à vérifier et le parcours potentiellement bloqué. « Trois images sans alt » est plus concret qu’« améliorer l’accessibilité ». Mais la présence d’un texte alternatif ne prouve pas qu’il décrit correctement la fonction de l’image.
Confirmez les constats ambigus dans le navigateur. Un motif statique peut manquer un libellé englobant le champ ou accepter un aria-labelledby qui référence un élément absent. Vérifiez le nom réellement calculé dans l’arbre d’accessibilité. Une alerte sur l’ordre des titres appelle aussi une lecture du contenu ; elle ne constitue pas un verdict global sur les WCAG. Regroupez les défauts répétés par composant partagé plutôt que de corriger chaque page isolément.
| Observation | Priorité selon le contexte | Preuve à confirmer | Action suivante |
|---|---|---|---|
| Un champ obligatoire n’a pas de nom utilisable | Élevée si une tâche importante est bloquée | Inspecter le nom calculé et remplir le formulaire | Corriger l’association du libellé et rejouer le parcours |
| Une image n’a pas d’alternative | Selon son rôle | Déterminer si elle informe, agit ou décore | Rédiger une alternative adaptée ou laisser alt vide pour une décoration |
| Alerte sur l’ordre des titres | À examiner dans son contexte | Lire la structure et le contenu du document | Corriger la structure partagée si elle gêne la compréhension |
Corriger le composant à la source
Privilégiez les commandes HTML natives et les libellés visibles. Pour une association explicite, for doit correspondre à l’identifiant du bon champ. Un texte indicatif disparaît lors de la saisie et ne remplace pas un libellé fiable. Le guide du W3C sur les libellés de formulaires présente les associations adaptées. Pour un bouton composé uniquement d’une icône, donnez un nom décrivant l’action, comme ouvrir la recherche, plutôt que le dessin.
Pour une image, déterminez sa fonction : informer, déclencher une action ou décorer. Une image fonctionnelle nécessite une alternative adaptée ; une image purement décorative peut avoir une alternative vide. Ne videz pas tous les textes pour faire disparaître les alertes. Appuyez-vous sur les tutoriels du W3C sur les images et corrigez le composant ou le modèle de contenu afin d’éviter la réapparition du problème.
Compléter par une vérification au navigateur
- Atteignez et activez les commandes uniquement au clavier. Vérifiez le focus visible, l’ordre de navigation et la possibilité de sortir des dialogues.
- Avec un lecteur d’écran, examinez titres, noms, instructions et erreurs. Il faut comprendre la tâche, pas simplement entendre du texte.
- Mesurez les contrastes pertinents dans les états normal, survolé, focalisé et en erreur, ainsi qu’avec les images ou superpositions.
- Testez le zoom et les fenêtres étroites. Recherchez les commandes disparues et les défilements impraticables.
Il s’agit de vérifications complémentaires, pas de capacités attribuées au moteur statique. Les premières vérifications du W3C constituent un point de départ. Selon l’importance du service, faites participer des personnes ayant différents besoins d’accès.
Retester et préciser ce qui reste à examiner
Après modification, relancez l’audit sur la même URL et comparez le constat précis. Le composant partagé a-t-il été corrigé ? De nouveaux problèmes de nom ou de structure sont-ils apparus ? Rejouez aussi le parcours manuel initial. Une alerte disparue alors que le dialogue reste inutilisable au clavier ne constitue pas une correction terminée.
Consignez la date, la page, les modifications et, séparément, les résultats statiques et manuels. Dans un rapport client, indiquez les modèles et interactions examinés ainsi que ceux exclus du périmètre. Le score n’est ni un pourcentage d’utilisateurs capables de réussir ni une preuve juridique. Gardez visibles les essais manuels en attente et intégrez les parcours critiques aux vérifications des prochaines mises en production.
Questions fréquentes
Une bonne note démontre-t-elle la conformité aux WCAG ?
Non. Elle reflète les motifs examinés dans le périmètre annoncé. Les interactions, le contenu et d’autres exigences demandent une évaluation complémentaire, humaine et spécialisée.
Chaque image doit-elle avoir une alternative descriptive ?
Cela dépend de son objectif et du contexte. Les images informatives ou fonctionnelles demandent une alternative appropriée ; une alternative vide peut convenir à une image purement décorative.
L’audit peut-il confirmer qu’une fenêtre modale est utilisable ?
Il peut repérer des indices dans le balisage disponible, mais il n’ouvre pas la fenêtre et ne valide ni le parcours clavier, ni la gestion du focus, ni la compréhension avec un lecteur d’écran.
Sources et lectures
- W3C : choisir des outils d’évaluationwww.w3.org
- W3C : associer des libellés aux champswww.w3.org
- W3C : images et alternatives textuelleswww.w3.org
- W3C : premières vérifications d’accessibilitéwww.w3.org
Rédigé par l’équipe Sitelemetry et vérifié par rapport au périmètre du produit et aux sources primaires citées. Les exemples sont illustratifs, sauf mention explicite d’un cas observé.
