Ce dépôt contient une solution de test (à la Captcha®) mettant l’accès sur l’accessibilité.
Le code a été initialement développée par la société Artifica, dans le contexte de la validation de formulaires pour le système de gestion de contenu TYPO3.
La solution est actuellement disponible en PHP pour la partie serveur et en Javascript pour la partie client, mais d’autres implémentations sont possibles.
Si vous souhaitez contribuer, n’hésitez pas à nous contacter ou à ouvrir une issue.
Cette solution a d’abord été conçue pour une intégration au système de gestion de contenu TYPO3. Il devrait néanmoins servir de base pour une intégration ailleurs. Ces éléments de documentation peuvent être améliorés : si vous avez une question ou si un point n’est pas clair, n’hésitez pas à ouvrir une issue.
La partie JS est codée en natif. Le code est totalement indépendant de toute autre librairie Javascript.
Mettre l’appel du fichier dans le pied de page du site:
<script src="assets/tchatcha/tchatcha.js" type="text/javascript"></script>
Ajouter à la fin du formulaire une balise de réception.
<div class="tchatcha"></div>
À la fin du chargement de la page, le code Javascript va initialiser le test dans le formulaire.
La fonction init() est lancée sur les éléments .tchatcha.
On peut effectivement avoir plusieurs formulaires dans la même page avec des résolutions de test différentes.
Chaque élément passe par la fonction prepare() qui transmet la demande
de création d’un test via la fonction execute() au PHP.
Le retour de réponse est traité par la fonction render() qui injecte
le code dans l’élément .tchatcha.
Pour lancer la vérification du test, ajouter un événement au submit
du formulaire.
Cette partie a été ajouté afin d’avoir la main mise sur le retour de la validation du test et ainsi agir selon la réponse.
Cela permet en autre d’envoyer le formulaire si la réponse est positive, ou de lancer d’autres tests.
document.forms['myForm857'].onsubmit = function(event){
window.tchatcha.validation(this, function(response, error){
if(!response)
{
if(error == 'msgError1')
{
alert('Merci de répondre au test');
}
if(error == 'msgError2')
{
alert('Erreur sur la réponse au test. Merci de recommencer');
}
}
else
{
alert('Le test est validé');
}
});
event.preventDefault();
};
On peut enlever cette étape et l’inclure dans l’initialisation du test et injecter le onsubmit, mais il faut se garder la possibilité d’un callback ou promise.
La partie PHP est codée en natif. Le code est totalement indépendant de toute autre librairie PHP.
Le programme réagit à deux sortes de demandes, on peut étoffer les fonctionnalités selon les besoins :
- render : création d’un test
- validate : vérification du test
À l’appel de celui-ci le code crée une instance de la classe
tx_tchatchaform_tchatcha().
Concernant l’accessibilité, le but recherché est d’avoir un test textuel. À l’origine ce test était un simple champ texte et l’internaute devait rentrer la résolution du test. Nous sommes passé sur des boîte à cocher invisibles avec un affichage de carrés afin de rendre le test plus convivial. Le tout reste responsive.
Une évolution possible est d’ajouter un bouton son, pour une lecture vocale.
La solution Tchatcha est complétement intégrable dans le système de gestion de contenu TYPO3.
A l’inverse de la première méthode en javascript direct, la validation se fait en soumettant le formulaire.
On peut faire un mélange des deux principes, clé et rendu en backend, et test de la clé en ajax.
Mais la méthode est identique dans TYPO3 que dans une autre solution.
Au chargement du formulaire (ou à la création), instanciez la class
tx_tchatchaform_tchatcha:
$secure = new tx_tchatchaform_tchatcha();
Il est possible d’injecter les messages d’erreurs pour les inclures dans le rendu.
$secure->_errorArray = $this->_arrErrors;
Récupérez le rendu html du test:
echo $secure->makeHtmlCode();
Récupérez la clé de chiffrement, une valeur unique qui permettra le
test. Celle-ci peut être mise dans un champ hidden de votre formulaire :
$arguments['checkKey'] = $secure->getSecurCryptKey();
Enfin à la soumission du formulaire en GET ou en POST, on teste la
valeur envoyée par l’internaute et la clé de chiffrement dans votre
code de validation,
$secure = new tx_tchatchaform_tchatcha(); $response = $secure->validate($arguments['checkKey'], $arguments['test']);
Le retour de validate est un booléen.
Vos contributions sont les bienvenues ! Notamment:
- pour tester et améliorer la documentation ;
- pour moderniser l’écriture de la partie Javascript ;
- pour implémenter la partie backend dans d’autres langages.
Si besoin, n’hésitez pas à à ouvrir une issue.
Le code source de ce dépôt est publié sous licence Apache 2.0.
2020 DINUM, Etalab.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent