search

govau / design-system-components

🛠 Component code and tests for the Australian Government design system
https://auds.service.gov.au
MIT License
739 stars 111 forks source link

Background CSS icons and IE's accessibility setting #403

Open HerinHentry opened 6 years ago

HerinHentry commented 6 years ago

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?

image

Thanks

HerinHentry commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

Are design system components IE11 compatible?

alex-page commented 5 years ago

Yes they work back to IE8

HerinHentry commented 5 years ago

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

alex-page commented 5 years ago

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 commented 5 years ago

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

electronicwoft commented 5 years ago

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 ...