Principia Hypertextica · A Mathematics Educator's View of Web Design

              -------------
intro  speed  accessibility  validity  navigability  typesetting  links
              -------------

Accessibility

The dramatic explosion of the World Wide Web is largely due to the fact that HTML, the hypertext markup language that describes the structure of web documents, is portable. This means that it can be rendered on a wide variety of computer platforms and under a wide variety of conditions. You can read web pages using hand-held computers, text-based library terminals, voice-reading devices for the vision impaired, home computers, and even on suitably equipped TVs.

The same material is presented differently to different users, but the essential structure of the material is preserved, because HTML is a markup language that suggests the structural aspects of a document rather than its layout or appearance. Authors who want to control the appearance of their web pages are bound to be frustrated, because HTML does not offer the level of control that typical word-processing or page layout software does.

The limitations of HTML can be considered assets. By creating web pages that conform to the HTML standard, and minimizing the use of non-standard elements, you can guarantee that the widest possible audience will be able to view the information on your pages.

• Avoid elements that are not standard HTML. This means that you should not use tags that are proprietary to browsers such as Netscape Navigator or Internet Explorer without good reason.
• Distribute material in the format that makes most sense. HTML is not the best medium for some kinds of information. In many cases, PDF files, PS files, VRML files, or other kinds of formats are better. Luckily, HTML is flexible enough that it allows you to make many kinds of files available for users to download, although users may not be able to see them directly embedded in your web page.
• Avoid material that requires "plug-ins" to be accessed. If you do use such material, provide links for users to download the required plug-ins.
• Don't tell visitors what browser to use. A web page that loudly proclaims that users should "DOWNLOAD [browser du jour] NOW!" because the page is "best viewed with" that browser is probably not compliant with standard HTML and is certainly not accessible to the widest potential audience. People use the browser they use for reasons known only to them and they are unlikely to change just to view your pages.

Although images provide striking elements that add interest to many web pages, not all users can see them, because some users are hearing a web page, others are viewing a web page using a text-based browser such as Lynx, and still others are surfing with image loading turned off for faster performance.

• Look at your pages using Lynx. This text-based browser is used by many library patrons, and it frequently is limited to a display of monospaced characters with no more than about 80 characters per line. I thought about this when creating the navigation bar for these pages: it fits on a Lynx screen without breaking. There are a number of online resources for seeing what your web pages look like in Lynx. Try Lynx-View or lynx-me. You can also telnet to publicly accessible Lynx sites to navigate through your pages in real time.
• Put alternative text with all images, so that blind users and others using text-based web browsers can navigate through your pages and understand the content. Make sure that alternative text conveys either the visual content (for an unlinked image) or the destination (for a linked image). Note that bullets or horizontal rules do not need words to describe them, but alternative text will prevent "[IMAGE]" from appearing on the page in their place.

  <img src="bullet.gif" width=9 height=9 alt="*">
  <img src="portrait.jpg" width=90 height=150 alt="picture of me (JPEG,200K)">
  <a href="home.html"><img src="house.gif" width=36 height=36 alt="go to home page"></a>

• Visit your web pages with image loading off. Many web surfers speed through the web this way. You may find that you need to add text-based navigation items that reiterate the choices of an image map.
• Don't use transparent or colored single-pixel GIF images without good reason. Some people use these devices as shims to force page layout. They result in unusable pages for visitors who are browsing with image loading turned off.
• Incorporate no-frames options if your site uses frames.

Special care needs to be taken whenever you employ color in text or images on your web pages. Your visitors may not be able to see the colors that you do, because of technical or physiological differences.

• Use the so-called "browser-safe" palette of 216 non-dithering colors in your images. The 6x6x6 color cube includes the colors that will not appear "speckled" (dithered) on many 8-bit machines. Not everyone browses with 24-bit machines that offer millions of colors. Using the 216 colors (whose "#RRGGBB" values use the hexadecimal pairs 00, 33, 66, 99, CC, and FF) assures that most users will see your flat-color images without unsightly speckles.
• Specify no attributes or all attributes for the <body> tag. If you specify the background or text color on a web page, you should specify the link text color, active link text color, and visited link text color as well. Otherwise, you run the risk of your text disappearing if users have set their background color preferences in a way that matches one of your text color choices. Note: Quotation marks are required around hexadecimal color names because the "#" symbol is not alphanumeric.

  <body bgcolor="#FFFFFF" text="#000000" link="#0000CC" alink="#FF0000" vlink="#CC0000">

• Don't use the <font color> feature to colorize specific words in your text, because the color you select may blend in with the user's preferred background color and this feature cannot be turned off in many browsers.
• Visit your site using black and white settings. Is it possible to distinguish between visited and unvisited links? Is important information normally conveyed by color absent from this view? Diane Wilson has prepared an informative page that discusses the needs of colorblind people.

Don't assume that what you see is what other users will see.

• Visit your site using a variety of computer platforms and web browsers. At the minimum, visit it using various settings on your own preferred browser. Change the colors, fonts, font size, window size, and so forth. Is your material still legible?
• Avoid specifying the widths of tables and table cells in absolute pixels. This prevents the table rows from shrinking or expanding to fit the user's window size. The result is that large tables can't be viewed on small windows without horizontal scrolling, and small tables seem orphaned in large windows. Fixed-width tables also presume that you know the font size people are using. Try increasing the font size and you'll see that fixed-width tables frequently become very difficult to read.
• Use cascading style sheets to make layout suggestions to the browsers that interpret them. These will be ignored by browsers that aren't capable of interpreting them. The Web Design Group has a discussion of the Cascading Style Sheet specification.

              -------------
intro  speed  accessibility  validity  navigability  typesetting  links
              -------------

http://world.std.com/~wij/web-design/accessibility.html
revised 26 June 1997
HTML 3.2 validated

William I. Johnston Home Page

wij@world.std.com