/ Q.A.: Access Code

If you want to reach the largest possible audience on the Web, which should you do?

  • A. design your pages conservatively, so visitors with older browsers can access them;
  • B. use cutting-edge design features;
  • C. it depends.

While your gut feeling was probably to choose A., in some cases B. is a better strategy — so the best answer is C. Accessibility, it turns out, is one of the true paradoxes of Web design.

What's the Problem?

HyperText Markup Language was originally created as a language for structuring documents. As long as the Web was the province of a handful of scientists, that was fine. But as others came to the Web — especially publishers — they looked for ways to make their online documents more visually appealing than traditional scientific papers.

Unfortunately, HTML didn't offer much help. So Web designers and browser manufacturers resorted to several tricks. Frustrated designers started playing with HTML structural tags such as the <TABLE> tag, morphing them from tools for the display of tabular information into means of organizing information and images into columns on a page. Others pressed the <FRAME> tag into service to create pseudo-columns. They also liberally sprinkled into their pages "invisible" images (one-pixel transparent images) to control spacing. Browser developers helped by introducing proprietary "extensions," such as the <FONT> tag that permits choices of typeface, color and size. The extensions, however, are proprietary, so they don't always work the same way on all browsers. Because of that and the limits of the extensions, some designers turned to creating pictures of text to get the exact font and spacing they wanted.

The good news is that most Web publications are much better looking today than they or their counterparts were a few years ago. But there's bad news, too. Some of that bad news was the topic of my December 1997 column, Caution: Speed Zone. Pages built using massive tables and large images don't exactly zip onto users' screens. Another piece of bad news is that Web search robots cannot understand text in images, so key words and phrases often are ignored, making pages hard to find.

That lack of accessibility only hints at another, potentially more serious, accessibility problem. As the Web's popularity has increased, so has the number of users who have visual or other disabilities.

For many of those users, Web pages tricked up with tables and giant images are often useless. For instance, consider a Web page that uses tables to create multiple columns. If a person using a screen reader — software that reads the words on the page aloud — accesses that page, the reader will scan straight across the page, stitching together the first line of text in each column and then returning to read the second line in each column, rather than reading the text in each box of the table in order.

Poorly coded images might offer the user only the information that there is indeed an image on the page, providing no idea of what the image is. I've seen publication home pages that offer nothing more than the word IMAGE a half dozen times on a text-only browser.

The Latest Tricks

The latest Web browsers from the dynamic duo Netscape and Microsoft offer a number of exciting new features. One of them, cascading style sheets (CSS), allows publishers to separate Web-page structure from Web-page design. That gives Web publishers more control of type and graphic elements, and allows them to change the look of pages quickly.

