Web Pages

The World Wide Web has rapidly become the dominant Internet tool, combining hypertext and multimedia to provide a network of educational, governmental, and commercial resources. The Web has mushroomed in popularity because it is such a powerful and versatile medium. Much of its power comes from the fact that it presents information in a variety of formats while it also organizes that information through hypertext links.

Because of the multimedia nature of the Web, combined with the poor design of some Web sites, many Internet surfers cannot use the full range of resources this revolutionary tool provides. Problem areas include the following:

  • Individuals who have visual impairments may no be able to view graphics.
  • Individuals who have hearing impairments may not be able to hear audio output.
  • Visitors who have slow Internet connections or who use older computer equipment may not be able to download large files.
  • People who have learning disabilities, speak English as a second language, or are younger than the average user may have difficulty navigating sites that are poorly organized or have unclear directions.

Check Your Understanding

Some people use Adaptive Technology with their computer to access the Web. For example, how do you think a student who is blind might access a Web page? Choose a response.

  1. She could use a speech output system.
  2. She could have a sighted person read the screen to her.
  3. She could use a Braille output system.
  4. She could use a Braille Keyboard.

Check Your Understanding Responses

  1. She could use a speech output system.
    A person who is blind may use a speech output system that reads aloud text presented on the screen; this system may be composed of screen reading software and a voice synthesizer.
  2. She could have a sighted person read the screen to her.
    Yes, this is a possibility. However, it is preferable to find solutions that do not require assistance from a sighted person.
  3. She could use a Braille output system.
    Unfortunately, because universal design is not incorporated in the level of web pages, using the sighted person may be the only option.
  4. She could use a Braille keyboard.
    Although special key boards exist, most people who are blind use standard keyboards and become touch typists.

A person with a mobility impairment may not be able to use a mouse and rely on the keyboard for Web browsing. To create resources that can be used by the widest spectrum of potential visitors rather than an idealized "average," Web page designers should apply universal design principles. They should consider the special needs of individuals with disabilities, older persons, people for whom English is a second language, and those using outdated hardware and software.

Universal design techniques can be applied in the design of packaging, software, appliances, transportation systems and many other products and services. Examples of universal design in architecture are the inclusion of ramps and automatic door openers as well as Braille labels on elevator control buttons. Following universal design principles in creating web resources ensures that all Internet users can access information on a website regardless of their abilities, their disabilities, or the limitations of their equipment and software.

The Americans with Disabilities Act (ADA) of 1990 requires that U.S. programs and services be accessible to individuals with disabilities. A 1996 Department of Justice ruling makes it clear that ADA accessibility requirements apply to Internet resources.

The World Wide Web Consortium (W3C) develops the common protocols used on the Web to insure interoperability to promote universal access. The W3C's Web Accessibility Initiative (WAI) has proposed guidelines for all Web authors. As Tim Berners-Lee, Director of the W3C puts it:

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

In 2001, the U.S. Architectural and Transportation Board (Access Board) developed standards to which Web pages of Federal agencies must comply. The list of guidelines for accessibility provides a good model even for organizations who are not required to comply.

The following suggestions are based on the WAI guidelines and Section 508 standards for Web content. Following these guidelines when developing and revising Web pages will make them accessible to a diverse audience.

General Page Design

