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: There is now a switch link on every page to make switching easier and quicker.
- Previous post: Nokia and Safari
- Next post: Why accessibility?
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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?
Well, looks not bad at all :)
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.
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:
I agree with Bruce, there is something refreshing about the single column with the big text. Thx for the tip btw!!
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.
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.
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.
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?)
Roger, we surely did. :)
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.
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.
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.
Nicely done, Roger. You've inspired me to get on with my homework.
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.
Roger,
Thanks for the fix :-)
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.
Lovely this is such a good idea, makes reading so much more easier on the eyes.
Sorry, comments are closed for this post.