Un CAPTCHA à images déformées demandant de retaper une suite de caractères illisibles est l’un des obstacles les plus radicaux qu’un formulaire puisse imposer : une personne aveugle ne peut tout simplement pas le résoudre sans aide extérieure, et une personne avec une déficience visuelle ou une dyslexie sévère peut échouer plusieurs fois avant, éventuellement, d’abandonner le formulaire. Ce tutoriel montre comment ajouter une alternative accessible à ce type de CAPTCHA sur un formulaire WordPress, sans entrer dans le débat plus large de la sécurité anti-spam, qui dépasse le cadre de l’accessibilité.
Étape 1 : évaluer si un CAPTCHA visuel est même nécessaire
Avant d’ajouter une alternative, il vaut la peine de vérifier si le CAPTCHA visuel reste indispensable. Deux techniques réduisent fortement le spam sans jamais demander d’interaction visible à la personne qui remplit le formulaire : le champ « honeypot » (un champ invisible pour les humains mais rempli par les robots) et reCAPTCHA v3, qui attribue un score de confiance en arrière-plan sans afficher d’énigme. Sur la majorité des formulaires de contact WordPress, l’une de ces deux techniques suffit et supprime le problème à la racine plutôt que de le contourner.
<!-- Champ honeypot, à masquer visuellement mais pas avec display:none
(certains lecteurs d'écran ignorent display:none différemment
des robots, mieux vaut une classe utilitaire dédiée) -->
<p class="champ-piege">
<label for="site_web">Laissez ce champ vide</label>
<input type="text" id="site_web" name="site_web" tabindex="-1" autocomplete="off">
</p>Étape 2 : quand un CAPTCHA reste imposé, ajouter une alternative sonore
Si le contexte impose malgré tout un CAPTCHA visible (exigence d’un prestataire de paiement, politique de sécurité du client), la plupart des services de CAPTCHA proposent nativement une alternative audio, souvent désactivée par défaut ou mal mise en avant dans l’intégration. Avec hCaptcha ou reCAPTCHA classique (v2 « coché »), un bouton « obtenir un défi audio » existe déjà dans le widget fourni : il suffit, côté intégration, de s’assurer qu’il n’est pas masqué par une surcharge CSS du thème.
/* Erreur fréquente : un thème qui masque tout élément
supplémentaire dans l'iframe du CAPTCHA par excès de zèle CSS */
.wpcf7-form .g-recaptcha iframe + button {
display: none; /* à supprimer : ce bouton est l'alternative audio */
}Étape 3 : proposer une alternative logique en complément
Pour les visiteurs qui ne peuvent ni lire l’image ni écouter l’audio dans de bonnes conditions (environnement bruyant, casque absent), une troisième option a été ajoutée sur un projet client : une question logique simple, générée aléatoirement côté serveur, en complément du CAPTCHA visuel plutôt qu’à sa place, pour ne pas affaiblir la protection anti-spam globale.
<?php
function generer_question_logique() {
$a = wp_rand( 2, 9 );
$b = wp_rand( 2, 9 );
set_transient( 'captcha_reponse_' . session_id(), $a + $b, 10 * MINUTE_IN_SECONDS );
return sprintf( 'Combien font %d plus %d ?', $a, $b );
}
function verifier_question_logique( $reponse_soumise ) {
$attendue = get_transient( 'captcha_reponse_' . session_id() );
return (int) $reponse_soumise === (int) $attendue;
}Cette question logique est présentée avec une étiquette explicite (« Question de vérification : combien font 4 plus 7 ? ») et un champ de saisie classique, entièrement navigable au clavier et lisible par un lecteur d’écran, sans dépendre d’aucune image.
Étape 4 : documenter les trois chemins possibles dans le formulaire
Sur le formulaire final, les trois options coexistent clairement plutôt que d’être cachées les unes derrière les autres :
- Le CAPTCHA visuel par défaut, pour la majorité des visiteurs.
- Le lien « écouter un défi audio à la place », visible dès le chargement du widget, pas seulement après un échec.
- La question logique, présentée comme une alternative complète pour qui ne souhaite utiliser ni l’image ni l’audio.
Étape 5 : tester chaque chemin avec un lecteur d’écran
La vérification finale consiste à parcourir le formulaire avec NVDA ou VoiceOver activé, sans jamais regarder l’écran, et à vérifier qu’il est possible de soumettre le formulaire de bout en bout uniquement grâce à l’alternative audio, puis uniquement grâce à la question logique, sans jamais avoir besoin de percevoir l’image déformée.
Le réflexe à éviter est de considérer l’alternative comme une case à cocher réglementaire ajoutée après coup. Sur ce projet, la question logique a fini par être préférée par plusieurs visiteurs valides simplement parce qu’elle est plus rapide que de déchiffrer une image — un bon rappel que l’accessibilité profite rarement à un seul public.
En résumé
Un CAPTCHA visuel exclusif est l’un des obstacles les plus radicaux qu’un formulaire puisse imposer, mais il se corrige sans sacrifier la protection anti-spam : d’abord en évaluant si des techniques invisibles comme le honeypot ou reCAPTCHA v3 suffisent, ensuite en activant l’alternative audio native des services existants, et enfin, si nécessaire, en ajoutant une question logique simple générée côté serveur. La sécurité anti-spam n’a pas besoin d’exclure qui que ce soit pour rester efficace.