Designing a well-organized Web site helps visitors navigate through the information presented.

  • Maintain a simple, consistent page layout throughout your site. A consistent design and look makes it easier for visitors to locate the specific information they seek. For example, a feature presented on every page, such as a standard navigation menu or logo for the site, should always appear in the same place. A carefully planned organizational scheme will help everyone use your site. A clear, consistent presentation will especially assist people with visual impairments or learning disabilities who have difficulty following disorganized presentations.
  • Keep backgrounds simple. Make sure there is enough contrast. People with low vision or colorblindness, or those using black and white monitors, can have difficulty reading information at sites with busy backgrounds and dark colors. Some background images and colors obscure text and make reading difficult. Make sure that there is enough contrast between your text and the background of the page. Choose background, text and link colors carefully, and always test your site by viewing it at different resolutions and color depths. For example, you can change your monitor settings to a resolution of 640x480 and 16 colors for one test, and change to 1024x768 and 24 bit color for another.
  • Use standard HTML. Hypertext Markup Language (HTML) is the standard code used to create Web sites. HTML was designed to be a universal format outside the bounds of proprietary software and computer operating systems. The code works via tags that tell a Web browser where to find and how to display information. While nonstandard tags exist, using standard HTML as defined by the W3C will ensure that your content can be accessed by all browsers used by visitors to your site. Avoid tags, features and plug-ins that are available to only one brand or version of a browser.
  • Design large buttons. Small buttons marking links can be difficult targets for visitors with mobility impairments that result in restricted hand movements. Larger buttons can make it easier for all visitors to select the links on your page. Test how your buttons appear and operate with a variety of monitor sizes and at different screen resolutions.
  • Caption video and transcribe other audio. Multimedia formats that include audio can present barriers to people with hearing impairments as well as to people with less sophisticated computer systems. Provide captions and transcriptions for these resources so visitors who cannot hear have an alternative method for accessing the information.
  • Make links descriptive so that they are understood out of context. Visitors who use screen reading software can adjust their software to read only the links on a page. For this reason, links should provide enough information when read out of context. Use a more descriptive phrase than "click here" as a link or next to a graphic used as a link. For example:
    <a href="./about.htm">Click here</a> for information about our company.

    will present "Click here" as the link. However,

    <a href="./about.htm">Information about our company.</a>

    will display "Information about our company." as the link text.

  • Include a note about accessibility. Notify site visitors that you are concerned about accessibility by including a Web access symbol on your page. Include a statement about accessibility and encourage them to notify you with their accessibility concerns. For example, the DO-IT home page includes the following statement:

    The DO-IT pages form a living document and are regularly updated. We strive to make them universally accessible. You will notice that we minimize the use of graphics and photos, and provide descriptions of them when they are included. Video clips are open-captioned, providing access to users who can't hear the audio. Suggestions for increasing the accessibility of these pages are welcome.

Graphical Features

People who are blind cannot view the graphical features of your Web site. Many people with visual impairments use speech output programs with nonstandard browsers (such as pwWebSpeak or Lynx) or graphical browsers with the feature that loads images turned off. Include text alternatives to make the content in graphical features accessible. Described below are guidelines for providing alternative text for various types of visual features.

  • Include appropriate ALT/LONGDESC attributes for graphical elements on your page. ALT attributes work with HTML image tags to give alternative text descriptive information for graphical elements of a Web page. The alternative text helps visitors understand what is on the page if they are not viewing the graphic. This could be because they are blind and using a text-based browser or a graphical browser with the image loading feature turned off. The bold text in the following example shows what an ALT attribute looks like in HTML:
    <img src="./doitlogo.large.gif" alt="[DO-IT LOGO]">

    When a sighted visitor views the page with a graphical browser, he will see a picture of the DO-IT logo. When someone who is blind visits, his speech output program will read [DO-IT LOGO]. This gives him a clear idea of what is on the page. In addition, any visitor coming to the site using a text-based browser will understand that there is a DO-IT logo there instead of the more ambiguous "image," the default result when no ALT attribute is used. ALT attributes should be short (less than 5 words), as browsers sometimes have difficulty displaying lengthy ALT text.

    When using text to describe complex graphs or charts, or to transcribe sound files containing speech or lyrics, summarize the information next to the element, or consider using the LONGDESC attribute which provides for more detailed text than ALT. Lengthy descriptions can also be linked to an external document or immediately follow the graphic or sound element.

  • Include menu alternatives for image maps to ensure that the embedded links are accessible. In an image map (also called ISMAP), a part of a picture can be clicked to activate a link to another page. For example, on a map of the United States, a visitor might click on an image of the state of Oregon to find information about the state. If the Web page developer has not included an alternative menu, visitors using text-based browsers can be totally blocked from the site, or sent on a wild goose chase clicking unlabeled links. The following example does not include an alternative menu for the image map.
    <html>
    <title>Our Library Page</title>
    <body>
    <a href="home.map">
    <img src="images/home.jpg" ISMAP>
    </a>
    </body>
    </html>

    When viewed through a graphical browser, such as Netscape Navigator™ or Internet Explorer™, a beautiful picture of a floor map of a library appears. The visitor can choose selected areas of the library to view. But when a visitor using a text-based browser visits the site, this is what he sees:

    Our Library Page
    [ISMAP]

    At this point the visitor is stuck, since text-based browsers will not interpret the hypertext links embedded in the image map. His only option is to back out of the site. A visitor who uses a text-based browser, perhaps because he is blind, can't get to your information unless an alternative is provided. The accessibility of an image map depends on the software used as a Web site's server. Check with your system administrator to find out about the capabilities of your Web server software. Some server software will automatically render text links for image maps while other versions won't. Providing text alternatives to image-based links will ensure image maps are usable to the widest audience.

  • Include descriptive captions for pictures and transcriptions of manuscript images. Providing ALT text for an image is sufficient for logos and graphics that contain little information content. However, if the graphics provide more extensive information, adding captions and transcriptions is important for those who cannot see your page because they are using a text-based browser or they have turned off the graphics loading feature of their browser. This includes people who are blind. If you are not sure how critical a particular image is to the content of a page, temporarily remove it and consider the impact of its loss.

    If you present information in an image format, such as a scanned-in image manuscript page, be sure to also provide a transcription of the manuscript in a straight text format. This alternative is useful for many visitors, including those with visual impairments and those with learning disabilities who may have difficulty reading the original document.

  • Use a NULL value for unimportant graphics. Some graphical elements may add no content to a page and can be bypassed from viewing by using an ALT attribute with no text. By using just two quotation marks with no content, you can reduce the amount of distracting text when a page is viewed with graphics capabilities turned off or with a text-based browser. For example, the HTML for a divider bar could be:
    <img src="./purplebar.gif" alt="">

    Sighted visitors will see the divider bar, while those visiting via a text browser will see/hear nothing.

  • Provide audio description and transcripts transcripts of video. If your multimedia resources provided on your site include video, people who cannot see will be unable to use this information unless it is provided in an alternative format. A text transcription provided with the video will give a visitor who cannot see, or who doesn't have the appropriate viewing software, access to the information in your video clip.
  • Consider other options for making graphical features accessible. Some Web designers make an image accessible by placing a hyperlink "D" (for description) immediately before or after an image that links to another page with an image description. At the end of each description another hyperlink returns the user to the original page. This method should be used with caution as it can add unnecessary navigational complexity to the site.

    Some organizations with graphic-intensive Web pages provide a separate text version of their site to ensure accessibility. This adds a great deal of maintenance time and complexity as two versions of a site must be updated. It also segregates site visitors according to the type of equipment they use to access the Web. As much as possible, design a single version of your site so that it is accessible to all visitors.

