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 DesignThe 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 <BLINK> and <FRAME>, that are not supported by all Web browsers.
- Design large buttons.
Small buttons marking links can be a difficult target 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.
- Include a note about accessibility.
Notify your users that you are concerned about accessibility by including a Web access symbol on your page (see Resources list). Encourage your users to notify you with their accessibility concerns. Include a statement about accessibility. 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 FeaturesPeople who are blind cannot view the graphical features of your Web site. Many people with visual impairments use voice output programs with text-based browsers (such as Lynx) or graphical browsers with the feature that loads images turned off. Include text alternatives to make the content in these graphical features accessible. Here are guidelines for providing alternative text for various types of visual features.
- Include short, descriptive ALT attributes for all graphical features on your page.
ALT attributes work with HTML image tags to give alternative text information for graphical features. The alternative text helps the visitor understand what is on the page if they are using a text browser or if they have image loading turned off in their graphical browser.
The bolded text in this example shows what an ALT attribute looks like in HTML:
<IMG SRC="./doitlogo.large.gif" ALIGN=MIDDLE ALT="[DO-IT LOGO]">
When a sighted visitor views the page with a graphical browser, he will see the DO-IT logo. When a user who is blind visits, his voice 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 logo there instead of the more ambiguous "image" that is the default result when no ALT attribute is used. ALT attributes should be short and simple (less than 5 words) as browsers sometimes have difficulty with long, run-on attributes.
- Include menu alternatives for image maps (also called ISMAPS) to ensure that the embedded links are accessible.
An image map is a picture on which parts of the picture can be clicked to find a link to another page. For example, on a map of the United States, a visitor might click on Washington State to find information about this state. But 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 unlabelled links that lead them in circles.
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, 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 manu-script 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 thepage. 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.
- 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 TestTest 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.
ResourcesBobby, 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.
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.
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.
The National Center for Accessible Media (NCAM) promotes the use of a Web Access symbol and provides model examples of accessible pages.
The Trace Research and Development Center provides resources for design of accessible Web pages including applet and plug-in features.