Auto-contrôle et mini-test
Deux outils rapides pour repérer des problèmes fréquents. Ni l’un ni l’autre ne mesure la conformité.
Auto-contrôle en 20 points
À faire sur vos pages clés (accueil, fiche produit, panier, commande). Correspondances RGAA issues du référentiel officiel RGAA 4.1 (DISIC, Licence Ouverte 2.0).
| # | Vérification | Comment tester | WCAG 2.1 | RGAA 4.1 |
|---|---|---|---|---|
| 1 | Tout se fait au clavier | Débranchez la souris. Avec Tab, Maj+Tab, Entrée, Espace et les flèches, parcourez le menu, la recherche, une fiche produit, le panier et le paiement. Vous ne devez jamais rester bloqué. | 2.1.1, 2.1.2 | 4.11, 4.12, 7.3, 10.14, 12.9, 12.11 |
| 2 | Le focus est visible | En tabulant, vous voyez toujours où vous êtes (contour, soulignement…), y compris sur les boutons et les champs. | 2.4.7 | 7.3, 10.7 |
| 3 | L’ordre de tabulation est logique | Le focus suit l’ordre de lecture et ne saute pas au hasard dans la page ; une fenêtre modale garde le focus et le rend à la fermeture. | 2.4.3 | 10.3, 12.7, 12.8, 13.3, 13.4 |
| 4 | Un lien d’évitement existe | À la première tabulation, un lien « Aller au contenu » apparaît et fonctionne. | 2.4.1 | 9.1, 12.6, 12.7, 13.3, 13.4 |
| 5 | Les images utiles ont une alternative | Les photos produits, logos et icônes-boutons ont un texte alternatif pertinent ; les images décoratives ont alt="" (vérifiable avec le mini-test ci-dessous). | 1.1.1 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 4.7, 4.8, 4.9, 6.1, 6.2, 7.2, 10.2, 13.3, 13.4, 13.5, 13.6 |
| 6 | Les contrastes sont suffisants | Texte : au moins 4,5:1 (3:1 pour le grand texte). Bordures de champs et icônes utiles : au moins 3:1. Vérifiez les prix, boutons, mentions grises et bandeaux. | 1.4.3, 1.4.11 | 3.2, 3.3, 10.5 |
| 7 | La couleur n’est pas le seul indice | Les erreurs, les liens dans le texte, les tailles indisponibles ou les étapes ne sont pas signalés uniquement par une couleur. | 1.4.1 | 3.1, 10.6, 10.7, 10.9, 10.10 |
| 8 | Zoom à 200 % et écran de 320 px | Zoomez à 200 %, puis réduisez la fenêtre à 320 px de large : tout reste lisible et utilisable, sans défilement horizontal. | 1.4.4, 1.4.10 | 10.4, 10.11 |
| 9 | Les titres structurent la page | Chaque page a un titre principal (h1) et des sous-titres hiérarchisés qui décrivent les sections. | 1.3.1, 2.4.6 | 3.1, 5.1, 5.2, 5.4, 5.5, 5.6, 5.7, 5.8, 7.3, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 11.1, 11.2, 11.5, 11.6, 11.7, 11.8, 12.6, 13.3, 13.4 |
| 10 | Chaque page a un titre unique | L’onglet du navigateur affiche un titre qui distingue la page (ex. « Panier – Ma Boutique »). | 2.4.2 | 8.5, 8.6 |
| 11 | La langue est déclarée | La balise html porte l’attribut lang correct (ex. lang="fr"). | 3.1.1 | 8.3, 8.4, 13.3, 13.4 |
| 12 | Les liens sont explicites | Pas de « cliquez ici » ou « en savoir plus » seuls : l’intitulé ou son contexte dit où mène le lien. | 2.4.4 | 6.1, 6.2 |
| 13 | Chaque champ a une étiquette | Les champs (recherche, adresse, carte bancaire, newsletter) ont un libellé visible et lié au champ, pas seulement un texte d’exemple. | 1.3.1, 3.3.2, 4.1.2 | 1.2, 1.3, 1.9, 2.1, 2.2, 3.1, 4.13, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 7.1, 7.2, 7.3, 8.2, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 10.8, 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9, 11.10, 12.6, 13.3, 13.4 |
| 14 | Les erreurs sont expliquées | Soumettez un formulaire vide : l’erreur est décrite en texte, près du champ, avec une suggestion de correction. | 3.3.1, 3.3.3 | 11.10, 11.11 |
| 15 | Les messages de statut sont annoncés | « Produit ajouté au panier », « 3 résultats » : avec un lecteur d’écran (NVDA, VoiceOver), le message est lu sans déplacer le focus. | 4.1.3 | 7.5 |
| 16 | Les vidéos ont des sous-titres | Les vidéos avec paroles ont des sous-titres synchronisés ; les informations visuelles importantes sont décrites. | 1.2.2, 1.2.5 | 4.3, 4.4, 4.5, 4.6 |
| 17 | Les animations peuvent être arrêtées | Carrousels et bandeaux défilants ont un bouton pause et ne bougent pas plus de 5 secondes sans contrôle. | 2.2.2 | 13.1, 13.8 |
| 18 | Pas de délai bloquant | Si une session ou un panier expire, l’utilisateur est prévenu et peut prolonger le délai. | 2.2.1 | 13.1, 13.8 |
| 19 | Connexion, CAPTCHA et paiement accessibles | Un CAPTCHA a une alternative (audio ou autre) ; la création de compte, la connexion et le paiement (y compris 3-D Secure) se font au clavier et au lecteur d’écran. | 1.1.1, 3.3.2 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 4.7, 4.8, 4.9, 6.1, 6.2, 7.2, 10.2, 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.10, 13.3, 13.4, 13.5, 13.6 |
| 20 | Les documents téléchargeables sont accessibles | CGV, factures, notices en PDF : texte sélectionnable, titres balisés, ou une version HTML équivalente. | 1.1.1, 1.3.1 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 3.1, 4.7, 4.8, 4.9, 5.1, 5.2, 5.4, 5.5, 5.6, 5.7, 5.8, 6.1, 6.2, 7.2, 7.3, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 11.1, 11.5, 11.6, 11.7, 11.8, 12.6, 13.3, 13.4, 13.5, 13.6 |
Mini-test automatique d’un extrait HTML
Collez le code HTML d’une page ou d’un composant (clic droit › « Afficher le code source », ou l’inspecteur du navigateur). Le test s’exécute dans votre navigateur avec axe-core 4.13 ; le code n’est envoyé nulle part.
Les scripts du code collé sont retirés et aucune ressource externe n’est chargée (images, CSS, polices). Pour tester les contrastes, collez aussi le CSS dans une balise <style>.