reCAPTCHA Screen Reader compatability

[Andrew Larkin]

I noticed there were a few threads on this topic, but none seemed to be productive in solving some of the accessibility issues with reCAPTCHA, hence the new thread.

reCAPTCHA is challenging for screen reader users.  While the controls can be located using advanced screen reader features, the controls, particularly the controls for audio challenge, are not in the tab order and are therefore not keyboard accessible.  This goes for the reload and help links as well, which is problematic for users with limited mobility that might be using a keyboard or directional controls to navigate the page.

There are some simple markup changes that can be made to improve the accessibility of the widget.

Labeling for the input field:

Not all screen readers interpret the placeholder attribute correctly.  Furthermore, screen readers look for <label> tags to locate inputs in form select mode.  Adding a <label> tag will rectify this issue.  Set font-size="0" to hide the label, if need be:

<label for="recaptcha_response_field" style="font-size: 0">Type the challenge text</label>

<input name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocorrect="off" autocapitalize="off" placeholder="Type the text" autocomplete="off">

Reload, Audio Challenge and Help:

<a> tags without hrefs are not considered part of the tab order on the page.  Making these elements tabbable will allow both screen reader users and keyboard-only users to access the controls.  This can be done by either adding tabindex=0, adding an empty href, or (preferably) making the controls actual buttons:

<a href="" id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge"><img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="https://www.google.com/recaptcha/api/img/white/audio.gif"></a>

OR

<a tabindex="0" id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge"><img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="https://www.google.com/recaptcha/api/img/white/audio.gif"></a>

OR

<button id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge"><img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="https://www.google.com/recaptcha/api/img/white/audio.gif"></button>

This should be done with these controls as well:

<a id="recaptcha_reload_btn" title="Get a new challenge"><img id="recaptcha_reload" width="25" height="17" src="https://www.google.com/recaptcha/api/img/white/refresh.gif" alt="Get a new challenge"></a>

<a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="Get a visual challenge"><img id="recaptcha_switch_img" width="25" height="16" alt="Get a visual challenge" src="https://www.google.com/recaptcha/api/img/white/text.gif"></a>

<a id="recaptcha_whatsthis_btn" title="Help"><img id="recaptcha_whatsthis" width="25" height="16" src="https://www.google.com/recaptcha/api/img/white/help.gif" alt="Help"></a>

Another enhancement would be to place the Audio Challenge control before the response field in the tab order.  This way, screen reader users will be informed of the presence of an audio challenge before reaching the input field.