When designing a web page many developers try to make their page viewable by various browsers. Very few however, make their page accessible to people with disabilities. The W3C has recommend a set of guidelines to promote universal access by blind, deaf and other users with special needs. This lengthy document explains all there is to know about webpage accessibility. The W3C also offers a checklist to see if your site is accessible. This checklist is fairly long and has much more information than the average web developer needs. Here are some minimum guidelines that should be followed in making ones web page accessible.
1. Provide an alternate text (ALT tag) description for ALL graphics on the Website.
The ALT-tag provides text description of a graphic which is not visible to the sighted user, but is invaluable in describing the image to a text-based user.
For example:
<img src="images/logo_100.gif" ALT="URI Logo">
- Use simple text for simple images
For example:
"*" for a bullet, numbers for a numbered image, and a single space character or an empty string for invisible images that are typically used for spacing.
Take a look at the URI home page at http://www.uri.edu. It provides the "text-only" link right on top of the home page.
2. Make your link text descriptive but brief. Link text should be able to stand alone as a printable document.
For example, instead of:
<A HREF="name.html">click here</A> for text-only version of this page
use the following:
<A HREF="name.html">Text-Only</A>
- Always use a space and a vertical bar to separate links which occur consecutively.
As text browsers read one line at a time, the problem of distinguishing between consecutive links on the one line arises. For such consecutive links on one line (usually found as text anchors), add a space and a vertical bar on either side of the links. This will also separate the links for visual users.
3. Define ALL background color schemes in the BODY tag. This includes:
* background image (if using a background image)
* background color (always define, even when using a background image)
* color of link
* color of activating link
* color of visited link
* text color
For example:
<BODY BACKGROUND="image.gif" BGCOLOR="#ffffff" LINK="#990099" VLINK="#009999" ALINK="#000099" TEXT="#000000">
Without a complete definition of all the colors in the color scheme, the final rendering of colors could be a mix of the pre-defined colors and the defaults from the reader's browser. This could result in a combination of colors that create a low (possibly unreadable) contrast.
- Ensure that both the specified background color and the specified background image contrast well against the foreground text.
This contrast will enhance the readability of the information to sight-impaired users, such as those with color-blindness. Try to test your page in black and white mode.
4. Whenever using tables, ensure that the textual information is displayed in a linear form across a whole line. Be extra careful when you nest tables within tables.
This is because when word wrapping occurs within columns of a table, this creates problems for browsers such as Lynx ( a text browser used by the sight-impaired) as it reads across the screen in a way that runs all of the text on a line together. If an entry in a cell occupies more than one line, the first line of each cell would be read, then the second etc.
- If word wrapping in a table cannot be avoided, the same information can be presented on an alternate text-only page without tables.
5. When using frames, always provide an alternative non-framed version of the content.
This can be achieved by incorporating the noframes tag , which is the default for browsers that cannot view frames. Even though current versions of Lynx are frames-capable, it is still prudent practice to offer non-frame alternatives to avoid a host of other possible problems.
For example:
For a webpage (frameset) that consists of two frames (left frame and right frame), you should supply the noframes tags in the frameset document.
<HTML>
<HEAD>
<TITLE>A Sample Frameset Document</TITLE>
<FRAMESET COLS="50%,50%">
<FRAME SRC="left.html" NAME=left>
<FRAME SRC="right.html" NAME=right>
<NOFRAMES>
<BODY>
Please type in any information that provides alternative text for users who use frame incapable browsers.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
8. Supply a transcript or a description of the sound for all audio sound files.
Many users of the web are hearing-impaired, or do not have sound capabilities on their computers. The inclusion of transcripts for audio clips broadens the access to this information. The use of descriptions such as "hear the speech or read the transcript" with "read the transcript" acting as the link to the transcript, is encouraged.
9. Provide an alternative text-only page with non-standard formats, such as Javascript, Java, Applet.
- Always provide HTML, or at least ASCII forms, of all documents presented in PDF, PS, WORD or other formats.
For example:
Use a <NOSCRIPT> tag to display the information alternately for each instance of JavaScript
Non-standard formats often cause problems for Braille translation, screen readers and some browsers. Users should be able to switch back and forth between text-only and enhanced versions of the page.
10. Test your pages on multiple browsers (Netscape Navigator, Microsoft Internet Explorer, and Lynx).
- View your page without images, and make sure it still makes sense. To view your page with out images changes your advanced preferences in Netscape to not automatically load images. Unfortunately it is not possible to turn off images in Internet Explorer.
- Test your page without Java. Again you may change this in your Netscape preferences.
- Rate your page with Bobby. At the Bobby web page you enter the address of your web page and Bobby checks the page and tell you what items do not meet the W3C standards.
- View your page in a text based browser. This will allow you to see what the page looks like without images as well as without tables, Java & colors. Lynx is a free text based browser. Download the Windows 9x version of Lynx here. MacOs users can use the WannaBe Web Browser.
- View your page in a browser that reads the text outloud. Make sure it is still understandable and usable. You may download an evaluation copy of WebSpeak here.
For more information about Accessibility please visit these links:
Return to Web Publishing Home
Return to URI Home |
