Summary

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

Contents

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:

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.

[Back to the contents]

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.

[Back to the contents]

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

[Back to the contents]

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

[Back to the contents]

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.

[Back to the contents]

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"?>

[Back to the contents]

Homework Assignment

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.

[Back to the contents]

Further Reading

[Back to the contents]

Category: Accessibility.

Comments

  1. [zoom-low-vision.php#comment1]

    A few years ago, we did a project for a state agency. One of the people in the target audience had vision problems and used a rather large monitor. We were pleased when she agreed to be in our initial test group. She mentioned a preference for light-colored text on a dark background so we created a special style sheet for her and made it available to everyone taking the training. The response was quite positive. Quite a lot of people were using the alternative style sheet and reported the text was easier to read using the high contrast.

    Posted by Pam on

  2. [zoom-low-vision.php#comment2]

    One of the options used in printing for VI readers is the reversed out method. It may also be worth thinking about text/background combinations other than Black/White say Blue/Yellow.

    Don't forget that VI users will require some basic rules for the text,

    • Left justifed
    • Avoid bold and italic
    • Don't CAPITALISE
    • Underline words to emphasise. but don't overdo it
    • Keep sentences short, one subject per sentence Double space after the full stop to break up the sentences
    • Some prefer a border around the text to show the page limits
    • Easy to read font, in this context one which can be read at a higher magnification
    • Some prefer a line spacing greater than normal

    This is not a prescriptive list but I hope a thought provoker

    Posted by Mike Abbott on

  3. [zoom-low-vision.php#comment3]

    > Avoid bold and italic

    Avoid crappy bold and italic, maybe.

    > Underline words to emphasise

    That's why God gave us italics.

    > Keep sentences short,
    > one subject per sentence

    We'll write as we wish, thank you very much.

    > Double space after the full
    > stop to break up the sentences

    No, we don't do that, and it's surpassingly difficult online because of the rules for whitespace collapse.

    > Some prefer a border around
    > the text to show the page limits

    Such maladaptive behaviour is obviated by the zoom layout in the first place.

    > Easy to read font,
    > in this context one which
    > can be read at a higher
    > magnification

    Higher magnification gives fonts more pixels and makes them more readable. Your advice is tautological. By the way, you were referring to Arial and Comic Sans, weren't you?

    Posted by Joe Clark on

  4. [zoom-low-vision.php#comment4]

    This is not a prescriptive list but I hope a thought provoker

    Thank you for the list, Mike. You mentioned printing, and some of the items on the list are more appropriate for paper than they are for documents published on the web.

    Underline words to emphasise

    Underlining text is the de-facto standard for indicating that the text is a link in a web document. HTML has specific elements to give emphasis; em, and strong for strong emphasis. Choosing semantically correct elements allows visitors with user-defined style sheets to style those elements however they prefer, whilst keeping the structure of the markup correct.

    Double space after the full stop to break up the sentences

    This is considered good practice for paper-based communication, but as Joe has already pointed out, impractical on the web as white space is ignored. This is arguably a presentation issue, but unfortunately, CSS doesn't have a pseudo selector to match each sentence. Developers could use a semantically neutral element so they could provide the presentation, such as a span around the full stop, but the extra work and markup bloat makes this approach impractical. The alternative is to treat it as a content issue rather than a presentation issue, and add non-breaking space entities at the end of each sentence. It's still extra work, and will result in unnecessary bloating; it would also have the undesired effect of not allowing a wrap around the end of sentences.

    Left-justified text, avoiding capitalisation for emphasis, and using appropriate line spacing is all good advice.

    Posted by Gez on

  5. [zoom-low-vision.php#comment5]

    I work with many people who have a range of disabilities that influence the way they access information normally provied in writing. I'm not sure where everyone else is, but here in Australia how to best meet these needs is a hotly discussed topic.

    What I find astounding is the number of so-called communciations experts who don't follow the most fundemental readability guidelines and the webmasters who have no idea of W3C conventions.

    A recent full-day workshop in Wangaratta (regional Victoria) presented a range of strategies for more effective, more accessible written communication. Basic Rule One was test the information with a sample of your audience - and if that means coming up with several versions of your final document (or web page or whatever) - then do it! Some of the other practical solutions have been mentioned in earlier discussion here.

    I have since had to design some posters and pamphlets nad have tried to use the suggested strategies - successfully, from feedback. I'm happy to pass on weblinks for info, if asked.

    Thanks for the opportunity to contribute!


    Posted by Joanne on

  6. [zoom-low-vision.php#comment6]

    Hi Guys

    In answer to Joe, yes, I was referring to fonts like Arial & Comic Sans, I should have also added sans serif.

    I know some of the points are not kosher, I did it off the top of my head and just got carried away.

    Nice to have Joe respond to me though, um, red letter day *smile*

    Posted by Mike Abbott on

  7. [zoom-low-vision.php#comment7]

    I snuck a peak at your High contrast style sheet and i saw this in the first font declaration:

    120.01%

    So I'll go ahead and embarass myself and ask you why you use such a tiny percentage over 120. And also: can user agents really make sense of such tiny size changes?

    Thank You

    Posted by ghola on

  8. [zoom-low-vision.php#comment8]

    Hi Ghola,

    Some versions of Opera have a rounding error at 100%, and some authors specify a base font-size of 100.01% to cater for it. I've no idea whether the rounding error applies to any other percentage value, so added the 0.01 as a safeguard - it's probably not required.

    Posted by Gez on

  9. [zoom-low-vision.php#comment9]

    Weird stuff... As an Opera user, you think I'd know about it.

    Thank you Gez.

    BTW the High contrast style is pretty neat. It's actually cool enough to use, although I go back to normal to have more text on my screen. Great job!

    I just read Joe Clark's article. Many questions are unanswered and I guess it's the goal of a live experience to fill in the blanks.

    What about images? Should they be stretched (if they are meaningfull)?
    Are all decorative images clutter for a low vision visitor?

    For example you chucked your logo: is it only because it wouldn't look good in the layout or because it's too small?

    Posted by ghola on

  10. [zoom-low-vision.php#comment10]

    Thank you for your kind words, Ghola.

    If I remember correctly, it was only Opera 6 that had a rounding problem with 100%, which may explain why you've never come across the problem before.

    Whether decorative images would be considered clutter to low vision visitors probably depends on the visitor. I can't think of a reason why someone with low vision wouldn't appreciate decorative images as much as a person with perfect vision, providing the images don't interfere with the content and were scaled appropriately so that they are visible.

    The colours I used for the high-contrast version are based on the colours used for the regular layout. This meant that the logo was no longer visible on the background. I have no design skills at all (a friend kindly designed the logo for me), and I didn't know how to invert the logo so that it was visible. I tried leaving the banner a light colour with the logo on, but it was very distracting, so I decided the easiest option would be to drop the logo. This is why we need people with better design skills than me to try this experiment.

    Posted by Gez on

  12. [zoom-low-vision.php#comment12]

    Hi Gez,

    Although I'm really not sure how many of my visitors use it, I have an alternate stylesheet interface I call DocSimple that works right along these same lines. By selecting this interface (from any page), the user can dismiss almost all graphics, navigation menus and the like, and increase the font size and paragraph widths. I think it works pretty well, though I never had any feedback from anyone. Wink!

    http://loadaveragezero.com/hnav/help.php#help:font-sizes

    Slightly off-topic, any word on when you're planning on bringing the Accessibility tutorial back (if at all)? It's giving me 404s, and I have you listed as 5 stars so... The old relative URL was:

    /tutorial/accessibility/

    I believe. Thanks,

    Doug

    Posted by Douglas Clifton on

  13. [zoom-low-vision.php#comment13]

    We've had several students asking about the accessibility tutorial as well *smile*

    Posted by Pam on

  14. [zoom-low-vision.php#comment14]

    Hi Doug,

    I think it works pretty well, though I never had any feedback from anyone. Wink!

    I hope you don't mind some constructive criticism *smile* At a glance, it's not obvious from any page how to change the style of the page. I used the Firefox menu to change the layout, and lost the navigation side-bar. I agree that it could be useful, but it doesn't hold together well at larger font-sizes, which is what people with low vision will be looking for.

    Slightly off-topic, any word on when you're planning on bringing the Accessibility tutorial back (if at all)? It's giving me 404s, and I have you listed as 5 stars.

    Thank you for the high rating; that's a great compliment coming from you *smile* I don't plan to bring back the tutorial section as it was, but will be moving over stuff from the tutorial section as articles. The main reason for this is so that I can include lessons we've learnt from 6 years of WCAG 1.0, and also allow comments to be added. More often than not, the comments have far more value that the actual argument, and I think it will ultimately make the resources more useful.

    Posted by Gez on

  15. [zoom-low-vision.php#comment15]

    I started working on a big and chunky layout just a couple days after Joe's speech at the @media conference.

    I did a short summary here: http://www.tdrake.net/?p=48

    I did it for this web site:
    http://www.alcalapetcare.com

    I haven't added a style switching widget yet, maybe this weekend. You can view it with the browser menu, look for the low vision style.

    It would be nice to set up a list of sites that have taken Joe's challenge.

    Ted

    Posted by Ted Drake on

  16. [zoom-low-vision.php#comment16]

    Completely informal testing over a period of years (asking all the dyslexics I know or encounter - several dozen by now) seems to indicate that many people with dyslexia prefer an increased space between sentences. Some also prefer it following all punctuation. A few even went so far as to suggest that there should be a slightly increased space following punctuation which is then doubled for the end of sentences

    I'm well aware of the difficulties involved in creating aforementioned spacing on a web page. I just wondered if any of the gurus out there know any stats or research on this? I've read such things for print, but found none relating to web

    I've started this discussion elsewhere, occasionally, but I never get a full answer. Or, perhaps, I just never get the one I want

    Meanwhile, my redesign plan already included a big-ass chunky layout a la Joe's ALA article before he threw down the gauntlet, so I'll get there eventually

    Posted by Lachlan Hardy on

  17. [zoom-low-vision.php#comment17]

    Hi Lachlan,

    I'm well aware of the difficulties involved in creating aforementioned spacing on a web page. I just wondered if any of the gurus out there know any stats or research on this? I've read such things for print, but found none relating to web

    Peter Rainger's article on Dyslexia is still probably one of the best: http://old.techdis.ac.uk/seven/papers/dyslexia.html

    Roger Hudson, Russ Weakley, and Peter Firminger wrote an article for Juicy Studio about developing websites for users with Cognitive disabilities and learning difficulties, which touches on dyslexia:
    http://juicystudio.com/article/cognitive-impairment.php

    Some of the comments mention techniques for people with dyslexia, and there's some further reading which may give you the answer's you're looking for.

    Best regards,

    Posted by Gez on

  18. [zoom-low-vision.php#comment18]

    Hi Ted,

    It would be nice to set up a list of sites that have taken Joe's challenge.

    That's a great idea. If you know of anyone collating the websites that have implemented zoom style sheets, let me know. The more people that do it, the more people can start to get more creative.

    Posted by Gez on

Comments are closed for this entry.