Overriding Internet Explorer's Formatting Using Style Sheets
By Veli-Pekka Tätilä
Alasdair - broken links and unavailable files have been removed from this page and are lost forever.
Internet Explorer allowes the visually impaired users to override its page formatting, so you can use one style on all Web sites. While this is great news for accessibility, the feature has been seriously criplled in IE6 and Windows XP. If you use the provided user interface to specify the overrides, they don't affect Web-sites using their own style sheets, leading to inconsistancies, half-hearted formatting and grumpy users. Now there's an alternative reformatting solution that actually works, based on a user-specified style sheet (CSS file). Another advantage is that extensive control over formatting is possible. This page currently provides an accessible style sheet for magnification users, instructions for setting things up as well as the design rationale. The style Sheet appears to work fine within IE7, too. in the future, I'm thinking of adding a reverse color scheme for users that prefer a light on dark look. FireFox has no issues with using custom color overrides so that's why this page is currently IE specific.
Credits
The style sheet was developed jointly by me and the Web master of www.oneformat.com, a site specializing in accessible CSS files. He was instrumental in the CSS design work which is an area I know little about. I myself, in turn, helped in specifying the style and testing the files using magnification.
Download and Installation
The link below let's you download the CSS style sheet files.
There are several versions of the file in the zip archive. The
flexible version scales as a function of the text size option
within IE but may not provide large enough text for some visually
impaired users. In case you need sheets with particular sizes, the
package includes several fixed font sizes: 12, 14, 16, 18, 20, 22,
24, 26 and 28 points. Right click the following link and choose
save as opposed to opening the page. To install the style file,
copy it to a safe place such as the Internet Explorer folder. Then
in IE pick options in the tools menu. hit the accessibility button
on the general tab and make sure only the check box Format
Documents Using my Style Sheet is selected. Finally, browse for
the style sheet file you downloaded and hit ok to apply changes in
both dialogs. The style sheet should be in use now. And here's the
link:
Download the Light on Dark
Style Sheet
Editing
If you are familiar with CSS files, you can edit the file using any text editor. Even if you are new to CSS, many of the formatting constructs are rather intuitive. Notice that colors are given in hexadecimal. You can use the Windows calculator in scientific mode to convert between hex and decimal numbers. Oh yes, and don't forget to back up the original CSS file, just in case.
The easiest way to edit files is to do global replacements.
Suppose, for example, that you would like to change the background
color from black to dark blue using Notepad. After having opened
the file you'll soon come across a line reading:
body {background: none #000000 !important}
The hash sign and the number 000000 is the red, green and blue
value (RGB) for the color black in hexadecimal. A nice dark blue is
RGB: 0, 0, 80 where the last blue component is of strength 80 (the
maximum is 255). You can use Windows calculator to convert the blue
value to hexadecimal which gives you 50. So using the find and
replace dialog like this:
find: #000000
replace: #000050
Should be all you need.
Design Rationale
I'm a legally blind computer user who mostly relies on speech but do use magnification occasionally. I can read magnified if the speech cannot be used for some reason. But more important for me is to get the big picture on a Web site, preferrably unmagnified, which gives me a sense of the screen layout. SO to facilitate this I'm all for strong contrasts and crude highlights. Even so, I do realize this is just my sight situation and have tried to avoid the trap of designing optimally for my sight alone. If you make significant adaptations to the original style sheet, to better suit your sight, I would appreciate getting a copy just to be able to offer the file here for others to download. the currently offered style sheet is just a preliminary version.
I deliberately chose a light on dark design because most sight impaired folks I know find light on dark considerably easier. Further more, I've noticed myself that spotting color differences against dark colors is much easier for me as opposed to doing it on a light background. as far as fonts go, clear and mostly bold fonts tend to be easier to read personally, so Arial is a safe and sound choice I hope.
Another principle I've applied is that large changes in color, brightness or some other atribute are a good way to highlight even small elements. One of the most prominent way is changing the elements background and foreground colors to differ substantially from the page background. This color change, a light background and dark text, has been extended to cover many of the core elements that have very little text in them. Forms are one prominant example.
While good contrasts are preferrable one should avoid extremes. Thus I've never used total black and total white against each other in this scheme. Even so the contrast is fairly stark and while it let's me spot a number of page elements unmagnified, it might be too heavy for some users. That's why the tip for changing the page background is there, to soften the contrast.
It is important for the user to know where the focus is and be aware of other status indicators. So that's why the heavy change in color is used to mark links, too, This occurs both when you tab around the page to set the keybord focus to them, as well as on hovering over a link using the mouse. This let's me pick out the selected link with ease where as I normally need heavy magnification to achieve the precision sufficient for exact clicking. Although it is an IE specific tweak, the scroll bar colors are heavy light on dark, too, of which I'm particularly proud. I mean the normal contrast in Windows scroll bars is rather minimal and this new design let's me, for the first time, use the scrollbar as a position indicator without resorting to magnification. I do hope you'll also find this design enjoyable.