CAPTCHA et accessibilité : solutions pour tous les utilisateurs

Les CAPTCHA protègent vos formulaires contre les bots, mais ils créent souvent des barrières insurmontables pour les personnes handicapées. Comment sécuriser vos sites sans exclure une partie de vos utilisateurs ? Voici les solutions accessibles en 2026.

Le problème des CAPTCHA traditionnels

Les CAPTCHA ("Completely Automated Public Turing test to tell Computers and Humans Apart") posent plusieurs défis d'accessibilité :

[!NOTE] Le critère RGAA 11.10 stipule que si un CAPTCHA est présent, une solution d'accès alternative doit être proposée.

Les solutions modernes accessibles

1. Cloudflare Turnstile

Principe : Vérification invisible basée sur des signaux comportementaux et contextuels.

Avantages accessibilité :

• Aucune interaction utilisateur requise dans la majorité des cas
• Pas de puzzle visuel à résoudre
• Fonctionne avec tous les modes d'interaction
• Conforme WCAG 2.1 AA

Implémentation :

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form method="POST">
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">Envoyer</button>
</form>

Coût : Gratuit pour la plupart des usages.

2. Friendly Captcha

Principe : Proof-of-work (preuve de travail) exécuté par le navigateur pendant que l'utilisateur remplit le formulaire.

Avantages accessibilité :

• 100% invisible pour l'utilisateur
• Aucun puzzle, aucune image
• Conforme RGPD (pas de cookies, pas de tracking)
• Basé en Europe

Implémentation :

<script src="https://cdn.friendlycaptcha.com/widget.min.js" async defer></script>

<form method="POST">
  <div class="frc-captcha" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">Envoyer</button>
</form>

[!TIP] Friendly Captcha commence le calcul dès le chargement de la page. Quand l'utilisateur clique sur « Envoyer », le travail est généralement terminé.

3. hCaptcha avec mode accessibilité

Principe : CAPTCHA visuel avec une option d'accessibilité textuelle.

Fonctionnalités accessibles :

• Mode "Accessibility Challenge" avec défis textuels
• Compatible Section 508 et WCAG 2.2 AA
• Les utilisateurs peuvent enregistrer un cookie d'accessibilité

Activation du mode accessible :

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

<div class="h-captcha"
     data-sitekey="YOUR_SITE_KEY"
     data-callback="onCaptchaSuccess">
</div>

Les utilisateurs cliquent sur l'icône d'accessibilité dans le widget pour activer l'alternative.

4. reCAPTCHA v3 (invisible)

Principe : Score de risque calculé en arrière-plan, sans interaction.

Limitations :

• Dépendance à Google et ses cookies
• Peut nécessiter une vérification manuelle pour les scores faibles
• Questions RGPD sur le tracking

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

<script>
grecaptcha.ready(function() {
  grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
    // Envoyer le token avec le formulaire
  });
});
</script>

5. ALTCHA (open source)

Principe : Solution proof-of-work open source et auto-hébergeable.

Avantages :

• Aucun tracking, aucun cookie
• Auto-hébergeable (contrôle total des données)
• Conforme RGPD et ePrivacy
• Gratuit et open source

Implémentation :

<script src="https://cdn.jsdelivr.net/npm/altcha/dist/altcha.min.js" async defer></script>

<form>
  <altcha-widget challengeurl="YOUR_CHALLENGE_URL"></altcha-widget>
  <button type="submit">Envoyer</button>
</form>

Comparatif des solutions

Alternative : le honeypot

Pour les formulaires à faible risque, un honeypot peut suffire :

<form method="POST">
  <!-- Champ invisible pour les humains, rempli par les bots -->
  <div aria-hidden="true" style="position: absolute; left: -9999px;">
    <label for="website">Ne pas remplir ce champ</label>
    <input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
  </div>

  <label for="email">Votre email</label>
  <input type="email" name="email" id="email" required>

  <button type="submit">S'inscrire</button>
</form>

Côté serveur, rejetez les soumissions où le champ "website" est rempli.

[!WARNING] Les honeypots seuls ne protègent pas contre les attaques ciblées. Combinez-les avec d'autres mesures (rate limiting, validation côté serveur).

Proposer un contact alternatif

Quelle que soit votre solution CAPTCHA, proposez toujours une alternative :

<p>
  Vous ne pouvez pas valider le CAPTCHA ?
  <a href="/contact-telephone">Contactez-nous par téléphone</a>
  ou
  <a href="mailto:contact@example.com">par email</a>.
</p>

C'est une exigence du RGAA critère 11.10.

Bonnes pratiques d'implémentation

1. Positionnement du CAPTCHA

Placez le CAPTCHA juste avant le bouton de soumission, pas en début de formulaire.

2. Messages d'erreur accessibles

<div role="alert" id="captcha-error" hidden>
  La vérification a échoué. Veuillez réessayer.
</div>

3. Pas de limite de temps stricte

Laissez suffisamment de temps pour compléter le CAPTCHA, ou utilisez une solution sans limite.

4. Test avec technologies d'assistance

Vérifiez que :

• Le CAPTCHA est annoncé par les lecteurs d'écran
• Il est utilisable au clavier
• Les messages d'erreur sont perceptibles

Migration depuis reCAPTCHA v2

Si vous utilisez encore l'ancien reCAPTCHA avec images :

1. Court terme : Passez à reCAPTCHA v3 (invisible)
2. Moyen terme : Migrez vers Turnstile ou Friendly Captcha
3. Ajoutez un contact alternatif immédiatement

Critères RGAA concernés

Conclusion

Les CAPTCHA inaccessibles sont une relique du passé. Les solutions modernes comme Turnstile, Friendly Captcha ou ALTCHA protègent vos formulaires sans discriminer les utilisateurs handicapés. Choisissez une solution invisible qui travaille en arrière-plan, et proposez toujours un moyen de contact alternatif.

Testez l'accessibilité de vos formulaires avec RGAA Checker : notre outil vérifie les champs, labels et messages d'erreur de vos pages.