Suggestion from a Friendly Captcha user:
For your part, I think you're already doing everything an external accessibility library should do. They ensure that those elements that are generated by your library are barrier-free - at least for screen readers.
Personally, I would advise site operators who integrate your library to use startedCallback and doneCallback for messages to screen readers - something like this:
<form>
<div class = “frc-captcha“ id = ”captcha-challenge”> </div>
<input type = ”submit” value = ”Submit” id = ”submitButton2 disabled />
</form>
<div class = 2sr-only ”id =” alertDiv ”aria-live =” polite ”> </div>
<script>
Let el = document.getElementById (“captcha-challenge”);
Let captchaInstance = new friendlyChallenge.WidgetInstance (el, {
Sitekey: "...",
startedCallback: function () {
document.getElementById (“alertDiv”). innerHtml = “Solving CAPtCHA…”;
},
doneCallback: function (solution) {
document.getElementById (2submitButton ”). removeAttribute (2disabled”);
document.getElementById (“alertDiv”). innerHtml = “CAPTCHA solved! You may submit the form now. ”;
}
});
</script>
For a blind person it is like this: He / she navigates to the form and begins to enter data. As a rule, the CAPTCHA solution then begins. Until the blind person reaches the CAPTCHA field (and thus notices it at all) this is long completed. But now we're used to having to do something with CAPTCHAs.
Accordingly, the blind person will probably first see if there is anything left to do. In my opinion, the text “I am human” does not really indicate that the CAPTCHA has already been completed - at your demo I expected a checkbox not marked as such in addition to “I am human”, in the style of “I am not a robot “at Google ReCAPTCHA.
(This confusion is mainly due to the fact that we are used to having to make an effort with CAPTCHAs.)
The notifications described above would help here; Live regions are something that (in my opinion) should never be implemented by an external library, but always by the site operator himself; they can become annoying very quickly if there are too many live regions.
If you would still like to tackle the "problem" from your side, I recommend the following procedure:
<span class = “sr-only“> CAPTCHA solved! </span> I am human
An example of a .sr-only class would be:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect (0,0,0,0);
border: 0;
}
More on this here: https://stackoverflow.com/questions/34175774/what-is-the-use-of-sr-only-focusable-class-in-bootstrap
This ensures that additional info text for screen readers is recognized by them (unlike display: none), but it is visually hidden and thus irritates those who cannot see.
However, as I said, these are more adjustments in the area of user-friendliness than in the area of accessibility.