Special Features

  • Use tables and frames sparingly and consider alternatives. Most screen reader programs read from left to right, jumbling the meaning of information in tables. Some blind visitors can interpret tabular information, but it is best to look for other ways to present the information to ensure that visitors with visual impairments can reach your data. In the same vein, frames often present logistical nightmares to text-based screen reading software and make it difficult for visitors to share URLs of pages that may be buried within a frame structure. Evaluate whether frames are truly necessary at your site. If no alternatives to frames are available, ensure that frames are labeled with the TITLE attribute, provide a text alternative with NOFRAMES, and use the TARGET = "_top" attribute to ensure useful Uniform Resource Location (URL) addressing is provided for each interior frame.
  • Provide alternatives for forms and databases. Some combinations of browsers and screen readers encounter errors with nonstandard or complex forms. Always test forms and databases with a text-based browser. Include an e-mail address and other contact information for those who cannot use your forms or database.
  • Provide alternatives for content in applets and plug-ins. As future versions of software develop, applets (such as programs created with JavaScript™) and plug-ins (such as Adobe Acrobat™) may provide accessibility features. However, many of these programs are currently not accessible to people using text-based browsers. To ensure that people with visual and hearing impairments can access your information, provide the content from these programs in alternative, text-based formats. When using JavaScript, make sure to employ the built-in accessibility features within the Java Developer's Kit.

Web Pages Test

Test your Web site with a variety of Web browsers, and always test your pages with at least one text-based browser. This way you will see your Web resources from the many perspectives of your users. Also view the resources at your site using a variety of computer platforms, monitor sizes, and screen resolutions. Make use of an accessibility validation site, such as Bobby, that performs usability diagnostics on your pages and points out elements that could be inaccessible. Testing your site is especially important if you use HTML authoring software to write your pages as many of these programs do not automatically include ALT attributes and other accessibility features. Revise your HTML to make your site accessible.

For more information about designing accessible Web pages, consult the publication World Wide Access: Accessible Web Design or view the video by the same title.