Accessibility issues in sliding CAPTCHA
The issue description below was written up by Régine Lambrecht (regine.lambrecht@ext.ec.europa.eu), who works as an accessibility expert for DG COMM.
Out of the three EU captchas, only the sliding EU captcha is nearly accessible to all: sighted keyboard only users, blind users, deaf users, deaf-blind users. It is not ideal for users of a screen magnifier, but it is doable.
Here are the issues with the EU sliding captcha:
- There are four useless
title
attributes: on the label above the reload button, on the label for the language change, on the reload button itself, and on the Validate button. In addition they are not being translated while the visible text is translated. Please remove all fourtitle
attributes. - The text above the reload button is coded as a
<label>
, but it has no field associated so it is not valid. Use a<p>
instead. Then addaria-labelledby
on the<button>
with a reference to anid
on that<p>
, so that the visible text will be the accessible name of the button. - Missing label for the slider (the text above it, with the question, should be a
<label for="...">
instead of<p>
). - Would it be possible to show the selected value on top, such as here, so that people using a screen magnifier can see it without having to move down right to the Answer text then back to the cursor, back to the answer, back to the cursor...?
- The green is not contrasted enough with white text on the button nor with the grey background of the slide. Use
#19692C
instead: it would be OK for the slider and the button. - The reading order is not logical: the slider is not read by the screen reader directly after its instruction. The Reload button comes in between. While the blind user will logically expect to find the slider after the question. Move the slider input just below the instruction. You can remove the separator if you want (it has no sense to visually separate the questions from the slider anyway), or only keep the Validate button below the separator if you cannot get rid of it.
- The visible focus is missing on the slider. When tabbing with the keyboard, we don't know we reached it. Add a black border around the green marker on focus-visible.
- Move the Validate button centred below the slider, so that it is easier to find with screen magnification.