by Dan Comden and Sheryl Burgstahler
(Adapted from the publication World Wide Access: Accessible Web Design)
Case Study | FAQ | Resources
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 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 access the full range of resources this revolutionary tool provides. Some visitors:
- Cannot see graphics because of visual impairments.
- Cannot hear audio because of hearing impairments.
- 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.
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.
- She could use a speech output system.
- She could have a sighted person read the screen to her.
- She could use a Braille output system.
- She could use a Braille keyboard.
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 disabilities, older persons, people for whom English is a second language, and those using outdated hardware 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 (http://www.usdoj.gov/crt/foia/cltr204.txt) makes it clear that ADA accessibility requirements apply to Internet resources.
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 Web pages of federal agencies. The list of guidelines for accessibility provides a good model even for organizations that are not required to comply.
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 Web pages, consider adopting standards or guidelines that are useful and well explained. 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 or Access Board standards. Disseminate information about the standards to all Web page developers in the organization and provide resources, training, and technical support on an ongoing basis.
The following suggestions will help you get started designing accessible Web pages. They are based on the WAI guidelines and the Section 508 standards for Web content that can be located by referring to the resource section at the end of this publication.
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 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, 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.
- 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 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:
will present "Click here" as the link.
will display "Information about our company." displays descriptive text as the link.
- Include a note about accessibility.
Notify site visitors that you are concerned about accessibility by including a Web access symbol on your page (see Resources list). 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 and Audio 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 IBM's Home Page Reader 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:
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:
Sighted visitors will see the divider bar, while those visiting via a text browser will see/hear nothing.
- Include descriptive captions or other options for making graphical features accessible.
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 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 an complex image. This D-link connects to another page with a detailed description and a link back to the referring 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 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 of a page of a manuscript, 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.
- Provide audio description and captions or transcripts of video.
If your multimedia resources provided on your site include video, people who can not 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. Captions and transcripts also provide access to the content for those who cannot hear.
- Use frames sparingly and consider alternatives.
Some screen reader programs read from left to right, jumbling the meaning of information in frames. Some blind visitors 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 e-mail address and other contact information for those who cannot use your forms or database. Make sure that form elements are labeled according to the HTML specification.
- Provide alternatives for content in applets and plug-ins.
Test your Web site 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 Web site 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.
For those who manage websites, but do not create them themselves, consult
the publication Web Accessibility: Guidelines for Administrators.
Consult The Faculty Room Knowledge Base for questions & answers, case studies, and promising practices.
Reference: The content of this web page is from the DO-IT publication and video World Wide Access: Accessible Web Design.