Découvrez à quoi ressemble une constatation ComplyPages
Nos rapports sont conçus pour l'action. Chaque constatation explique où le problème apparaît, pourquoi il compte et ce que votre développeur ou votre agence peut faire ensuite.
Structure du rapport
- Résumé exécutif
- Parcours analysé
- Principaux risques d'accessibilité visibles
- Détails des problèmes prêts pour les développeurs
- File d'attente de corrections suggérées
- Liste de contrôle de retest
- Recommandation de surveillance
1. Résumé exécutif
Cet exemple de snapshot examine un tunnel de paiement public et relève les risques d'accessibilité visibles pouvant affecter la navigation au clavier, la compréhension par lecteur d'écran et la saisie des formulaires. Il ne s'agit ni d'une évaluation juridique ni d'une certification, mais d'observations pratiques destinées à aider une équipe web à prioriser ses corrections sur un parcours critique pour le client.
2. Parcours analysé
Exemple de snapshot pour
example-store.com
Panier → Commande → Paiement
Type de parcours
Tunnel de paiement e-commerce
Pages analysées
4 pages publiques
3. Principaux risques d'accessibilité visibles
- Le bouton de commande n'a pas de nom accessible (élevée)
- Un champ obligatoire n'est pas associé à son étiquette (moyenne)
- Le message d'erreur n'est pas exposé clairement après validation (moyenne)
4. Détails des problèmes prêts pour les développeurs
Le bouton de commande n'a pas de nom accessible
Element: button.checkout-submit
EAA relevance: Préparation EAA — risque d'accessibilité visible sur le tunnel de paiement public
Étapes de reproduction
- Ouvrir https://example-store.com/checkout avec des articles dans le panier
- Inspecter le bouton de validation final avec un lecteur d'écran ou axe DevTools
- Constater l'absence de nom accessible sur button.checkout-submit
Impact client
Les personnes utilisant un lecteur d'écran peuvent ne pas comprendre l'action déclenchée par le bouton.
Impact commercial
Si un client n'identifie pas l'action finale de commande, il peut être empêché de finaliser son achat. Note technique : Le bouton est visible à l'écran, mais son nom accessible est absent ou peu clair.
Correction suggérée
Ajouter un texte visible explicite ou un nom accessible décrivant l'action.
Exemple à copier-coller
Exemple indicatif — à adapter à votre code.
<button class="checkout-submit" aria-label="Valider la commande">
Valider la commande
</button>Critères d'acceptation
- Le bouton est annoncé « Valider la commande » ou équivalent par les technologies d'assistance
- Le bouton est atteignable et activable au clavier
Un champ obligatoire n'est pas associé à son étiquette
Element: input#customer-email
EAA relevance: Préparation EAA — risque d'accessibilité visible sur le tunnel de paiement public
Étapes de reproduction
- Ouvrir https://example-store.com/checkout
- Naviguer au clavier jusqu'au champ e-mail
- Confirmer que input#customer-email n'a pas d'étiquette associée dans l'arbre d'accessibilité
Impact client
Les utilisateurs de technologies d'assistance peuvent ignorer quelle information est attendue.
Impact commercial
Une saisie plus difficile augmente le risque d'abandon en cours de commande. Note technique : L'étiquette visible n'est pas correctement reliée au champ de saisie.
Correction suggérée
Associer l'étiquette au champ via une relation for/id valide, ou par une méthode d'étiquetage accessible équivalente.
Exemple à copier-coller
Exemple indicatif — à adapter à votre code.
<label for="customer-email">Adresse e-mail</label>
<input id="customer-email" type="email" name="email" required />Critères d'acceptation
- L'étiquette du champ est annoncée correctement par les technologies d'assistance
- Le caractère obligatoire du champ est explicite
Le message d'erreur n'est pas exposé clairement après validation
Element: .field-error
EAA relevance: Préparation EAA — risque d'accessibilité visible sur le tunnel de paiement public
Étapes de reproduction
- Soumettre le formulaire de commande avec une adresse e-mail invalide
- Observer l'apparition du message d'erreur visuel
- Confirmer que l'erreur n'est ni annoncée par le lecteur d'écran ni reliée au champ
Impact client
Les utilisateurs peuvent ne pas comprendre pourquoi ils ne peuvent pas continuer.
Impact commercial
Des erreurs de validation non annoncées empêchent les utilisateurs de finaliser leur commande. Note technique : Le message d'erreur apparaît visuellement, mais il peut ne pas être annoncé ni relié au champ concerné.
Correction suggérée
Relier le message d'erreur au champ concerné et s'assurer qu'il est annoncé lors de l'échec de validation.
Critères d'acceptation
- Les utilisateurs identifient quel champ est en erreur
- Les utilisateurs comprennent le problème et peuvent le corriger sans indice uniquement visuel
5. File d'attente de corrections suggérées
Les problèmes sont priorisés par gravité et impact sur le client. Votre développeur ou votre agence traite la file d'attente dans l'ordre.
6. Liste de contrôle de retest
- Relancer les contrôles d'accessibilité sur /checkout après le déploiement des corrections
- Vérifier au lecteur d'écran que le bouton de commande possède un nom accessible
- Confirmer que les étiquettes de formulaire sont correctement associées aux champs
- Tester que les messages d'erreur sont annoncés en cas d'échec de validation
7. Recommandation de surveillance
Après les premières corrections, envisagez la surveillance des parcours de transaction afin de détecter les régressions sur les étapes de commande et de paiement.