Often when I am explaining accessibility requirements for Web pages, I find that people don't really understand the issues concerning High Contrast. This post attempts to explain high contrast mode and includes some pictures to demonstrate the potential problems.
What is high contrast mode?
Most operating systems provide a mechanism to heighten the contrast on the screen by changing the screen colors and also increasing the font size. All colors on the screen are generally reduced to just two colors which differ greatly in contrast level. The most common schemes are white on black or black on white but most operating systems allow the user to customize the colors. Changing the color scheme and increasing the font size makes it easier for users with vision problems to interpret the information on the screen.
Setting High Contrast Mode in Windows XP
From the control panel in Windows select Accessibility Options. In the Accessibility Options dialog, select the display pane. Check the high contrast checkbox to turn on high contrat mode, uncheck it to turn off high contrast mode. Select the settings button to modify the high contrast colors and settings. Press OK to close the Accessibility Options dialog and activate or disable high contrast mode. There is also a default key combination, shift-alt-printscreen to quickly turn high contrast mode on and off. This key combination can be enabled/disabled in the high contrast settings dialog.
Setting High Contrast Mode on the Mac OS X Tiger
From the System Preferences panel, select Universal Access. In the Display section select Black on White or White on Black. There is also a slider to modify the contrast settings or to Use grayscale.
High Contrast Mode on the Web
When you change to a high contast scheme at the operating system level all applications should respond to that new scheme, including browsers. When using Firefox 2.0 on Windows you will need to reload the current page for the high contrast settings to completely take effect. In earlier versions of Firefox you need to modify the display settings.
With high contrast mode turned on, all background colors are mapped to the high contrast background color and all foreground colors are mapped to the high contrast scheme foreground color. This includes all colors specified via CSS stylesheets, directly via the style attribute or inherited. In addition, all background images specified via CSS are turned off. Actual images incorporated into the Web page via img elements remain visible. All color and image information specified via CSS is turned off. Thus, reliance by Web pages on CSS color information and background images can render a page impossible to use in high contrast mode.
The following is a editor toolbar that has been created using a CSS background image. The mouse is hovering over the Bold button.
Hopefully that helps to demonstrate the problem. The CSS background image of the toolbar buttons is not rendered in high contrat mode so in this mode the user would probably not be aware that a toolbar even exists! This is just one example, many more exist. The plus and minus images to expand and collapse a tree view, the slider or progress bar image or color block to graphically present information and the color palette are a few examples.
How to solve the High Contast Issues?
The easiest solution is to not use CSS background images which convey information necessary to interact with the page. When a real img element is used, the image is still visible in high contrast mode. This can also cause problems for users which have vision issues that cause difficulty interpretting the image. But, if img elements are properly used, the user can turn off images in the browser and the alt attribute of the img element will provide a sufficient description.
One argument against using img elements is the performance hit of downloading many images. With a CSS background image one single image can be used and CSS can be used to position the proper section of the image within an element. This is also possible using img elements and has been implemented in the Dijit checkbox.
When color is used to distinguish the states of items such as active, selected, disabled, etc, different styles of borders can be used to provide the same information in high contrast mode. The border can be created in the same color as the element's background so it is not visible in normal, colors on mode. But, in high contrast mode the borders will be visible in the high contast scheme foreground color. This solution is being used for the dijit progress bar.
These are some of the techniques which are being used in the Dojo 1.0 Core Widget set to enable them for high contrast accessibility. In addition to high contrast mode, the Dojo 1.0 Core Widget set will also be fully accessible to keyboard and screen reader and other assistive technology users.
This is an Excellent Intro
Like most developers, I don't know enough about a11y. I found this article fascinating, not just from a dijit perspective, but in general.
Being the documentation geek, I'm thinking ... would general articles on the other three a11y principles mentioned in the dijit spec - keyboard, no image (screen reader), and ARIA - be a good idea too? I could see throwing the whole set into Dojo Dot Book 0.9. (http://dojotoolkit.org/node/589 is our current working draft outline). This would provide an excellent preface to the Dijit Catalog, where we describe a11y details specific to each widget.