-
Notifications
You must be signed in to change notification settings - Fork 333
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hover states for checkboxes and radios aren't visible in Windows High Contrast Mode #3695
Comments
I'm confused, our radios already have a hand pointer when you hover? As in the screenshots above |
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. |
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: |
yes, its the 'solution' part I was confused by, which refers to adding a pointer hand |
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. |
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.movMoving 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.movThe 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. |
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)
User comments
Low vision user
Solution
Consider adding a clear indication for users when hovering over inputs and forms with a mouse to indicate that they are interactive.
Example:
The text was updated successfully, but these errors were encountered: