Joe Clark set everyone who attended this year's @Media conference an assignment to provide an alternative style sheet for people with low vision. This is my attempt.
Author: Gez Lemon
- Visitors with Visual Impairments
- Style Sheet Switching
- Persistent Style Sheets
- Preferred Style Sheets
- Alternate Style Sheets
- MIME Type Considerations
- Homework Assignment
- Further Reading
Visitors With Visual Impairments
In his Zoom the Web presentation at @Media, Joe Clark spoke about people with visual impairments who don't necessarily use assistive technologies such as screen readers. Joe pointed out that although people could increase the font-size so that they are able to read the content, doing so typically breaks the page, causing the right-hand side of the page to zoom off the edge of the display. With CSS, we can change the layout to a single column, so that the page holds together when the fonts are increased to a size suitable for someone with visual impairments who isn't totally blind. Joe suggests three steps for a zoom layout:
- Multicolumn to single column
- Small fonts to big fonts
- Simplify and Prioritise
In his article Big, Stark & Chunky, Joe also suggests that many visitors with visual impairments prefer a higher colour contrast. More research is required to find out how effective these techniques are, so Joe set everyone at the conference a homework assignment to put the theory into practice. Roger was the first (that I am aware of) with his Inverted zoom: designing for low vision, which has inspired me to get my homework done. I've added a link to the site navigation to toggle between high and low contrast. Unfortunately, I'm a hopeless designer, so it's not that pretty.
Style Sheet Switching
Browsers like Opera and Mozilla/Firefox offer a mechanism to switch style sheets. Unfortunately, Internet Explorer doesn't provide this mechanism, so a method is required for switching styles in Internet Explorer. Style sheets can either be persistent, preferred, or alternate.
Persistent Style Sheets
A persistent style sheet is always enabled. You can have several persistent style sheets, which is quite typical when developers split related rule-sets into different style sheets, such as form.css, article.css, etc. The relationship for a persistent style sheet is specified with a
rel attribute value of
stylesheet, and no
title attribute is provided. Any style sheet without a
title will be applied to the document for the particular media type if specified.
<link href="persistent.css" rel="stylesheet" type="text/css">
Preferred Style Sheets
A preferred style sheet is enabled by default, but may be switched by the user for an alternate style sheet. A preferred relationship is specified with a
rel attribute value of
stylesheet, and a
title attribute is also provided. You can group more than one preferred style sheet by specifying the same title for each. The preferred style sheets will be enabled and disabled together.
<link href="preferred.css" rel="stylesheet" title="Regular Layout" type="text/css">
Alternate Style Sheets
An alternate style sheet is one that may be selected by the visitor as an alternative to the preferred style sheet. An alternate relationship is specified with a
rel attribute value of
alternate stylesheet, and a
title attribute is also provided. Like preferred style sheets, alternate style sheets may be grouped by giving them the same title.
The following example uses a persistent, preferred, and alternate style sheet, allowing the visitor to select the style most appropriate for their needs.
<link href="persistent.css" rel="stylesheet" type="text/css"> <link href="preferred.css" rel="stylesheet" title="Regular Layout" type="text/css"> <link href="alternate.css" rel="alternate stylesheet" title="High Contrast" type="text/css">
As Internet Explorer 6 doesn't have an option to change style sheets, I've added the option to the basic navigation for the site. In a browser like Firefox, you can select your preferred style sheet(s) from the Page Style option of the View menu. Unfortunately, according to the specification, the preferred and alternate style sheets are always from the author's perspective. That means that when you navigate to a new page, the preferred style sheet will be the one selected by me. It's reasonable to assume that when someone selects a style sheet, they would like their selection to remain persistent. As the specification doesn't afford this, I've used a cookie to remember your choice.
MIME Type Considerations
If you're using XHTML following the XHTML Compatibility Guidelines, then adding a space followed by a forward slash to the end of the link element will be sufficient. If you're using XHTML and not following the XHTML Compatibility Guidelines and serving your content as
application/xhtml+xml, you will probably prefer to use the appropriate XML style sheet declarations.
<?xml-stylesheet href="persistent.css" type="text/css"?> <?xml-stylesheet href="preferred.css" type="text/css" title="Regular Layout"?> <?xml-stylesheet href="alternate.css" alternate="yes" type="text/css" title="High Contrast"?>
As Joe set this assignment for everyone at the conference, hopefully we'll see many more pages with zoom style sheets, and hopefully some very creative and attractive versions. If you didn't make it to the conference, try the assignment anyway. The more it's used, the more we'll learn what we have right, and what needs improving.