World Wide Access: Accessible Web Design
The World Wide Web has rapidly become the most popular Internet resource, combining hypertext and multimedia to provide a huge network of educational, governmental and commercial resources. Yet because of the multimedia nature of the medium, many Internet surfers cannot access some of these materials. Some visitors:
- cannot see graphics because of visual impairments
- cannot hear audio because of hearing impairments
- use slow connections and modems or older equipment which cannot download large files
- have difficulty navigating sites that are poorly organized with unclear directions because they have learning disabilities, speak English as a second language, or are younger than the average user
- use adaptive technology with their computer to access the Web
Following universal design principles ensures that all Internet users can get to the information at your Web site regardless of their disability or the limitations of their equipment and software. Use the following guidelines when developing and revising your Web pages to ensure that they are accessible to a diverse audience!
General Page Design
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 also organizing that information through hypertext links. As a result, designing a well organized site is essential to helping visitors navigate through your information.
- Maintain a simple, consistent page layout throughout your site.
A consistent design and look makes it easier for visitors to navigate through the hypertext and find the information you want to provide. For example, features 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 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. Many 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 with both black and white and color monitors.
- Use standard HTML.
Hypertext Markup Language (HTML) is the standardized code used to create Web sites. The code works with tags that tells a Web browser where to find and how to display your information. HTML was designed to be a universal format outside the bounds of proprietary software and computer languages. While non-standard tags exist, using standard HTML tags will ensure that your content can be accessed by all browsers used by visitors to your site. Avoid tags, such as
<IMG SRC="https://www.washington.edu/doit/./doitlogo.large.gif" ALIGN=MIDDLE ALT="[DO-IT LOGO]">
<HTML>
<TITLE>Our Library Page</TITLE>
<BODY>
<A HREF="https://www.washington.edu/doit/home.map"> <IMG SRC="https://www.washington.edu/doit/images/home.jpg"ismap</A>
</BODY>
</HTML>
When viewed through a graphical browser, such as Netscape, 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 as 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.
The accessibility of image maps is dependent on the server software used a Web site's server. Some server programs can pull the link information from the image map and present it in a menu format for text-based browsers. However, many server programs are not yet this sophisticated. Check with your system administrator to find out about the capabilities of your Web server software.
- Include descriptive captions for pictures and transcriptions of manuscript images.
What information do your pictures and images provide to the viewer? Always provide an ALT tag for an image. This is sufficient for logos and graphics that that are not critical to the information content of the page. But if the graphics provide information beyond this, adding captions and transcriptions is important for those who cannot see your page because they are using a text-based browser, including those 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 its impact.
If you present information in an image format, such as a scanned-in image of a page of a manuscript, be sure to also provide a transcription of the manuscript in a straight text format. This aids a wide variety of visitors including those with visual impairments, users who speak English as a second language, and those with learning disabilities who may have difficulty reading the original document.
- Caption video and transcribe other audio.
Multi-media and audio formats can present barriers to people with hearing and visual impairments as well as for people with less sophisticated computer systems. Provide captioning and transcriptions for materials in these mediums so that these visitors to your page have an alternative method of accessing this 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. For example, never use "click here" as a link, or next to a graphic used as a link.
- Other options for making graphical features accessible.
Some Web designers make images accessible by placing a hyperlink immediately before or after the image to another page with image descriptions. 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 unneccessary navigational complexity to the site.
Some organizations with graphic-intensive Web pages provide a separate text version of the site to ensure accessibility. This adds a great deal of maintenance time and complexity as two versions must be updated. It also segregates your visitors according to the type of equipment they use to access your page. As much as possible, edit your original version 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 tables can be interpreted, but at this point, 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. Evaluate whether frames are truly necessary at your site.
- Forms and databases
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.
- Applets and plug-ins
As the software is developed, applets (such as programs created with JAVA) and plug-ins (such as Adobe Acrobat) may provide accessibility features. However, many of these programs are currently not accessible to people utilizing text-based browsers. To ensure that people with vision and hearing impairments can access your information, provide the content from these programs in other, text-based formats.
Web Pages Test
Test your Web page with as many Web browsers as you can, and always test your Web page with at least one text-based browser. This way, you will see your Web resources from the many perspectives of your users. You may want to try out an accessibility validation site which performs a diagnostic on your pages and points out parts that could be inaccessible. Testing your site is especially important if you use HTML editor software to write your pages. Some HTML editor programs do not automatically include ALT attributes and other accessibility features. You may need to revise your code to include the accessibility guidelines covered in this brochure.
Resources
Bobby, created at CAST (Center for Applied Special Technology), is an HTML validator program designed to test accessibility in addition to highlighting non-standard and incorrect HTML.
www.bobby-approved.com
DO-IT (Disabilities, Opportunities, Internetworking and Technology) at the University of Washington includes a listing of Internet resources for accessible Web design, as well as other information.
https://www.washington.edu/doit/
EASI's (Equal Access to Software and Information) Web site provides both a good introduction to many issues related to serving patrons with disabilities including accessible Web design.
www.easi.cc
The National Center for Accessible Media (NCAM) promotes the use of a Web Access symbol and provides model examples of accessible pages.
ncam.wgbh.org
The Trace Research and Development Center provides resources for design of accessible Web pages including applet and plug-in features.
www.trace.wisc.edu
World Wide Access Videotape
An 11-minute video that introduces accessible Web design, "World Wide Access", may be ordered through DO-IT.
Additional Information