search

canada-ca / design-system-systeme-conception

Experimental/test repo for the Canada.ca design library - the official repo is over here: https://github.com/canada-ca/design-system and experimental repo can be viewed at:
https://design.alpha.canada.ca/
MIT License
10 stars 7 forks source link

Bug - Radio buttons don't work well in Windows High Contrast Mode #141

Open jkshapiro opened 3 years ago

jkshapiro commented 3 years ago

Describe the bug

In Windows High Contrast Mode, it is impossible to tell which of the big radio buttons (https://design.canada.ca/common-design-patterns/checkboxes-radio-buttons.html) is selected

To Reproduce

Steps to reproduce the behaviour:

  1. Turn on Windows High Contrast Mode (see https://support.microsoft.com/en-us/windows/use-high-contrast-mode-in-windows-10-fedc744c-90ac-69df-aed5-c8a90125e696)
  2. Visit a page that contains big radio buttons, e.g. https://design.canada.ca/common-design-patterns/checkboxes-radio-buttons.html
  3. Click on any of the radio buttons

Expected: you can see which one is selected

Observed: you cannot see which one is selected

jkshapiro commented 3 years ago

This leads to a violation of https://www.w3.org/TR/WCAG21/#non-text-contrast for any web sites or applications using this feature, as well as being a usability challenge.

jkshapiro commented 3 years ago

This may be useful? https://sarahmhigley.com/writing/whcm-quick-tips/

Christopher-O commented 3 years ago

This is also a great reference to fix the issue: https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074