DO-IT resources

DO-IT programs

DO-IT search

DO-IT home page

World Wide Access: Accessible Web Design

PDF Version (415 KB)

by Dan Comden and Sheryl Burgstahler

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. 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. Because of the multimedia nature of the web combined with the poor design of some websites, many Internet surfers cannot access the full range of resources this revolutionary tool provides. Some visitors:

• Cannot see graphics.
• Cannot hear audio.
• Cannot operate a mouse.
• Use slow Internet connections and modems or equipment that cannot easily 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.

People use a variety of technologies to access the web. For example, a person who is blind may use a speech output system that reads aloud text presented on the screen. A person with a mobility impairment may be unable to use a mouse and may 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. This requires that they consider the needs of individuals with a wide range of disabilities, ages, and native languages.

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 (http://www.usdoj.gov/crt/foia/cltr204.txt) makes it clear that ADA accessibility requirements apply to Internet resources.

Accessibility Guidelines

The World Wide Web Consortium (W3C) develops and maintains the 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 Barriers Compliance Board (Access Board) developed accessibility requirements for webpages of federal agencies. The list of accessibility standards provides a good model even for organizations that are not covered entities under this legislation.

Many agencies and organizations have more than one person who develop web content. Building web content that is consistent, accessible, and usable can be a challenge for web development teams. To ensure organization-wide development of accessible webpages, consider adopting standards or guidelines. These may be as complex as constructing a set of guidelines from scratch, or as simple as referring to the W3C Web Content Accessibility Guidelines (WCAG) or Access Board standards. Disseminate information about the standards to all webpage developers in the organization and provide resources, training, and technical support on an ongoing basis.

Getting Started

The following suggestions will help you get started designing accessible webpages. They are based on the WAI guidelines and the Section 508 standards for web content that can be located by referring to the Resources section at the end of this publication.

General Page Design

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

• Maintain a simple, consistent page layout throughout your site.
  A consistent design and appearance 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 clear, consistent presentation will especially assist people with visual impairments or learning disabilities who have difficulty using disorganized navigation schemes.
• Keep backgrounds simple. Make sure there is enough contrast.
  People with low vision or colorblindness can have difficulty reading information on 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-bit color 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 websites. HTML was designed to be a universal format outside the bounds of proprietary software and computer operating systems. The code tells a web browser where to find and how to display information. 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.
• 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. MAGPie from the National Center for Accessible Media (NCAM) is a free tool that allows developers to add captioning to streaming content.
• Make link text descriptive so that it can be understood out of context.
  Visitors who are blind and 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 text that describes the link destination instead of "click here." 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 descriptive text for the link.
• Include a note about accessibility.
  Notify site visitors that you are concerned about accessibility by including a statement about accessibility and about how 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 and Audio Features

People who are blind cannot view the graphical features of your website. Many people with visual impairments use speech output programs with text-only browsers (such as IBM's Home Page Reader or Lynx) or graphical browsers with the feature that loads a page with the 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 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 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) since 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.

• Use a NULL value for unimportant graphics.
  Some graphical elements may add no content to a page or are used for positioning 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 and hear nothing.
• Include descriptive captions for pictures or other text options for making content in graphical features accessible. Providing ALT text for an image is sufficient for logos and graphics that contain little information content. However, if graphics provide more extensive information, adding captions is important for those who cannot see your page because they are using a text-based browser or have turned off the image display capability 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.

  Some web designers make an image accessible by placing a hyperlink "D" (for description) immediately before or after a complex image. This D-link connects to another page with a detailed description and a link back 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 webpages provide a separate text version of their site to ensure accessibility. This approach adds maintenance time and complexity because two versions of the 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.

  If you present information in an image format, such as a scanned-in image containing a page of a manuscript, be sure to also provide a transcription of the manuscript in a 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.

• Provide audio description and captions or 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 as an alternative to viewing the video will also give a visitor who cannot see access to the information in your video clip. Captions and transcripts also provide access to the content for those who cannot hear.

Special Features

• Use frames sparingly and consider alternatives.
  Some screen reader programs read from left to right, jumbling the meaning of information in frames. Some visitors who are blind can interpret frame-based 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. Evaluate whether frames are truly necessary at your site. When frames are used, 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 email address and other contact information for those who cannot use your forms or database. Make sure that the form elements are labeled according to the HTML specification.
• 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 that are within the Java Developer's Kit.

Accessibility Tests

Test your website with a variety of web browsers, and always test your pages with at least one text-based browser and with multi-media browsers with graphics and sound-loading features turned off. 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 computing platforms, monitor sizes, and screen resolutions. Make sure you can access all of the features of your website with the keyboard alone, simulating the experience of web users who cannot use a mouse. Make use of accessibility testing software such as A-Prompt, Bobby, and WAVE; they will point out elements that could be inaccessible. Then, revise your HTML to make your site accessible.

Resources

Americans with Disabilities Act of 1990
http://www.usdoj.gov/crt/ada/adahom1.htm

AccessWeb
http://www.washington.edu/doit/Resources/accessweb.html

EASI (Equal Access to Software and Information)
http://people.rit.edu/easi/index.htm

Electronic and Information Technology Accessibility Standards (Section 508)
http://www.access-board.gov/sec508/standards.htm

International Center for Disability Resources on the Internet
http://www.icdri.org/

National Center on Accessible Information Technology in Education (AccessIT)
http://www.washington.edu/accessit/

National Center for Accessible Media (NCAM) resources
http://ncam.wgbh.org/

Trace Research and Development Center
http://www.trace.wisc.edu/

Universal Design: Principles, Process, and Applications
http://www.washington.edu/doit/Brochures/Programs/ud.html

W3C's Web Accessibility Initiative (WAI)
http://www.w3.org/WAI/

Web Accessibility in Mind (WebAIM)
http://www.webaim.org/

World Wide Access Video

A short video, World Wide Access: Accessible Web Design, introduces accessible web design and may be purchased from DO-IT. You will receive an open-captioned as well as an open-captioned and audio-described version on a DVD. It can also be freely viewed online at http://www.washington.edu/doit/Video/www.html. Permission is granted to reproduce DO-IT videos for educational, non-commercial purposes as long as the source is acknowledged.

About DO-IT

DO-IT (Disabilities, Opportunities, Internetworking, and Technology) serves to increase the successful participation of individuals with disabilities in challenging academic programs such as those in science, engineering, mathematics, and technology. Primary funding for DO-IT is provided by the National Science Foundation, the State of Washington, and the U.S. Department of Education.

To order free publications or newsletters use the DO-IT Publications Order Form; to order videos and training materials use the Videos, Books and Comprehensive Training Materials Order Form.

For further information, to be placed on the DO-IT mailing list, or to request materials in an alternate format, contact:

Director: Sheryl Burgstahler, Ph.D.

DO-IT Funding and Partners

Much of the content of this publication appeared in the article World Wide Access: Focus on Libraries by Sheryl Burgstahler and Dan Comden in the Journal of Information Technology and Disabilities, 4(1-2), at http://staff.washington.edu/sherylb/fol.html; it has been modified and reproduced with permission. This publication was developed with funding from the National Science Foundation (award #9800324, HRD-0227995, and HRD-0833504) and the Dole Foundation (TFP-95-113). However, the contents do not necessarily represent the policy of the federal government, and you should not assume their endorsement.

Copyright © 2009, 2008, 2007, 2006, 2002, 2001, 1999, 1997, University of Washington. Permission is granted to copy these materials for educational, non-commercial purposes provided the source is acknowledged.

Technology

DO-IT Publications

DO-IT search

DO-IT home page

DO-IT Contact Information
Disabilities, Opportunities, Internetworking & Technology
doit@uw.edu
Modified: January 12, 2010