Missing form input labels

[chris....@teamaol.com]

I noticed there were two inputs that seem to lack labels:

1. The first one has the following html:

<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea>

There is a display:none on it so maybe it was intended to be an invisible container used to submit some behind-the-scenes data but all the styling would indicate that this is exposed to the user in some scenario. If it really was meant to be hidden, why not make it a an actual form hidden element? Assuming it's not always hidden then it needs a form label. So the fix would be something like:

<label for="g-recaptcha-response" style="display:none">

<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;  display: none; "></textarea>

Of course the display:none on the label would need to be removed by the same function which removes it from the texarea.

2. The second instance is when the captcha widget checkbox fails and the user is presented with an alternate challenge. If the user chooses "Get An Audio Challenge" they are presented with a snippet of audio and a text input to type the number heard. That input also lacks a label. The HTML looks like this:

<input type="text" id="audio-response" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" dir="ltr" class="rc-response-input-field label-input-label" pattern="[0-9]*">

Now on my desktop browser, when I tab to this input a screen reader says "Enter the numbers you hear, edit text" as though there is a perfectly good label on the input, yet there is none in the HTML. Only thing I can figure out is that there are several focus event handlers attached to the node via jQuery, specifically attached to nodes with a class of rc-response-input-field.label-input-label. That leads to a pile of obfuscated JS that I couldn't decipher. In the end, whatever trickery is being used failed when I load the same thing on an iOS device. There the screen reader just says "text field".

The simple fix is to just add a label, even if it's not visually perceivable, to the existing text input and leave all the javascript hackery behind.

CB