Site accessibility issue: requires color, incompatible with forced colors

[Seirdy]

Currently, Can I Use is very difficult for me to use with forced colors.

The issue

“Forced colors” is a standard browser feature implemented by Windows High Contrast Mode and by Firefox on all platforms

When I override colors to my preferred palette, it’s impossible for me to distinguish between “supported”, “not supported”, and “partially supported” states without selecting each entry and reading the infobox. Without enabling JavaScript, I have to read the tooltip with the mouse (!!).

Reproduction

In Firefox, on any supported platform: go to “colors” in about:preferences, select “Manage Colors”, and set overrides to “always”.

Alternatively: on Windows, enable High Contrast Mode and use Firefox or any Chromium-based browser.

Severity

This is a violation of the WCAG level A success criterion 1.4.1, Use of Color.

With JavaScript enabled, the site is difficult but possible to use; I have to look at cell details one-at-a-time since the infoboxes cover other cells. Without JavaScript, the site is impossible for me to use without squinting at tooltips exposed by the mouse, or switching to a screen reader.

Proposed solution

I can think of two solutions:

1. Add a visual indicator to each cell, such as a check-mark or “X”. The cells already have accessible text alternatives; these textual alternatives can be assigned to these symbols.

2. Alternatively, follow the design of the browser compatibility tables on MDN by putting visible text in each cell to describe supported/not-supported status. If this text is good enough, it eliminates the need for visually-hidden text specifically for the accessibility tree.

Screenshot

This is a screenshot of the table from the page “CSS at-rule: @media: forced-colors media feature” as it appears on Firefox with forced colors enabled:

[06b]

Ironically I ran into this issue myself while using Can I Use to check on forced-colors support, here's a small example of rendering the cross mark emoji and the check mark button emoji for supported/not supported. Unknown could be left empty and this could be applied to when forced-colors media query is active.

[Fyrd]

Firstly, apologies for having taken so long to implement this. I'm happy to report though that this has now been implemented, using symbols for each support type when forced-colors is enabled (and making each cell wider to account for the extra space required)

Hope this meets expectations! I wasn't sure what the best symbol would be for "partial" support, I went with this: ◐ as I figured it represents something half-filled, but open to other suggestions.

[Fyrd]

Had to revert this, so re-opening for now. Will try to get the proper fix in soon.

[Fyrd]

Properly fixed now. :)