[Carbon 10 🔘 ] Radio Button WCGA 2.1 Guideline 1.4.1 violation

1.4.1 Use of Color Level A violation by C10 radio button

Browser

Firefox

Detailed description

What version of the Carbon Design System are you using?

v 10.25.0 carbon-components-react v 7.25.0

What did you expect to happen?

“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” We should still see the radio button selected after removal of color or the implementation of another technique: “Situation A: If the color of particular words, backgrounds, or other content is used to indicate information: G14: Ensuring that information conveyed by color differences is also available in text G205: Including a text cue for colored form control labels G182: Ensuring that additional visual cues are available when text color differences are used to convey information G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them”

What happened instead?

Button selected versus unselected states look the same after color removal.

What WCAG 2.1 checkpoint does the issue violate?

1.4.1 Use of Color Level A

Steps to reproduce the issue

Issue can be tested in CDS storybook:

In Firefox Fonts & Colors settings select System Colors and set “Override the colors specified by the page with your selections above” to “Always”

Click one of the radio buttons. User cannot see button selected.

Instructions to remove color may vary between browser. Additional guidance to configure the browser to ignore colored text:

Firefox®:

Select Tools > Options… On the Content tab, in the Fonts & Colors section, select the Colors… button. In the Colors dialog box, select the Use system colors checkbox and deselect the Allow pages to choose their own colors, instead of my selections above checkbox. Select OK to save changes. Select OK to exit the Options dialog box. For Internet Explorer®:

Select Tools >Internet Options. On the General tab, in the Appearance section, select the Accessibility button. Check the box Ignore Colors Specified on Web Pages and select OK. On the General tab, in the Appearance section, select the Colors button and ensure that the checkbox Use Windows colors is selected and select OK to save this setting. Select Apply and OK to save changes. Note for iOS platform: Mobile Safari does not support removing color from text. Therefore, use a desktop browser to perform the required unit tests.

[dakahn]

That same doc also specifies the method for Edge 😃.

Yes, with the use of a browser extension. But without third party tooling Chromium browsers don’t support this use case – which was the point I was making. That said, the Chromium browser extension recommended in those docs will desaturate the page (make it grayscale) which would potentially allow someone to see a 1.4.1 violation for requiring a user to perceive or distinguish color 👍🏽

Our squad has to use Carbon and we simply need to pass and be compliant.

Completely understand where you’re coming from. The reason this issue remains closed is because this testing methodology doesn’t actually ensure 1.4.1 compliance. There could be something fundamental I don’t understand about 1.4.1 and if that’s the case I’m happy to reopen. ☮️

Although its not well documented I think this setting simply imports Windows foreground, background, and link color values from the OS. Which if that’s the case there’s no reason this setting should be overwriting that SVG fill on the selected radio. Meaning instead of a 1.4.1 violation what you’ve potentially found is an upstream bug with this Firefox setting.

[Majavita]

@dakahn That same doc also specifies the method for Edge 😃. They just expect the radio button center dot to stay visible. You disagree with the Accessibility team’s directions and therefore with AVT’s use of this to open accessibility defects.
I have shared your disagreement in the channel already and shall wait for their decision. Will tag you to the comment. Other non-Carbon radio buttons and toggles do a better job, but I’ll let the Design folks escalate. Our squad has to use Carbon and we simply need to pass and be compliant.