Inverted zoom: designing for low vision

In his A List Apart article Big, Stark & Chunky and his second presentation at @media 2005, Zoom The Web, Joe Clark has been drawing our attention to the importance of a somewhat neglected aspect of web accessibility: providing an alternative design for low-vision users.

It’s been on my to-do list for a long time to make a “zoom layout” for this site, but I’ve finally managed to come up with something. I’ll admit that what finally made me get it done is the homework Joe gave the audience at @media. The task was to go home and add a high contrast, large type, single column layout option to our sites. So I did.

It isn’t pretty, and it isn’t supposed to be. If you’d like to try it out, go to my About page or my Accessibility statement, choose the “High-contrast layout”, as I’ve chosen to call it, and submit the form use the switch link, which is found at the top of the sidebar in the normal layout and in the page header of the high contrast layout. The style switcher sets a cookie, so it won’t work if you have disabled those. If you want the normal layout back you will need to go use the style switcher again.

As Joe suggested at @media, we need more people experimenting with this kind of alternative layout, and I wanted to do my part. Any comments or suggestions for further improvement?

Update: I am reworking the entire site and have removed the zoom layout for now. It may come back later.

Posted on June 13, 2005 in Accessibility, CSS

Comments

  1. Thats another thing I have been meaning to do, I had it on my previous design but not as refined as it should be. The burgundy you have is nice and soft though I wonder how well it views to the colour impared, I presume its black. P.S how do I do an “accented a” on an ibook?

  2. Well, looks not bad at all :)

  3. June 13, 2005 by Bruce Boughton

    The accessibility mode is perfectly usable and it’s actually quite refreshing not to have to actively ignore all the side-bars, navigation and cruft round the article (like RSS without the boring black on white!).

    Two things: 1) You should make it possible to switch modes with a link on each page (preferrably at the top of the page)

    2) The font size for this comment box is too small in accessibility mode (the other input boxes get it right)

    Upon previewing, a third thing: 3) When you preview your post, you get taken to /movabletype/cmnt.cgi and it’s back in normal mode.

  4. June 13, 2005 by Roger Johansson (Author comment)

    Conann: Depends on your keyboard layout and which accent you want. On a US keyboard, type “alt-`” followed by “a” for à, and “alt-e” followed by “a” for á.

    Rimantas: :-) (Hmm.. didn’t we meet at @media?)

    Bruce:

    1. I’ll try to come up with a suitable way of switching modes on each page.
    2. Oops. Better now?
    3. I went for a php solution, not JavaScript, since it feels more reliable and (obviously) works even if JavaScript is off. Unfortunately, the cgi pages can’t run php. Well, they can, but you need to do some pretty serious hacking around first. So that’s why they have the normal layout. For now.
  5. I agree with Bruce, there is something refreshing about the single column with the big text.
    Thx for the tip btw!!

  6. Wow, those font sizes are big! What I really admire is your pick of colours and typography, in such a restricted design.

    The single column sites (which are “in” these days) have an edge when it comes to accessibility. A body switcher and they are ready to go Big, Stark and Chunky.

  7. roger, this works really well. reminds me a little of the betsie parser but so much simpler to follow the content. a simple method for each page on can be created by using a simple php switcher, a cookie (as you are doing), the referrer and a redirect back to referrer.

  8. I am always suspicious of this type of technique since if the user requires such a markedly different layout then it’s more than likely they would have set there UA preferences to reflect - assuming they know how.

    Obviously the W3C have a standard technique for style sheet switching though it doesn’t seem to be used that often.

  9. Looks good, Roger.

    As for comments and suggestions, I can only comment on your current layout. The textarea’s text color isn’t set, and a background color is set on :focus — leading to, in my case, a light grey text on a white background. Your input fields ARE fully styled, however. It’s a bit confusing…

    (I whined about this before, haven’t I?)

  10. Roger, we surely did. :)

  11. June 14, 2005 by Roger Johansson (Author comment)

    Robert: It is reasonably likely that they would change colours and contrast, I agree. However, changing the layout would require a unique setting for each site, and I believe very few people know how to do that and are willing to go through the trouble to set it up.

    Using rel and title to specify alternate stylesheets should work, but is not widely supported. I’m also not sure if user agents remember which stylesheet the user has selected from one visit to the next. But yeah, that is another option worth taking a look at.

    Faruk: Argh. Sorry about that. Will fix ASAP.

    Rimantas: Good. I met so many people at @media my head is still spinning from all the impressions.

  12. Robert, you’re missing the point. The zoom layout is not centrally about really big reversed fonts. It is about reordering your page elements so that nothing zooms off the edge of the screen never to be found by the low-vision user. Your adaptive technology cannot set that up for you; only the page author can.

  13. I appreciate it more now that we are locking the user into the canvas and thus not giving them the option to escape.

    One was observing Roger’s working demo straight on rather than the concept of borders so I were just approaching it from a different perspective.

  14. Nicely done, Roger. You’ve inspired me to get on with my homework.

  15. Very nice article Roger. Since trying to wear my glasses less while surfing, I’m glad these hi-res styles are becoming more widespread. As soon as Joe Clark’s article appeared I put a Zoom option onto the site I am currently developing, replete with server-side style switch. See the link on my name, if you’re interested.

    But what happened to your grasshopper? While keeping away the “cruft”, as Bruce called it, you’ve deprived the poor-sighted of some visual fun which they surely should not miss.

  16. Roger,

    Thanks for the fix :-)

  17. It looks great, Roger, but I do think it’s essentially unnecessary given the user can disable the style sheets and then themselves have configured a viewing mode set to their preferences in their browser. It could be a good idea though to describe how that is done somewhere on the homepage.

    Why is it not a good idea with the zoom-version? Because also low-visioned users have different preferences. Some can’t read with dark backgrounds and some can and prefere it. And as stated in WCAG the homepage should be readable with style sheets turned off.

    But hey! None of my arguments should prevent you from making a zoom-version. Just as long as the page in itself useable without style sheets.

    And more hey! Love your site.

  18. Lovely this is such a good idea, makes reading so much more easier on the eyes.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.