Background CSS icons and IE's accessibility setting

[HerinHentry]

Regarding component: https://designsystem.gov.au/components/accordion/live/

1. Open the page in Internet Explorer
2. Press “Alt + T + O” to open Internet Options
3. In the General tab, select "Accessibility” button
4. Check “Ignore colours specified on web pages”. This will remove all the colours specified by the website and the browser default colour will be applied.

Apparently, the background image added through CSS is lost. Is there another option to keep these icons or other indication?

Thanks

[HerinHentry]

Please, revisit all the other icons like "external links", "page alerts", "call to action" etc. the background image is lost. Apparently, font awesome is using "content" property and keeps them together. Worth considering different options.

[TrebBrennan]

Thanks for the good issue. This is an interesting problem which probably won't be a quick fix, but is something worth finding a solution for.

We opted not to use icon-fonts for a myriad of reasons. But to name a few; download weight, unpronounceable characters, and the horrible “missing character” glyph fallback.

My initial thinking is that if we can detect when that setting is used we could explore a similar solution to the one we use as a fallback for IE8. and replace the icon with actual text or something which is described well by a reader.

If people have any suggested solutions to this issue it would be appreciated :)

[varunverma23]

Are design system components IE11 compatible?

[alex-page]

Yes they work back to IE8

[HerinHentry]

Did you consider SVG? I remember talking to Sarah Pulis and she suggested SVGs for a similar problem.

[alex-page]

We use svgs for these icons but they are inserted with data uris which have some issies.

We are considering one component to house our icons in svgs. There is an issue opened for this.

[gordongrace]

Related issue: https://github.com/govau/design-system-components/issues/528

[electronicwoft]

Implementing images that convey information using the CSS background property is a documented WCAG failure. It is also an issue in browsers that support Windows high contrast colour schemes which is currently IE and Firefox because background (i.e., what is considered to be decorative content) is removed when these colour schemes are applied. There is a MS prefixed CSS property that can be used to detect high contrast colour schemes, but not the IE accessibility settings. Only inline SVG will not be removed when either high contrast or IE's 'ignore colours' setting is active. It is important to note, however, that some users find greyscale or the absence of colour beneficial so using inline SVG will override this (inline raster images can be suppressed leaving the contents of the alt attribute which was its original purpose). Also, support for inline SVG is patchy, especially if you're bothering with IE8, and - depending on its use - has some other accessibility considerations ...