Big, Stark & Chunky

by Joe Clark

49 Reader Comments

Back to the Article
  1. Well maybe it’s interesting because it’s sort of related to this article: http://www.gic.nl/ In this website you can zoom everything, it’s quite handy for people with low vision. That’s it ;-) Bye,
    Caspar
    Copy & paste the code below to embed this comment.
  2. I have tried to create a fluid design for my website. I think with that I have covered the font size issue. This article have open my eyes regarding excessive use of navigation aid and complex multicolumn designs.
    Copy & paste the code below to embed this comment.
  3. We’re getting to the point where the blind and vision-impaired have it better than the seeing.  I think we need to concentrate more on DOM programming that enhances navigation, brilliant little Perl pouches, and creative new ways to trick the blind (possibly “next page” buttons that are secretly “buy it now”).  And yes, I realize where I’m going after I die.  Same place you are.
    Copy & paste the code below to embed this comment.
  4. When and why did the skip navigation link become infamous? I find it very useful when surfing with a handheld…
    Copy & paste the code below to embed this comment.
  5. Little correction at line 736 of the article, the correct link is: http://www.google.com/search?q=cache:87PBcn9orYoJ:research.microsoft.com/asia/dload_files/group/ims/9.pdf just a letter missing :p
    Bye,
    bogyit
    Copy & paste the code below to embed this comment.
  6. it’s funny. I always thought that low vision users would like the black on white. Since white on black would be optimal and is the case… what colors are we supposed to make links? Do we just make them the same but with underlines? Anyway, good article. I am currently using an “undesigned look” at DustinDiaz.com for the low grade ‘easier-to-read’ layout. But after reading this article, I think I might add an extra style sheet to change the contrast settings to white on black.
    Copy & paste the code below to embed this comment.
  7. Great article, Joe.  It got me moving.  One thing hit me right away when I started designing the high contrast portion of the style sheet: What’s the best way to differentiate link color (e.g. in a white-on-black configuration)? Did a cursory look-around for some research that hit on this, but didn’t see anything right away.  What would you recommend?
    Copy & paste the code below to embed this comment.
  8. funny thing about the second example…
    I couldn’t find the style switcher. The first one was easy (right at the top).... which brings me to ask the question, “Where are we supposed to put our style switcher links?” for someone who has supposive low vision, wouldn’t we want to make the “go to impared vision layout” link quite big with lots of contrast? I mean, I know none of us want to break our beautiful layouts that have a 10 pixel type-face with 18px line-height. I think part of this article assumes that you don’t need to risk any design changes to your current layout, but if your ‘go-to’ button isn’t easily accessible, you might as well not have a separate zoom layout. Don’t get me wrong, still an excellent article with plenty wisdom, especially on teaching the mechanics of developing the zoom layout itself and some extra knowledge about visually impared users that I never knew before. I just think that designers are eventually going to have to budge a little more than they wanted to.
    Copy & paste the code below to embed this comment.
  9. Thanks!
    Copy & paste the code below to embed this comment.
  10. 1. IE6 has a ‘zoom’ filter. It can enlarge the entire page elements, including fonts set in pixels (honest!), images and scrollbars! Sadly it is buggy and can’t be used out of the box. See my post on this here: http://www.designdetector.com/archives/04/07/IECanZoomPagesLikeOpera.php 2. Opera is surely the answer to anyone with low vision. Like anything else in life, you use the right tool for the job. It allows the entire page to be zoomed, stylesheets to be knocked off completely at the press of a button (handy even for people with good eyesight) and high contrast stylesheets to be added, again just via a button. These include black on white, white on black, an accessibility layout and more. It’s also very easy to add your own custom stylesheets. Plus Opera 8 has SSR (and MSR?) built-in. 3. Surely the best way to get a single column is to turn off styles? Then everything flows down the page. You can then enlarge the text as you see fit. 4. The example Zoom layout given by Cameron Adams is messed up in Opera - text overlays text. 5. “Don’t specify font, size, or color.” - this contradicts what is stated earlier: “Switch to a big font” and “Customize colors”. Unless ‘low vision layout’ is not the same as ‘zoom layout’. 6. Study the way existing systems like Betsie (the BBC’s low vision website parser) work. They tend to show the screen black with large yellow and cyan text set in Verdana. (Are sans serif fonts a better choice than serif ones? If so, we need to set the font, as many browsers use Times as the default font for unstyled text.) 7. Any options (such as styleswitchers or font change menus) would be best put in the top left corner. That way they can’t be zoomed out of view.
    Copy & paste the code below to embed this comment.
  11. As “zoom enabled” layouts seem to be less complex then their counterpart, it makes one wonder whether it would be a lot simpler to start out with a zoom enabled layout and add in additional detail, columns etc afterwards, instead of working the other way round. This streamlining process would benefit navigation and usability issues, creating an incremental development cycle? Any suggestions?
    Copy & paste the code below to embed this comment.
  12. This favelet could be a good start: http://jan.moesen.nu/code/browser/bookmarks/#rdf:#$cq9f42 It toggles the use of a minimal set of CSS rules to enhance page readability. It’s a favelet, so it’s easy to edit, and to add to your own site in a customized form.
    Copy & paste the code below to embed this comment.
  13. Using the available zoom functions on Opera and IE (yes it really can work) or creating CSS that zooms with font size as linked to by Caspar are all well and good for a small amount of zooming. But one of the point in the article is that this is no good for people who need quite a lot of zoom if you go above too much, wham all the content shoots off the right side of the browser. We all know that left-right scrolling is annoying but imagine having to to back and forth for each line. No I fear that these methods are not the answer here. Chris Hester also says that the best way to get a single column is to switch off CSS, again I fear this is a quick fix, this does not address the issue of contrast which is important here. Incidentally great article Joe!
    Copy & paste the code below to embed this comment.
  14. Since specifying column width in em’s will end up in horizontal scroll bar after setting big font sizes. So back to percentages or pixel width?
    Copy & paste the code below to embed this comment.
  15. http://www.alistapart.com/discuss/lowvision/2/#c9808 I would definitely think that starting out with a zoom layout would be easier than developing a full design, then having to tweak it. This way you can get most of your preferred styles out of the way without having to disipher which one’s they are by going back and forth between the alternates.
    Copy & paste the code below to embed this comment.
  16. Depending on the type of visual disability, forcing the user to reverse contrast can make the readability worse.  Low vision users with Albinism, for example, prefer the common white background with dark type.  As Joe said, there are many types of visual disabilities. The idea that all low vision users like a reverse contrast is a dis-service.  Excellent article on single column and simplified navigation.  I will try it out this weekend.  I have been meaning to put in a CSS stylesheet switcher for zoom text. This is good motivation.  Thanks!
    Copy & paste the code below to embed this comment.
  17. Sorry, my site’s URL didn’t get posted correctly. Probably user error! :-)
    Copy & paste the code below to embed this comment.
  18. Great article that clearly outlines many of the common misconceptions and design mistakes that disadvantage users with disabilities. I usually, however, tend to find myself in the ‘user preferences are for sissies’ camp - http://www.yourtotalsite.com/archives/usability/user_preferences_are_for_/Default.aspx. User agents for enlarging page content (from ZoomText to Opera to IE) tend to perform nearly all of the functionality described here whether through simple font enlarging or (selective or complete) style switching. The only exception is the removal of multi-column layouts, though even most of these COULD be designed to allow fairly significant scaling. Why place the onus of implementing style switching, creating multi-display designs, and determining specific ‘accessible’ styles (even experts can decide on these) on site developers when the end user can and should be able to customize these natively without the additional burden of discovering and using user preferences? In short, if your design is one that requires user preferences, then you’ve PROBABLY messed something up or are too chicken to make a solid design decision in the first place.
    Copy & paste the code below to embed this comment.
  19. “The idea that all low vision users like a reverse contrast is a dis-service.” Oh c’mon.  Next thing you know, you’ll be trying to tell us that all brown eyed men don’t love fried banana sandwiches.  ;) Usability is a very very complex issue.  No single article can cover all the angles, not even of such a narrow area as vision impaired users.  I think anything that gets people thinking about it at all is a step in the right direction. The way I look at it (and I’d love to see some research that could back me up [or prove me wrong]) is that, if I were vision impared beyond my present state (I keep my font sizes bumped up a couple of notches just to avoid headaches) and ran across a site in the vast and rather unfriendly ocean of the internet which took my needs into account, they’d earn themselves a loyal customer pretty damn quick.  And it doesn’t take that much work on our parts.  So why not do it?
    Copy & paste the code below to embed this comment.
  20. Was there some research or testing to determine that low vision people are better off with light text on a dark background? It seems counter-intuitive. I hate light on dark and if I take my glasses off I hate it more. I took over a site with light text on a dark background a few years ago and switching to dark on light light has gotten me more complments than any other change I made.
    Copy & paste the code below to embed this comment.
  21. Doesn’t this contradict the articles’ “don’t do anything to images”? Personally, I can’t understand why making the image zoom with the text is bad (other than it’s pixelated, but it will get that way whether the designer or the assistive technology does the zooming). Can someone please enlighten me on this?
    Copy & paste the code below to embed this comment.
  22. that way you can let the user use the text zooming (or page zooming) built into the browser
    Copy & paste the code below to embed this comment.
  23. Alot of screen magnifiers are expensive and it seems unfair to penalise people with low vision. So we developed a screen magnification software package called WorksView which is free for the end users.  It’s a browser plug-in and is currently being used by various councils and commercial organisations:
    www.havant.gov.uk
    www.macclesfield.gov.uk
    www.kingston.gov.uk
    www.casio.co.uk
    www.solicitors.co.uk We have also developed a zooming tool called WorksEye which is on the Casio website. If anyone’s got any feedback it would be much appreciated. thanks
    Huw
    Copy & paste the code below to embed this comment.
  24. Shame it only works in IE!
    Copy & paste the code below to embed this comment.
  25. Having both modest vision impairment and cognitive impairment, I deeply appreciate Joe’s article and encouraging responses. As far as “what do we do with the links?” my preference is: distinguish them semantically, let me choose their display. I turn off link underlines, because they reduce readability, and besides, underlining is a typewriter artifact that clashes with real fonts. I want all my links to be purple. That way I don’t have to decode each site, “ok, which color is text and which color is link?” My brain is wired so that color-to-function mapping is slow. I set these colors in my UA. Don’t over ride them for me or I just have to over ride your design, again.
    Copy & paste the code below to embed this comment.
  26. Shame *what* only works in IE? Chris Hester wrote:
    > Shame it only works in IE!
    Copy & paste the code below to embed this comment.
  27. —- I turn off link underlines, because they reduce readability, and besides, underlining is a typewriter artifact that clashes with real fonts.—-
    @ http://www.alistapart.com/discuss/lowvision/3/#c9835 This is the web now. Everyone knows that a link outside of context (like a nav menu or some other ordered structure) should have an underline underneath it.
    Copy & paste the code below to embed this comment.
  28. Is there a good source for statistics as far as low-vision web-surfers?
    Copy & paste the code below to embed this comment.
  29. Circus, the Microsoft/Forrester studies (http://www.microsoft.com/enable/research/default.aspx) may be of use, but it’s all a little convoluted.  They say (for US working-age adults): Approximately one in four (27%) have a visual difficulty or impairment. 16% (27.4 million) of working-age adults have a mild visual difficulty or impairment, and 11% (18.5 million) of working-age adults have a severe visual difficulty or impairment. That’s a fair amount, but be aware that “mild visual difficulty” will include people for whom glasses/contact lenses are their assistive technology.  Having said that, a high proportion of people who already wear glasses do still benefit from other technologies, such as the ability to enlarge/shrink text at will and particularly to reduce glare by changing white backgrounds to a pastel/grey colour (this also applies to many people with specific learning difficulties). I welcome Joe’s ideas and the continued education/discussion of more than just screen reader users, but we have to be careful not to make too many assumptions.  A fully featured and customizable stylesheet switcher (where you can set various options rather than just between the author’s favourite blue and green themes) is a great idea for loads of your visitors, and it’s entirely redundant and overcomplex given that users who are in the know are aware they can fire up their own user stylesheet and override styling anyway.  One of the big disadvantages of site-based stylesheet switchers is that it doesn’t follow you around once you leave; a user defined stylesheet does. 
    Web developers and designers determine the content and the presentation that information is *published* in, but it’s the user and their user agent that determine the environment the information is *received* in.  In an ideal world, where users were able to self-educate (or were interested in the technicalities of the web), and where everything was coded according to standards and the standards were more exciting than what they are, we wouldn’t need any skip navigation links (because page navigation is the job of the user agent, and site navigation sections would be a distinct and identifiable element), nor we would need any stylesheet switchers and so on.  We could just publish freely in the knowledge that the standards folks and the user-agent folks were happy and cheery and helpful and dreamy and knew what they were doing, rather than having to hack accessibility into everything. Until then, comrades.
    Copy & paste the code below to embed this comment.
  30. I’m experimenting a bit with stylesheets and trying to include the comments made in this discussion. As I gather from what is said:
    - Just add the minimal CSS to turn vertical list navigational elements to a horizontal list
    - Add some borders and/or alignment statements for data that is presented in a table
    - Leave as much possible to the settings of the browser.
    - Reset to a one column layout whenever feasible. I wonder though how much visually impaired people actually know how to set their own stylesheets. Changing standard link colours, background colours, foreground colours, fonts and typesizes are elements in the preferences panels of most browsers, but adding your own stylesheet might be a bit too technical. Are the standard browser interface settings enough to give the right user experience, or do we need some options to be configurable and written to a stylesheet?
    Copy & paste the code below to embed this comment.
  31. Ironically, the link in your comment isn’t underlined. If the link color (for links outside of context) is consistent throughout the site and sufficiently distinct from the normal text color then underlining is not necessary.
    Copy & paste the code below to embed this comment.
  32. “I turn off link underlines, because they reduce readability” That’s a slap in the face for accessibility people who advocate all links should be underlined! “Shame *what* only works in IE?” The WorksView software described in the comment above mine.
    Copy & paste the code below to embed this comment.
  33. TechDis used to have a create-your-own-stylesheet wizard which was fairly simply to use (http://www.techdis.ac.uk/seven/wizards/) but it seems to have fallen by the wayside.  The principle was sound though and could be reinvestigated.  Of course, it’s all about knowing where to find it, too…
    Copy & paste the code below to embed this comment.
  34. I am not visually impaired yet I found myself using a little favelet to zap pages with black or very dark background all the time. And then I turn up font sizes a few notches. Two buttons, ‘change colors’ and ‘change layout’ in the top left corner might be a good solution. One could cycle through a set of color schemes and layout options independently and save it in a cookie. Any non-default selection could force all links to be underlined.
    Copy & paste the code below to embed this comment.
  35. I’ve added a stylesheet to my website to give users maximum flexibility in their preferred visuals of the site. The site is located at http://www.noipo.org and the stylesheet can be selected through ‘preferences’. It’s quite simple, I’ve done nothing but styling the navigational items a bit and leave the rest up to the browser settings. Navigation is before content, but since the navigation area is flexible in size I haven’t figured out a way to put it below the content in the mark-up, but above the content using CSS.
    Copy & paste the code below to embed this comment.
  36. I described my personal user agent choices as it relates to my visual abilities and aesthetic preferences. “That’s a slap in the face for accessibility people who advocate all links should be underlined!” I = me. I >< people who advocate underlined links. As long as the links are semantically distinct, every user gets choice. Many browsers I’ve used don’t offer a “personal style sheet,” but every one I’ve used offers an “underline links?” toggle.
    Copy & paste the code below to embed this comment.
  37. I wrote an implementation hack for an automated method of recognizing zoom layouts using rev=“zoom”: http://axxlog.wordpress.net/archives/2005/01/14/zoom-hack/ It may or may not be of interest. I dunno.
    Copy & paste the code below to embed this comment.
  38. As a student, I am really appreciating everything that I learn from this site. It is great that we can provide so many accessibility options for people who would otherwise not be able to use the Internet.
    Copy & paste the code below to embed this comment.
  39. The Royal National Institute for the Blind (RNIB) recommends the use of Clear Print instead of large print. A one-page summary of the Clear Print recommendations can be found at http://www.shef.ac.uk/secu/clear_print_guidelines.pdf Their site, with lots more info, is at http://www.rnib.org.uk; check in the “Good Design” section (link at the top of the page).
    Copy & paste the code below to embed this comment.
  40. http://www.rnib.org.uk (the semi-colon in my previous post screwed up the link)
    Copy & paste the code below to embed this comment.
  41. Actually, no, the RNIB does not “recommend the use of clear print *instead of* large print.” The document (a PDF) says: “the RNIB advocate[s] clear print as an alternative to large print…. For many partially-sighted people, well-designed print information at 12 or 14 point is satisfactory.” Nobody’s replacing anything here. They then go on to queer the deal by essentially recommending you use New Century Schoolbook bold (or, I suppose, “Universe” bold, whatever that is). If that isn’t horrific enough for you, you can always follow their recommendation to use Arial bold without italics. By the way, what *are* “ornate” typefaces? I have a vague idea, but the last time I saw one of those was a tattoo on a guy’s back in blackletter. We are, in any event, discussing *Web sites* and not print. I would be rather surprised if the RNIB, known for its truculence and touchiness about Web accessibility (and for resolutely questionable advice for same), actually has verifiable research to back up the eyebrow-raising claims in this document.
    Copy & paste the code below to embed this comment.
  42. Tea Bore: > Two buttons, ‘change colors’ and ‘change layout’ in the top left corner might be a good solution. These functions should provide browser or OS on any page. Why implement “low-vision support” to every website? The only way is to improve browser and OS. Some applications do that even today (Opera, IE with Web Accessibility Toolbar etc.) so, why not the others?
    Copy & paste the code below to embed this comment.
  43. I agree to Chris Hester’s post [1], he just takes the words out of my mouth - several things need to be differentiated, be it existing features or alternative workarounds. Setting up a preferences page must of course be subject of further testing.
    [1] http://alistapart.com/discuss/lowvision/#c9807
    Copy & paste the code below to embed this comment.
  44. I’ve skimmmed through the comments quickly, but I didn’t see anything about my query. If we have a single column but fixed width layout, like many of the ‘current’ designs, to what extent do we need ‘zoom’ layouts?
    If someone has poor vision, I’m guessing they’d use a lower resolution to make everything bigger? In that instance the single column would be nearly full width, and the only thing in danger would be a horizontal navigation bar…
    Or have I missed something somewhere?
    Copy & paste the code below to embed this comment.
  45. If a user has standard assistive technologies installed, the feature in this article results in a “double zoom”. A violation of s508 since it constitutes interfering with an existing assistive technology.
    Copy & paste the code below to embed this comment.
  46. I’m glad to see discussion seems to be expanding to address the vast majority of people with visual impairments (VI). Most people with VI have some vision. In fact, only about 10% of the blind/VI population in the U.S. are totally blind. And yet most of the talk about acessibility seems to assume that users have no vision. I wonder how many web designers have really spent time watching how someone with a visual impairment, or any disability, works at a computer. My guess, not so many. A field trip to an agenty in your community that work with people with blindness and VI’s might be worth doing. Go see how someone really uses the computer, and what kind of technology is really being used. It’s great to read about studies and best practices, but nothing replaces experience. And just like any usability study, people don’t always do what you might expect, they do what is effective for them. By the way, I once did some training, in another field, using some devices that simulated some of the more typical types of VI. It was pretty revealing. If you are really intereted in this, mobility trainers (professionals who teach people with vision loss how to move about in the world) have these devices, and you can simulate this yoruself. Jeff
    Copy & paste the code below to embed this comment.
  47. For me, I love CSS and XHTML layouts - but I don’t really see what the point of creating an inverted CSS style, as most users that I know who are visually impaired will either have this turned on my default on their PC or Mac, or they’ll hate it!! And using an inverted stylesheet in this mode means they have to turn off their own settings!!
    Copy & paste the code below to embed this comment.
  48. Paul Ely, someone using a screen magnifier would have to *opt into* a zoom layout, just as someone not using a screen magnifier would. And it is not at all clear that a zoom layout that never exceeded the sides of the screen would be harmful to a user of assistive technology. So the zoom layout makes everything 15% bigger and the device makes it a further 50% bigger. I mean, you can’t just dial back your device to a lower magnification? So no, in fact, using a zoom layout causes no affront whatsoever to 508.
    Copy & paste the code below to embed this comment.
  49. This article recommends doing nothing to images in this zoom process. I am currently struggling with a way to make images of maps as clear as I can for anyone with less than excellent vision. Maps are very detailed, and while I _am_ providing text information alongside the map, many individuals are very visual learners, and a blurry map with a text description isn’t going to do them a whole lot of good. Why _not_ provide an option to a larger and clear image? Dagmar
    Copy & paste the code below to embed this comment.