Comment faire accessibilité et éco-conception @Démo publique

Fiche: Capcha

Description

Ce capcha permet à tous de passer un test simple qui cherche à éliminer une bonne partie des robots.

Le principe est simple, pas de téléchargement d'images ou de sons plus ou moins lisibles, pas d'envoi d'information sur des serveurs. Tout se passe en local.
Ce modèle de Capcha ajoute une question arithmétique assez simple à la volée. Cette question n'est pas différentiée des autres éléments de saisie et peut-être posée sous différentes formes.

La validation est réalisée en local, le code respecte l'accessibilité numérique et sa légèreté répond aux principes d'éco-conception.

Son fonctionnement est basé sur la réalisation d'un simple opération. Même si cette opération reste simple (niveau début de primaire), elle peut représenter une difficulté pour certaines personnes.

En termes de fonctionnement, hormis le fait d'être basée uniquement sur du texte, elle tente de "pièger" les robots par 2 systèmes.

  1. Le mélange de la représentation numérique et texte des chiffres ;
  2. Le fait que la question est proposée, affichée après l'affichage du DOM (tout en restant lisible pour un lecteur d'écran) et d'une question vide.

Ce système n'est certainement pas le plus sophistiqué mais, peut représenter une alternative accessible acceptable aux capcha graphiques ou aux capcha dynamiques utilisables uniquement avec un pointeur.

Structure

[form]
	[fieldset]
		[legend]
		[label]
		[span] <-- erreur
		[span] <-- aide
		[input]
	[input] <-- bouton
	[div] <-- alerte

Implémentation

Veuillez répondre à cette question afin de vérifier que vous n'êtes pas un robot. La réponse à cette question est obligatoire.

Code

HTML

<form action="index.php" method="post" id="blocCaptcha" accept-charset="UTF-8">
    <fieldset id="captcha" class="" name="captcha"><legend>Il est nécessaire de répondre à ce petit quiz pour continuer...</legend>
        <span class="NL">
            <label id="l_humains" for="humains" class="continue">Indiquez, en chiffre, combien fait cinq plus neuf ?</label>
            <span class="erreur" id="ERRhumains" aria-labelledby="l_humains" role="alert">Vérification anti-robot, le résultat est inexact.<br></span>
            <span class="aide">La réponse à cette question est obligatoire.</span>
            <input id="humains" type="text" class="court verifFaux">
        </span>
    </fieldset>
    <span class="actions"><input type="button" value="Envoyer la réponse" onclick="capcha('blocCaptcha'); return false"></span>
    <div id="alerteur"></div>
</form>

JavaScript

<script>
    var lang = <?php echo $_SESSION["langue"]; ?>;
    if (lang == 0) var nombre = ["zero", "un", "deux", "trois", "quatre", "cinq", "six", "sept", "huit", "neuf", "dix"];
    else var nombre = ["zero", "one", "two", "three", "for", "five", "six", "seven", "eight", "nine", "ten"];
    var numero1 = Math.floor(Math.random() * 10);
    var numero2 = Math.floor(Math.random() * 10);
</script>

[HTML]

<script>
        var captchaAuto = true;
        window.onload = function() {
            var cas = Math.floor(Math.random() * 4)
            var ajoute = " plus ";
            if (lang == 0) {
                if (cas == 0) ajoute = " plus ";
                else if (cas == 1) ajoute = " + ";
                else if (cas == 2) ajoute = " augmenté de ";
                else if (cas == 3) ajoute = " auquel on ajoute ";
                else if (cas == 4) ajoute = " ajouté à ";
            } 
            else {
                if (cas == 0) ajoute = " plus ";
                else if (cas == 1) ajoute = " + ";
                else if (cas == 2) ajoute = " increased by ";
                else if (cas == 3) ajoute = " to which you add ";
                else if (cas == 4) ajoute = " added to ";
            }
            if (lang == 0) {
                var questie = "Veuillez répondre à cette question afin de vérifier que vous n'êtes pas un robot.";
                var cas2 = Math.floor(Math.random() * 5)
                if (cas2 == 0) questie = "Êtes-vous un utilisateur humain ou un opérateur automatique ? Veuillez répondre à une simple question complémentaire";
                else if (cas2 == 1) questie = "Afin de finaliser le questionnaire, une dernière question.";
                else if (cas2 == 2) questie = "Veuillez répondre à cette question afin de vérifier que vous n'êtes pas un robot.";
                else if (cas2 == 3) questie = "Il est nécessaire de répondre à ce petit quiz pour continuer...";
                else if (cas2 == 4) questie = "Question finale.";
                else if (cas2 == 5) questie = "Veuillez répondre à cette question afin de vérifier que vous n'êtes pas un robot.";
            }
            else {
                var questie = "Please answer this question to verify that you are not a robot.";
                var cas2 = Math.floor(Math.random() * 5)
                if (cas2 == 0) questie = "Are you a human user or an automatic operator? Please answer a simple supplementary question";
                else if (cas2 == 1) questie = "To finalize the questionnaire, a final question.";
                else if (cas2 == 2) questie = "Please answer this question to verify that you are not a robot.";
                else if (cas2 == 3) questie = "You'll need to take this little quiz to go on...";
                else if (cas2 == 4) questie = "Final question.";
                else if (cas2 == 5) questie = "Please answer this question to verify that you are not a robot.";
            }
            if (lang == 0) msg = "Indiquez, en chiffre, combien fait";
            else msg = "In figures, how much is ";
            labelCONT = document.querySelector("#blocCaptcha #captcha label");
            questCONT = document.querySelector("#blocCaptcha #captcha legend");
            if (typeof questCONT !== "undefined" && questCONT != null) questCONT.innerHTML = questie;
            if (typeof labelCONT !== "undefined" && labelCONT != null) labelCONT.innerHTML = msg + " " + nombre[numero1] + ajoute + nombre[numero2] + " ?";
        }
</script>

function capcha(quoi) {
    document.querySelector(".erreur").innerHTML = "";
    var selection = "";
    var chaineInfo = "";
    var compteErreurs = 0;
    var resumeErreur = "<ul>";
    var resultat = numero1 + numero2;
    if (!document.querySelector("#"+quoi+" .erreur").classList.contains('cache')) document.querySelector("#"+quoi+" .erreur").classList.add('cache');
    else document.querySelector("#"+quoi+" .erreur").classList.remove('cache');
    rh = document.querySelector("#"+quoi+" #humains").value;
    if (resultat == rh) {
        document.querySelector("#"+quoi+" #humains").classList.remove("verifFaux")
        if (lang == 0) msg = "Envoi du formulaire, captcha OK";
        else msg = "Form Sent, captcha OK";
        alert(msg)
        alerteur(msg,1);
    }
    else {
        document.querySelector("#humains").classList.add("verifFaux");
        if (lang == 0) msg = "Vérification anti-robot, le résultat est inexact.<br />";
        else msg = "Anti-robot check, the result is inaccurate.<br />";
        msg1= msg;
        if (lang == 0) msg += "<a href=\"#captcha\">Veuillez recommencer.</a>";
        else msg += "<a href=\"#captcha\">Please try again.</a>";
        document.querySelector("#"+quoi+" #captcha #ERRhumains").innerHTML = msg1;
        document.querySelector("#"+quoi+" #captcha #ERRhumains").focus()
    }
}