Skip to main content
Faculty and Staff

Web Content Accessibility Guidelines

When designing a Web page, many developers try to make their pages viewable by various browsers. Very few, however, make their page accessible to people with disabilities. The W3C has recommended a set of guidelines to promote universal access to the blind, deaf and other users with special needs. This lengthy document explains all there is to know about Web page 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.

Alternate Text (Alt tag)

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.

Provide an alternative text list of the hyperlinks

Take a look at the URI GSO Web site. It consists of both an imagemap-based and text-based navigation system.

Provide a separate text-only page

If necessary, provide a text-only page which translates all of the links within the image into text links.

Descriptive but brief link text

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 versions of this page.

use the following:

<a href="name.html">Text-Only</a>

Always use a space and a vertical bar to separate consecutive links

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.

For example, instead of:

Homepage College Home

Use the following:

Homepage | College Home

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 (possible 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.

Ensure that textual information is displayed in a linear form 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.

Provide an alternative non-framed version of content when using frames

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-framed alternatives to avoid a host of other possible problems.

For example:

For a Web page (frameset) that consists of two frames (left frame and right frame), you should supply the noframes tags in the frameset document.

Sample 2 Column Design

<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>

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.

Provide an alternative text-only page with non-standard formats

Non-standard formats include formats such as Javascript, Java, and Applets. 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.

Test your pages on multiple browsers

  • View your page without images and make sure the information is still presented in a logical order.
  • Test your page without Java.
  • Always validate your HTML, CSS, and Section 508 Standards.
  • View your pages in a text based browser. This will allow you to see what the page looks like without images, tables, Java and color. Lynx is a free text based browser for Windows 9x and above. Mac OS users can use the WannaBe Web Browser.

For more information about Accessibility, please visit the following links:

Forms

ITS Web Account Application Form

Departmental Web Server Registration

Request a Link

Request to add/update a hyperlink to my page on the main URI Web site.

What if the Webmaster made a mistake!

WEB PUBLISHING BLOG

Subscribe to the URI Web Publishing Blog for latest news, tips, resources and tools related to web technologies.

Web Publishing Listserv

Subscribe to URIWEB-L Listserv to keep informed of ideas on web-related issues on campus.