Exemple de rapport d'accessibilité
Cet exemple statique montre le type de rapport qu’un scanner automatisé peut générer : constats précis, références WCAG, contexte touché et conseils que votre équipe adapte.
Constats clairs et exploitables
Les rapports montrent le sélecteur touché, la gravité, le lien WCAG et les pages concernées afin qu’un développeur puisse prioriser les corrections.
Exemple de constat : texte alternatif manquant
HTML : <img src='logo.png'> Constat : une image informative n’a pas d’alternative textuelle. WCAG : 1.1.1 Contenu non textuel.
Conseil d’exemple
Le rapport peut suggérer d’ajouter un attribut alt pertinent, par exemple <img src='logo.png' alt='Logo de l’entreprise'>. Votre équipe vérifie toujours si le texte est exact dans son contexte.
Au-delà de l’automatisation
Le rapport signale aussi les contrôles qui nécessitent une revue humaine, comme l’ordre de focus, le sens des alternatives textuelles et le comportement dans les différents états d’interaction.
Exemple de contexte annoté
Lorsque c’est disponible, le rapport peut montrer le contexte d’interface touché à côté du résultat de règle, pour aider l’équipe à relier un constat automatisé à la page à inspecter.
1.4.3 Contrast (Minimum)
Fix any of the following: Element has insufficient color contrast of 2.94 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
Ensure that text has a contrast ratio of at least 4.5:1 against its background color to be legible for people with moderately low vision.
Détails techniques
Balisage défaillant → exemple de correction
<a href="/about" class="nav-link text-gray-400 bg-white">About Us</a><a href="/about" class="nav-link text-gray-700 bg-white">About Us</a>Exemple de correction : guide pour votre code, non appliqué à votre site.