From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Did you know that most people who are legally blind can actually see? If you're like me, you imagine that blindness is something like putting black goggles on, but for a lot of blind people, it is actually more like looking through waxed paper. In fact, one of my best friends is legally blind and she's a technical writer and she doesn't use a screen reader to write. She just maginfies what she's reading enough so that she can read it. And you don't have to be legally blind to want text on the computer to be larger. As we get older our eyes get worse and worse, and making the text larger is easier for all of us to read.

Modern browsers allow users to zoom in on the text to make it easier to read, but with the columnar layouts, this can get problematic very quickly if the text is zoomed too much. Columns can get pushed off the screen or become illegible if they are fixed width and the text is too big for them.

How Do Web Designers Currently Solve This Problem?

• Text Only Pages
  One of the more popular ways to make sites more accessible is to create "text only" versions of the page. The idea being that if there is just text there, the page will be easier to print or magnify.
  
  The problem with text only pages is that they are a maintenance headache, and they imply that the reader is getting something other than the page they actually want to read. There is an underlying question of "if they deleted the images, what else did they delete?" So customers don't click on those links. Plus, if they are difficult to maintain, chances are, you won't maintain them, and so the customers really won't be getting what they want to get.
  
  
• Magnify Text Buttons
  The idea here is that the customer clicks on a magnify icon and the font size is increased.
  
  The problem is the same as when the customer uses the browser magnification. Text won't always fit in the screen and so on.

Some other issues with both design and Web designer solutions are:

• Screen real-estate
  Enlarging the text can force columns to scroll off-screen to the right or left and effectively disappear.
• Headers
  When text is magnified headers and bold can become confused and difficult to distinguish. But these tags act as markers in the text to make them easier to read. Leaving them in the document is very important.
• Color
  The most popular color scheme on the Web is black text on a white background, but this color scheme is very hard to read on a computer screen. I think my favorite description of this color scheme is "Black text on white is like looking at ants on a lightbulb." Color schemes like white on blue (think WordPerfect) or green on black (think old computer terminals) are a lot easier on the eyes.

Creating a Zoom Layout with CSS

The simplest way to create a zoom layout is to simply create a second style sheet (usually called something like zoom.css) that incorporates the following:

1. A Single Column
   We're so indoctrinated to use multiple columns on Web pages these days, but as I've mentioned above, this causes a lot of problems for people who browse with magnified text. If you put all your content into a single column, you resolve this problem.
2. Flexible or Liquid Width Layout
   Since we're assuming that the font is going to be increased, and our customers might increase it even more with their browsers, making the column flexible in width is best so that it remains readable even if the screen is maximized with 3x font sizes.
3. A Big Font
   This is a layout that is trying to be accessible to people who have lower vision, so make it big. And use proportional font sizes like ems or percentages, so that your customers can increase the size if huge to you is microscopic to them.
4. Invert the screen colors
   It's tempting to go straight to white on black, but that has so much contrast that it's still hard to read. Think colors like blue, green or white on black or dark brown.
5. Prune your navigation
   Since we've moved the site into one column, you need to make sure that the first 5 screenfulls of text are not your navigation. Keep it simple. Use classes to hide sub-navigation and keep just the basic one or two levels of navigation at the top and bottom of the page.
6. Don't change the content
   Don't get rid of images, don't remove or alter content. The point of the zoom layout is that it's the same content as the standard page, just made more legible for low-vision readers.

Making Your Zoom Layout Available

Many modern browsers such as Firefox and Opera offer the ability to switch between alternate style sheets that are attached to the document. So, as the Web designer, all you have to do is attach your style sheet to the document:

<link rel="alternate stylesheet" type="text/css" href="zoom.css" title="Zoom Layout" />

This style sheet will then appear in the View menu under "Page Style".

To assist browsers that don't yet have this capability, you can add a style switcher script onto your page. For example:

• JavaScript Style Switcher
• PHP Style Switcher