Hover states for checkboxes and radios aren't visible in Windows High Contrast Mode

[dav-idc]

This issue is from May 2023 external accessibility audit report.

Usability issue
A component did not display a change of state to indicate mouse hover.

Issue ID:
DAC_Usability_Mouse_Hover_01

URLs:
Example page link: https://govuk-frontend-pr-3503.herokuapp.com/full-page-examples/search

Relevant guidance pages: Checkboxes and Radios.

Screen shots

The checkboxes and radio buttons do not display a visible change when receiving mouse hover in high contrast mode. This means that some users may not be able to distinguish when they are able to activate the component and form.

Current code ref(s)

#main-content > form > div.govuk-grid-row > div.govuk-grid-column-one-third > ul > li:nth-child(4) > div > fieldset > div > div:nth-child(1)

<div class="govuk-checkboxes__item">
    <input class="govuk-checkboxes__input" id="organisation" name="organisation" type="checkbox" value="hmrc">
    <label class="govuk-label govuk-checkboxes__label" for="organisation">HM Revenue and Customs (HMRC)</label>
</div>

User comments

Low vision user

“I noticed that each radio button/checkbox does not become highlighted when hovering the pointer over them. I found this to be an issue because my eye condition prevents me from clearly seeing the pointer change state. Therefore, I rely on highlighted elements on the radio buttons etc, to visibly indicate to me which radio button I am hovering over. It would be beneficial for me that each button is to become highlighted with an underline for example, that appears/disappears on the text when mouse hover occurs, as this will help me to determine which radio button/checkbox/button I am hovering over also to help me determine that the component can be selected.”

Solution

Consider adding a clear indication for users when hovering over inputs and forms with a mouse to indicate that they are interactive.
Example:

.govuk-radios__input {
    cursor: pointer;
}

[joelanman]

I'm confused, our radios already have a hand pointer when you hover? As in the screenshots above

[querkmachine]

I also find this one a bit interesting.

It's not specific to High Contrast Mode, as we do not provide a hover style on radios or checkboxes in regular colour modes either—we only do this on the smaller variants to indicate that despite the smaller visual appearance they still have the same target area as the regular variant.

In High Contrast Mode, disabled (non-interactive) inputs appear in a different colour than active equivalents. I'm not sure if the low vision user quotes was unaware of this distinction.

Generally speaking, having a hover style on radios and checkboxes is uncommon. Chrome and Firefox (macOS) only slightly darken the input border colour on hover, not by a degree to be particularly noticable. Safari on macOS does not apply any style changes on hover at all. None change the cursor appearance or the appearance of the associated label.

[dav-idc]

For extra context, the versions of these radios and checkboxes, outside of high-contrast mode, do have a distinct hover state, which doesn't rely on a hand pointer. Granted, the hover states we provide are quite low-contrast.

Additionally, this was identified as a usability issue (which I agree it is), and not a WCAG failure.

Here's screenshots of the hover states without high contrast mode:

• Radio (small variant) with hover
  
• Checkbox (small variant) with hover
  

[joelanman]

yes, its the 'solution' part I was confused by, which refers to adding a pointer hand

[dav-idc]

Ahh I didn't even notice that the example code they offer in their solution is at odds with the rest of their info in this issue 😂

I would personally chalk that up to a copy/paste from a set of pre-made solution texts they probably work with. In our case, I would say that example code is unhelpful, since we already use a pointer cursor.

But the main idea of having a more visible hover state for contrast-themed setups (like Windows High Contrast Mode) does still seem like a solid idea to me, which would increase usability.

[36degrees]

I can provide a little additional context as to why the small radios and checkboxes (hereafter referred to as 'controls' for brevity!) have a hover state but the regular size ones don't.

As beeps has already noted, the small controls actually have the same target size (clickable area) as regular controls. In order to achieve this whilst still making the controls visually more compact we remove the 'gap' between the controls.

You can see this clearer if you make the underlying HTML inputs visible again.

Moving between regular controls, there's a clear gap between each input where the cursor changes back to the default pointer:

Screen.Recording.2023-06-06.at.16.12.08.mov

Moving between small form controls, there is no gap between each input, the cursor moves straight from one input to the next:

Screen.Recording.2023-06-06.at.16.11.17.mov

The hover state was therefore added to the small controls make it less ambiguous which one would be activated if you clicked the area between each visible control.