Think of CSS as a filter: Rather than sneaking design-oriented code throughout an HTML document, you clump it all together in the <HEAD> of the document, or in a separate document that can be invoked by content pages. All the content is filtered through the design definition. Yes, CSS does mean learning more coding, but it's pretty straightforward — and there's actually an online generator [formerly http://www.taylor.org/~patrick/css/mill/] that will write your code for you if you tell it what you want the page to look like.

If you haven't seen a page built with CSS, brace yourself. CSS lets you place text and graphics exactly where you want them, specify precise point size and leading, overlap type, and do a host of other things that are staples in paper publishing, but that HTML cannot handle. The World Wide Web Consortium CSS resource page offers plenty of information and links, as well as a fine example of what can be done with CSS.

Because CSS pages separate the structure from the design, they can be much friendlier to visitors accessing Web pages using text-only browsers, screen readers, TTY, Braille translators, or other nontraditional means. In addition, browsers will allow users the option of overriding style sheets with their own. For instance, a visually impaired user could create a style sheet with customized type sizes and colors. (Internet Explorer 4.0x already allows this. If you use that browser, you can see how it works by choosing View-Internet Options-General-Accessibility and choosing "Format documents using my style sheet.") This high level of accessibility has led the World Wide Web Consortium, in its Accessibility Guidelines, to encourage developers to use CSS. [1]

The Inevitable Downside Strikes Again

So it would seem that CSS is the answer to several problems, but here is the hurdle: Only the newest browsers handle CSS, and then not consistently. As of this writing, Netscape Communicator (Navigator 4.0x) and Microsoft Internet Explorer 3.0x and 4.0x are the only mainstream browsers that support CSS. Fortunately, more than a few Web users have suffered through the lengthy downloads to acquire those browsers; when I visited HotWired [formerly http://www.hotwired.com] on May 1, the site's stats showed 37 percent of visitors that day were using Communicator 4.0x, 24 percent were using Internet Explorer 4.0x, and another 11 percent were using Internet Explorer 3.0x. All told, nearly three-quarters of the visitors to the site that day had CSS-ready browsers.

"Even those countries that are closest to the U.S. in Internet use are about a year behind in adopting the latest browsers"

But there's a catch. Anyone who's been in this business more than a few weeks won't be surprised to learn that each of those browsers supports different feature sets. While the World Wide Consortium has set a CSS1 specification (and in fact is mulling over the CSS2 spec), it is implemented differently in Communicator and Internet Explorer 3.0x or 4.0x.

And it will likely be a while before all Web browsers are on the same page. A recent article by Web user interface guru Jakob Nielsen indicates that Web users are taking longer to upgrade browsers than they used to. By Nielsen's projection, it will take two years for all Internet users to upgrade to the latest browsers — during which time, unfortunately, two or three even newer browsers will appear.[2] In another article, Nielsen brings up another accessibility issue: Even those countries that are closest to the U.S. in Internet use (northern Europe and Australia/New Zealand) are about a year behind in adopting the latest browsers, and many countries are three or more years behind. [3]

Making Degrade

All that may make CSS seem like it's not really very accessible after all, but if you don't mind doing a little extra work, you can create CSS-based pages that also look good on browsers that don't support CSS. The trick is to put in just enough of the old-style "cheater" code. Take a look at the source for Microsoft's site, for an example: the front page is designed to be read by older browsers, using for instance the <FONT> tag to specify size, face, and color. But a few lines of CSS instructions at the top of the page allow more precise type control for browsers that support CSS. (You'll find useful tips on making CSS pages degrade well in a thorough tutorial [formerly http://www.hotwired.com/webmonkey/98/15/index0a.html?tw=stylesheets] by Steve Mulder of Webmonkey.)[4]

The Microsoft site also offers visitors the option of viewing a text-only version. Web producers can create such pages easily by stripping the HTML used for presentation of a page (e.g., <FONT>, <B>, <I>) and sticking with the structural HTML (e.g., <H1>, <STRONG>, <EM>).

It's also easy to automate delivery of different versions of a page. A few lines of code can detect what browser a visitor is using and deliver the appropriate page. This code from Macromedia's Dreamweaver site does the job well. The code goes on the CSS page; if the visitor's browser is an older version, the program delivers a non-CSS page:

<SCRIPT LANGUAGE="JavaScript"> if (navigator.appVersion.indexOf('4.0') != -1 { window.location = 'css_page.html'; } else{ window.location = "regular_page.html"; } </SCRIPT>

Multimedia ... and the 5.0 Browsers

Multimedia features present additional accessibility challenges, but multimedia can be incorporated as long as users have other options for obtaining the information. For instance, the World Wide Web Consortium suggests that if a page contains video clips, it should also include descriptions of all video information in both sound and text formats.[5] The Consortium also offers tips for making image maps, audio clips, applets, hyperlinks, frames, and forms accessible.

The next generation of cascading style sheets — CSS2, likely to be supported by the 5.0 browsers — promises even more features to ensure accessibility. For instance, designers will be able to declare a different look and feel for on-screen viewing than for speech generation, PDA use, WebTV ,or other types of access. In addition, new properties will provide more control of how pages are read aloud by speech-generating systems.[6]

Free Sample

I decided no sacrifice was too great in the name of better electronic publishing, so I took a Web page I had just created [formerly http://www.towson.edu/~lieb/debhome.html] using the standard Web design tricks and remade it using CSS [formerly http://www.towson.edu/~lieb/testhome.html]. If you use a browser that supports CSS, you'll see how I was able to precisely position type and a graphic on the page in what looks like columns, without using the tables or the eight GIFs that the original required.

CSS also let me specify exact point sizes and turn off the underlines on links, which improves the look of any page. If you use a non-CSS browser, you'll still see all the text and the graphic; it just won't look as nice. (CSS browser users can get a look at the non-CSS version by disabling style sheets — in Communicator, you'll find the option under Edit-Preferences-Advanced.) If you view source, don't be put off by all the Java script at the top of the page; it's just a cut-and-paste fix for a resizing problem in Communicator.

While my sample page won't win any design awards for its appearance on non-CSS browsers, it is accessible to anyone who comes across it. It's time for Web publishers to realize the importance of making sure their pages are just as accessible.

Thom Lieb is an associate professor of journalism and new media at Towson University in Baltimore. Among his courses is Writing for the Web. He is the author of Editing for Clear Communication and has written and edited for magazines, newspapers, newsletters and online publication. He holds a Ph.D. in Public Communication from the University of Maryland at College Park and a master's of science in Magazine Journalism from Syracuse University.


1. World Wide Web Consortium's Accessibility Guidelines (http://www.w3.org/TR/1998/WD-WAI-PAGEAUTH-0203).return to text

2. Jakob Nielsen, "The Increasing Conservatism of Web Users," (http://www.useit.com/alertbox/980322.html) 22 March 1998.return to text

3. Jakob Nielsen, "Global Web: Driving the International Network Economy," (http://www.useit.com/alertbox/980419.html) 19 April 1998.return to text

4. Steve Mulder, [formerly http://www.hotwired.com/webmonkey/98/15/index0a.html?tw=stylesheets]return to text

5. World Wide Web Consortium.return to text

6. Mulder.return to text

Links from this Article

Online CSS generator [formerly http://www.taylor.org/~patrick/css/mill/].

World Wide Web Consortium CSS resource page (http://www.w3.org/Style/CSS/).

W3C Accessibility Guidelines (http://www.w3.org/TR/1998/WD-WAI-PAGEAUTH-0203).

Microsoft home page (http://www.microsoft.com).

The author wishes to thank David Wizer of Towson University for editorial review.