Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?
Un utilisateur aveugle arrive sur un formulaire d’inscription protégé par un CAPTCHA visuel. Son lecteur d’écran annonce « captcha underscore img underscore 23 point png ». Il ne sait pas ce qu’on attend de lui. Il quitte la page. Ce critère adresse exactement cette situation : quand une image de CAPTCHA ou d’image-test possède déjà une alternative textuelle, celle-ci doit permettre de comprendre la nature du test et ce que l’utilisateur doit faire.
La règle est simple mais souvent mal comprise. L’alternative ne révèle pas la solution. Un alt qui transcrirait les caractères déformés contournerait le mécanisme de sécurité lui-même. L’alternative décrit la tâche, pas la réponse. « Code de vérification : saisissez les caractères affichés dans l’image » est pertinent. « CAPTCHA » seul ne l’est pas, car il n’indique pas l’action attendue.
Ce critère couvre sept éléments HTML susceptibles d’afficher un CAPTCHA ou une image-test : <img>, <area>, <input type="image">, <object type="image/…">, <embed type="image/…">, <svg> et <canvas>. Chaque type a son propre mécanisme d’alternative. Pour <svg> et <canvas>, l’attribut alt n’existe pas : l’alternative passe par aria-label, aria-labelledby ou un élément <title> enfant.
Dernière précision : le critère 1.4 ne s’applique que si l’image possède déjà une alternative. Si l’attribut alt est absent sur un <img> CAPTCHA, c’est le critère 1.1 qui est en défaut. Proposer une alternative sensorielle différente (audio, question logique) relève du critère 1.5, pas de celui-ci.
7 tests pour contrôler l'accessibilité des CAPTCHA et images-tests
Alternative CAPTCHA <img>
- Repérez tous les
<img>utilisés comme CAPTCHA ou image-test dans la page. - Filtrez ceux qui ont déjà un
altnon vide et non absent. - Pour chacun : vérifiez que l’alternative décrit la nature du test (vérification de sécurité) et l’action attendue (ex : « saisissez les caractères affichés »), sans révéler la solution.
- Test validé si toutes les alternatives sont pertinentes. Un seul alt inadapté invalide le test.
Alternative CAPTCHA <area>
- Repérez tous les éléments
<area>(zones cliquables de cartes images) utilisés comme CAPTCHA ou image-test. - Filtrez ceux qui ont un attribut
altrenseigné. - Pour chacun : vérifiez que l’alternative décrit la nature et la fonction du test, pas un intitulé générique comme « image » ou « zone ».
- Test validé si toutes les alternatives sont pertinentes.
Alternative CAPTCHA <input type="image">
- Repérez tous les
<input type="image">utilisés comme CAPTCHA ou image-test. - Filtrez ceux qui ont un attribut
altrenseigné (non vide). - Pour chacun : vérifiez que l’alternative décrit la nature du test et l’action attendue, sans en révéler la réponse.
- Test validé si toutes les alternatives sont pertinentes.
Alternative CAPTCHA <object>
- Repérez tous les
<object type="image/…">utilisés comme CAPTCHA ou image-test. - Filtrez ceux qui ont une alternative textuelle : contenu textuel à l’intérieur de l’élément,
aria-label, ouaria-labelledby. - Pour chacun : vérifiez que l’alternative identifie clairement la nature et la fonction du test.
- Test validé si toutes les alternatives sont pertinentes.
Alternative CAPTCHA <embed>
- Repérez tous les
<embed type="image/…">utilisés comme CAPTCHA ou image-test. - Filtrez ceux qui ont une alternative textuelle (
aria-labelouaria-labelledby, car<embed>n’a pas d’attributalt). - Pour chacun : vérifiez que l’alternative décrit la nature et la fonction du test.
- Test validé si toutes les alternatives sont pertinentes.
Alternative CAPTCHA <svg>
- Repérez tous les
<svg>utilisés comme CAPTCHA ou image-test dans la page. - Filtrez ceux qui ont une alternative textuelle :
<title>en premier enfant,aria-labelouaria-labelledbysur le<svg>. - Pour chacun : vérifiez que cette alternative décrit la nature et la fonction du test, sans révéler la solution.
- Test validé si toutes les alternatives sont pertinentes.
Alternative CAPTCHA <canvas>
- Repérez tous les
<canvas>utilisés comme CAPTCHA ou image-test. - Filtrez ceux qui ont une alternative textuelle (
aria-label,aria-labelledby, ou contenu textuel enfant du<canvas>). - Pour chacun : vérifiez que l’alternative décrit la nature du test et l’action attendue, sans dévoiler la solution.
- Test validé si toutes les alternatives sont pertinentes.
Exemples
❌ Non conforme : CAPTCHA avec un alt filename ou générique
<img src="captcha_v2.png" alt="captcha">L’alternative « captcha » ne dit pas à l’utilisateur ce qu’il doit faire. Un lecteur d’écran annonce « image, captcha ». L’utilisateur comprend qu’il y a un test, mais ignore s’il doit saisir des caractères, résoudre un calcul ou cliquer sur quelque chose. La fonction n’est pas identifiée.
✅ Conforme : CAPTCHA avec un alt pertinent
<img src="captcha_v2.png" alt="Code de vérification : recopiez les caractères affichés dans le champ ci-dessous">L’alternative décrit la nature du test (code de vérification de sécurité) et l’action attendue (recopier les caractères dans le champ). Elle ne révèle pas la solution. Un utilisateur qui ne voit pas l’image comprend exactement ce qu’on lui demande et peut chercher une version audio alternative si elle existe.
❌ Non conforme : Bouton de rechargement CAPTCHA sans alternative
<input type="image" src="reload-captcha.png" alt="">Un alt vide sur un <input type="image"> utilisé comme bouton fonctionnel est non conforme. Le lecteur d’écran ignore complètement le bouton : l’utilisateur ne peut pas regénérer le code de vérification s’il ne le distingue pas. Un alt vide est réservé aux éléments décoratifs, pas aux contrôles interactifs.
✅ Conforme : CAPTCHA SVG avec aria-label pertinent
<svg role="img" aria-label="Test de sécurité : recopiez les cinq chiffres affichés pour valider votre inscription" width="200" height="60">
<title>Test de sécurité : recopiez les cinq chiffres affichés</title>
<!-- rendu visuel du captcha -->
</svg>Le <svg> n’accepte pas l’attribut alt. L’alternative passe ici par aria-label et un élément <title> enfant. Les deux décrivent la fonction du test sans en révéler la solution. Ajouter role="img" améliore la compatibilité avec les technologies d’assistance qui n’exposent pas spontanément le <title> d’un SVG.
Astuces et pièges
⚠️ Mettre la solution dans l’alt
C’est l’erreur qui invalide à la fois la sécurité et l’audit : alt="4B7K2" sur un CAPTCHA. Un bot qui lit le HTML obtient la réponse gratuitement. L’alternative correcte décrit la tâche : « Saisissez les cinq caractères affichés dans l’image ». La technique G143 des WCAG le confirme explicitement : identifier la fonction, pas transcrire le contenu.
⚠️ Confondre absence d’alternative et alternative non pertinente
Le critère 1.4 ne s’applique que si l’image possède déjà une alternative textuelle. Si l’alt est absent sur un <img> CAPTCHA, c’est le critère 1.1 qui échoue. En audit : notez la non-conformité sous 1.1, pas sous 1.4. Les deux problèmes coexistent souvent sur la même page.
💡 Critère 1.4 ≠ critère 1.5 : deux exigences distinctes
Critère 1.4 vérifie la pertinence de l’alternative textuelle quand elle existe. Critère 1.5 vérifie que le site propose une modalité alternative (CAPTCHA audio, question logique) pour les utilisateurs incapables de résoudre le test visuel. Un CAPTCHA peut avoir un bon alt (1.4 conforme) sans aucune alternative sensorielle (1.5 non conforme).
⚠️ L’image-test ne se limite pas au CAPTCHA texte déformé
Une image-test peut être un puzzle visuel, une grille « sélectionnez les feux de signalisation », un QR code de validation ou toute image servant à distinguer humain et robot. Dès que l’image joue ce rôle de vérification, les règles du critère 1.4 s’appliquent à son alternative textuelle.
⚠️ WCAG reconnaît que le CAPTCHA ne peut pas être entièrement accessible
La technique G143 des WCAG admet explicitement qu’il est impossible de révéler la solution dans l’alternative pour des raisons de sécurité. L’unique exigence est d’identifier la fonction. C’est pourquoi le critère 1.5 impose séparément une alternative de perception différente. Les deux critères sont complémentaires, aucun ne rend le CAPTCHA visuel pleinement accessible seul.
Questions fréquentes
Comment rendre un CAPTCHA accessible sans exposer sa solution dans l'attribut alt ?
Non, et c’est interdit pour des raisons de sécurité. L’alternative décrit la nature et la fonction du test, pas la réponse. « Saisissez les caractères affichés dans l’image » est conforme. Pour rendre le CAPTCHA réellement utilisable par des personnes aveugles, le critère 1.5 impose une alternative sensorielle distincte (version audio, question logique).
Quelle différence distingue les critères RGAA 1.4 et 1.5 concernant les CAPTCHA ?
Critère 1.4 : si le CAPTCHA a une alternative textuelle, est-elle pertinente ? Critère 1.5 : le site propose-t-il une autre modalité d’accès (audio, question logique) pour les utilisateurs qui ne peuvent pas résoudre le test visuel ? Ce sont deux audits distincts. Une page peut passer 1.4 et échouer 1.5.
Comment auditer l'accessibilité d'un CAPTCHA rendu en SVG inline ?
L’attribut alt n’existe pas sur <svg>. Vérifiez la présence d’un <title> en premier enfant, d’un aria-label ou d’un aria-labelledby sur le <svg>. Si aucun de ces mécanismes n’est présent, l’alternative est absente (critère 1.1 en défaut). Si l’un est présent, évaluez sa pertinence sous le critère 1.4.
Pourquoi l'attribut alt="CAPTCHA" ne répond-il pas aux exigences d'accessibilité RGAA ?
Non. Le mot seul n’indique pas ce que l’utilisateur doit faire. L’alternative doit décrire l’action attendue : « Code de sécurité : recopiez les caractères affichés dans le champ ci-dessous ». Sans cette précision, le lecteur d’écran annonce juste « CAPTCHA » et l’utilisateur ne sait pas comment interagir.
Comment le critère RGAA 1.4 s'applique-t-il aux CAPTCHA dépourvus d'alternative textuelle ?
Non. Le critère 1.4 est conditionnel : il s’intéresse aux images « ayant une alternative textuelle ». S’il n’y a pas d’alternative, c’est le critère 1.1 qui échoue. Dans la pratique, les deux non-conformités coexistent fréquemment : alt absent (1.1) et, quand il est présent, non pertinent (1.4).