You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
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.
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.
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.
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:
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.
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:The text was updated successfully, but these errors were encountered: