Quick Note on ARIA and Windows High Contrast Mode
Published:
Feb 12, 2019
|
Updated:
2019.07.16
Tag(s): accessibility, Windows High Contrast Mode, ARIA
When testing websites and apps in Windows High Contrast Mode (WHCM), there are two issues I’ve come across over again and again.
WHCM cares not for your ARIA attributes
While ARIA attributes (representing roles, states and properties) coupled with CSS can be used to alter the semantics and visual appearance of an element (for example, creating custom buttons or links), WHCM can pierce through these shenanigans. The OS-level user styles will ignore the semantic modifications to these elements, and will provide high contrast coloring based on the element’s base semantics.
Consider the following:
This screen shot consists of two actual links and other elements styled to be semantically announced and look like links. Review the link CodePen for the source.
But when Windows High Contrast Mode is enabled, many of these “links” are not colored as one might expect:
With WHCM turned on the true links [...]