Radio and checkbox labels rely on the cursor changing on hover to show they can be clicked

[tombye]

Description of the issue

Radios and checkboxes can be activated by clicking their labels. The cursor will change when the mouse/trackpad/pointer is over the label to indicate this but it doesn't provide enough of a visual cue for low vision users.

This was reported by the 'Low vision' tester at the Digital Accessibility Centre (DAC), in an audit commissioned by GOV.UK Notify.

Their comment was:

The radio button display provides a circular focus point which is easily accessed should a user navigate by placing the mouse pointer directly into the circle. Should a user, with low vision or mobility has difficulty doing this and find it easier to rely on clicking the text related to the button, they will realise that there is no additional visual cue or call to action to alert the user the text can be clicked to occupy the Radio button and therefore may not be functional. The addition of visual cue is important as some users may not have the vision or mobility skills to easily place the mouse pointer in the correct area to use this function. Underlining text or placing a border around the radio button hotspot will provide ideal addition visuals to alert the user of function.

They reported the same for checkboxes. They also noted in another issue the difficulties in relying on the cursor change alone for a cue to the clickability of anything:

...using the mouse to access a required link can prove problematic. With the mouse pointer frequently being lost, a low vision user heavily relies on call-to-action focus to ensure correct links are being accessed.

Steps to reproduce the issue

Using a mouse/trackpad/pointer, hover over one of the labels in a radios or checkboxes component. If you do not have a visual impairment similar to the tester mentioned here, you should use something to hide the cursor, for example this browser plugin.

Actual vs expected behaviour

It should be obvious that the label is clickable and when the cursor enters/leaves the clickable area without relying on being able to see the cursor. This was not the case for the tester because the only visual cue was the cursor changing.

Environment (where applicable)

GOV.UK Notify currently uses version 2.13.0 but the tester mentions experiencing this issue on the www.gov.uk website, so likely they were viewing pages using a more recent version.

The tester was using Google Chrome and Microsoft Edge on Windows (latest versions) for the audit but they mention experiencing this issue on mobile devices and other different screens. See their comment in the description for their exact words.