Example 10 - A Damaged Image, Background Images and High Contrast Mode

Summary

In some operating systems, e.g. one made by Microsoft, background images disappear in high contrast mode.

Explanation

Icons are useful means of providing information about webpage elements. Popular icons include filetype icons, content security indicators and more. A popular technique to include icons on webpages is to display them as background images. CSS is used to position the background image relative to the element(s) it belongs with.

But this approach is not without its problems. Screen readers treat CSS background images as decorative and ignore them. This can be remedied by use of title attributes, off-screen text and ARIA, depending on the context of the image. But none of these techniques work properly for people who view webpages using Windows' high contrast mode. When high contrast mode is turned on in Windows, background images disappear. When the background images are essential for understanding the webpage, these people are not able to operate the page properly.

In the example above, a user that views the page using high contrast mode on Windows is unable to see whether the checkbox is checked or not. An assistive technology application that understands ARIA knows the state of the checkbox from the aria-checked attribute.

Given that background images are getting more and more popular, and are supported by standards, should operating systems ensure that all users can see the images in all standard configurations and modes? Some of them already do. Or should designers and developers read the spec and understand the problem of using background images to convey something meaningful? Or is it the end users problem. If they cannot see images they should use assistive technology that takes advantage of workarounds such as ARIA?

Imagine...

You are a developer who has been asked to create a custom checkbox out of an image. You have done all the right things with JavaScript and ARIA and you use a background image to communicate the state of the checkbox. An elderly user who is using the webpage in high contrast mode on Windows calls you and complains that they have no idea whether the checkbox is checked or not checked.

So...

Whose Line Is It Anyway?