CAPTCHA Audio Alternative

[SamA74]

I have recently been re-coding a Contact Form. It currently (and previously) has a CAPTCHA that I designed myself which has so far been 100% watertight, while at the same time is way more user friendly than the usual wonky letters type… IF you can see! It is a visual question, so if you can’t see, you are stumped.
So I thought I may add an audio alternative option, but I’m not sure how to make it work and be nicely accessible.
What I wanted was a little audio icon in a link which when active would play the audio clip.
I have it working for mouse clicks, but if tabbing through the form and hitting “Enter” on focus it does not play.

    <p><label for="num">How many fingers am I holding up?</label>
    <input type="text" name="num" id="num" maxlength="2" size="2" value="" required  tabindex="2">
        <a>
            <img class="icon" onclick="infFin()" src="images/info.svg" alt="Info" title="Field Information"  width="20" height="20">
        </a>
        <span class="iaud">
            <audio src="docs/qu-<?php echo $randnum ; ?>.wav" id="audio"><p>No Audio Plugin!</p></audio>
            <a onclick="document.getElementById('audio').play()" title="If you cannot see the image use this audio question to get the required pass number." tabindex="3">
                <img class="icon" src="images/audio.svg" alt="Audio Icon" width="30" height="30">
            </a>
        </span>
    </p>

I know I’m using onclick which works only with a mouse click, so what should I use?
Or am I doing this all wrong? I admit that the whole accessibility thing is a mystery to me, that’s why I’m asking, it’s something I need to improve on.

[SamA74]

@SamA74

I know I’m using onclick which works only with a mouse click, so what should I use?

Alright, it was because my <a> has no href attribute, adding that, it works.
But I still welcome comments on how accessible it may or may not be. Like using an icon makes it neat for seeing visitors, but if you don’t see, does the title attribute in the <a> do the trick, or should I change the alt in the img?

[felgall]

@SamA74

it was because my <a> has no href attribute, adding that, it works.

So the person who can’t see the CAPTCHA can tab to that field and press enter to run it. So you just need to make sure that when they tab to that field they can tell what the field is for.

[SamA74]

@felgall

So you just need to make sure that when they tab to that field they can tell what the field is for.

Does the title attribute in the anchor do that?
Also note the earlier <a> tag with no attributes, around the “info Icon”. I have added attributes to that too now. Selecting that brings up a message giving more detail on how to use the field for anyone who is unsure what to do.
In reality, I think I have the cart before the horse. I realised that my main nav menu on the site is very “untabbable”, so it would be a miracle if anyone using tab navigation even found the contact page! I think there is work to do there.

[Stomme_poes]

Does the title attribute in the anchor do that?

Just as a head’s up… if there’s an img inside an a, generally the img’s alt attribute text is considered the a’s “link text.” I mean in this case, the image is an alternative to the text, so the alt text is… an alternative to the img who is an alternative to the text.

Textception…