Accessibility of sliding CAPTCHA
Below is a list of accessibility issues in the sliding CAPTCHA:
- There are several redundant
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 the redundanttitle
attributes. - The text above the reload button is coded as a
<label>
for the button below it, and the button itself has atitle
attribute. As a result, screen readers announce this as follows: "Reload CAPTCHA button Reload the CAPTCHA". It would make more sense to move the text "Reload CAPTCHA" into thebutton
tags (e.g. before theem
), so thelabel
element and thetitle
attribute can be deleted. - The slider itself has no label. The text above it ("Move the slider to ...") should be a
<label for="...">
instead of a regular<p>
. - The green does not provide enough contrast with the white text on the button nor with the grey background of the slider. Use, for example,
#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. A 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 onto the slider with the keyboard, it does not have a keyboard focus indicator that tells sighted keyboard users they are on the slider. Add a black border or another visual cue to the green marker on focus-visible.
- Move the Validate button centred below the slider, so that it is easier to find with screen magnification