Making web pages accessible to and usable by visitors with disabilities
by Dan Comden and Sheryl Burgstahler
The World Wide Web has rapidly become the Accessibility Guidelines dominant Internet tool, combining hypertext and The World Wide Web Consortium (W3C) develops multimedia to provide a network of educational, and maintains the protocols used on the web governmental, and commercial resources. Much to insure interoperability to promote universal of its power comes from the fact that it presents access. The W3C’s Web Accessibility Initiative information in a variety of formats, while also (WAI) has proposed guidelines for all web organizing that information through hypertext authors. As Tim Berners-Lee, Director of the W3C links. Because of the multimedia nature of the puts it: web and the poor design of some websites, many Internet users cannot access the full range of “The power of the web is in its universality. resources this revolutionary tool provides. Some Access by everyone regardless of disability is an visitors: essential aspect.”
• Cannot see graphics. In 2001, the U.S. Architectural and Transportation
• Cannot hear audio. Barriers Compliance Board (Access Board) • Cannot operate a mouse. developed accessibility requirements for web • Use slow Internet connections and modems or pages of federal agencies. The list of accessibility equipment that cannot easily download large standards provides a good model even for files. organizations that are not covered entities under • Have difficulty navigating sites that are poorly this legislation. organized with unclear directions because they have learning disabilities, speak English Many agencies and organizations have more than as a second language, or are younger than the one person who develops web content. Building average user. web content that is consistent, accessible, and usable can be a challenge for web development People use a variety of technologies to access the teams. To ensure organization-wide development web. For example, a person who is blind may of accessible web pages, consider adopting use a speech output system that reads aloud text standards or guidelines. These may be as complex presented on the screen. A person with a mobility as constructing a set of guidelines from scratch, impairment may be unable to use a mouse and or as simple as referring to the W3C Web Content may rely on the keyboard for web browsing. To Accessibility Guidelines (WCAG) or Access create resources that can be used by the widest Board standards. Disseminate information about spectrum of potential visitors rather than an the standards to all web page developers in the idealized “average,” web page designers should organization and provide resources, training, and apply universal design principles. This requires technical support on an ongoing basis. that they consider the needs of individuals with a wide range of disabilities, ages, and native languages. Getting Started The following suggestions will help you get The Americans with Disabilities Act (ADA) of started designing accessible web pages. They are 1990 and 2008 amendments require that U.S. based on the WAI guidelines and the Section 508 programs and services be accessible to individuals standards for web content that can be located by with disabilities. The ADA accessibility referring to the Resources section at the end of this requirements apply to Internet resources. publication. General Page Design • Caption video and transcribe other audio. Designing a well-organized website helps visitors Multimedia formats that include audio can navigate through the information presented. present barriers to people with hearing impairments as well as to people with less • Maintain a simple, consistent page layout sophisticated computer systems. Provide throughout your site. captions and transcriptions for these A consistent design and appearance makes resources so visitors who cannot hear have it easier for visitors to locate the specific an alternative method for accessing the information they seek. For example, a feature information. MAGPie from the National presented on every page, such as a standard Center for Accessible Media (NCAM) is a free navigation menu or logo for the site should tool that allows developers to add captioning always appear in the same place. A clear, to streaming content. consistent presentation will especially assist people with visual impairments or learning • Make link text descriptive so that it can be disabilities who have difficulty using understood out of context. disorganized navigation schemes. Visitors who are blind and use screen reading software can adjust their software to read • Keep backgrounds simple. Make sure there only the links on a page. For this reason, links is enough contrast. should provide enough information when People with low vision or colorblindness read out of context. Use text that describes the can have difficulty reading information on link destination instead of “click here.” For sites with busy backgrounds and dark colors. example: <A HREF=”about.htm”>Click Some background images and colors obscure here</A> for information about text and make reading difficult. Make sure our company will present “Click here” that there is enough contrast between your as the link. However, <A HREF=”about. text and the background of the page. Choose htm”>Information about our background, text, and link colors carefully, and company. </A> will display “Information always test your site by viewing it at different about our company.” as the descriptive text for resolutions and color depths. For example, the link. you can change your monitor settings to a resolution of 640x480 and 16-bit color for one • Include a note about accessibility. test, and change to 1024x768 and 24-bit color Notify site visitors that you are concerned for another. about accessibility by including a statement about accessibility and about how to notify • Use standard HTML. you with their accessibility concerns. For Hypertext Markup Language (HTML) is the example, the DO-IT home page includes the standard code used to create websites. HTML following statement: “The DO-IT pages form was designed to be a universal format outside a living document and are regularly updated. the bounds of proprietary software and We strive to make them universally accessible. computer operating systems. The code tells a You will notice that we minimize the use of web browser where to find and how to display graphics and photos, and provide descriptions information. Using standard HTML as defined of them when they are included. Video clips by the W3C will ensure that your content can are open-captioned, providing access to users be accessed by all browsers used by visitors who can’t hear the audio. Suggestions for to your site. Avoid tags, features, and plug-ins increasing the accessibility of these pages are that are available to only one brand or version welcome.” of a browser.
2 Graphical and Audio Features Lengthy descriptions can also be linked to an People who are blind cannot view the graphical external document or immediately follow the features of your website. Many people with visual graphic or sound element. impairments use speech output programs with text-only browsers (such as IBM’s Home Page • Use a NULL value for unimportant graphics. Reader or Lynx) or graphical browsers with the Some graphical elements may add no content feature that loads a page with the images turned to a page or are used for positioning and off. Include text alternatives to make the content can be bypassed from viewing by using an in graphical features accessible. Described below ALT attribute with no text. By using just two are guidelines for providing alternative text for quotation marks with no content, you can various types of visual features. reduce the amount of distracting text when a page is viewed with graphics capabilities • Include appropriate ALT/LONGDESC turned off or with a text-based browser. For attributes for graphical elements on your example, the HTML for a divider bar could be: page. <IMG SRC=”purplebar.gif” ALT=””> ALT attributes work with HTML image tags Sighted visitors will see the divider bar, while to give alternative text descriptive information those visiting via a text browser will see and for graphical elements of a web page. The hear nothing. alternative text helps visitors understand what is on the page if they are not viewing the • Include descriptive captions for pictures graphic. This could be because they are blind or other text options for making content in and using a text-based browser or a graphical graphical features accessible. browser with the image loading feature turned Providing ALT text for an image is sufficient off. The following example shows what an for logos and graphics that contain little ALT attribute looks like in HTML: information content. However, if graphics <IMG SRC=”doitlogo.large.gif” provide more extensive information, adding ALT=”DO-IT LOGO”> captions is important for those who cannot see your page because they are using a text-based When a sighted visitor views the page with browser or have turned off the image display a graphical browser, he will see a picture of capability of their browser. This includes the DO-IT logo. When someone who is blind people who are blind. If you are not sure how visits, his voice output program will read, critical a particular image is to the content of a “DO-IT LOGO.” This gives him a clear idea of page, temporarily remove it and consider the what is on the page. In addition, any visitor impact of its loss. coming to the site using a text-based browser will understand that there is a DO-IT logo Some web designers make an image accessible there instead of the more ambiguous “image,” by placing a hyperlink “D” (for description) the default result when no ALT attribute is immediately before or after a complex image. used. ALT attributes should be short (less This D-link connects to another page with a than 5 words) since browsers sometimes have detailed description and a link back to the difficulty displaying lengthy ALT text. original page. This method should be used with caution, as it can add unnecessary When using text to describe complex navigational complexity to the site. graphs or charts, or to transcribe sound files containing speech or lyrics, summarize the Some organizations with graphic-intensive information next to the element, or consider web pages provide a separate text version of using the LONGDESC attribute, which their site to ensure accessibility. This approach provides for more detailed text than ALT. adds maintenance time and complexity 3 because two versions of the site must be • Provide alternatives for forms and databases. updated. It also segregates site visitors Some combinations of browsers and screen according to the type of equipment they use to readers encounter errors with nonstandard access the web. As much as possible, design a or complex forms. Always test forms single version of your site that is accessible to and databases with a text-based browser. all visitors. Include an email address and other contact information for those who cannot use your If you present information in an image forms or database. Make sure that the form format, such as a scanned-in image containing elements are labeled according to the HTML a page of a manuscript, be sure to also specification. provide a transcription of the manuscript in a text format. This alternative is useful • Provide alternatives for content in applets for many visitors, including those with and plug-ins. visual impairments and those with learning As future versions of software develop, disabilities who may have difficulty reading applets (such as programs created with the original document. JavaScript) and plug-ins (such as Adobe Acrobat) may provide accessibility features. • Provide audio description and captions or However, many of these programs are transcripts of video. currently not accessible to people using text- If your multimedia resources provided on based browsers. To ensure that people with your site include video, people who cannot visual and hearing impairments can access see will be unable to use this information your information, provide the content from unless it is provided in an alternative format. these programs in alternative, text-based A text transcription provided as an alternative formats. When using JavaScript, make sure to to viewing the video will also give a visitor employ the built-in accessibility features that who cannot see access to the information in are within the Java Developer’s Kit. your video clip. Captions and transcripts also provide access to the content for those who cannot hear. Accessibility Tests Test your website with a variety of web browsers, and always test your pages with at least one text- Special Features based browser and with multi-media browsers • Use frames sparingly and consider with graphics and sound-loading features turned alternatives. off. This way you will see your web resources Some screen reader programs read from left from the many perspectives of your users. Also to right, jumbling the meaning of information view the resources at your site using a variety of in frames. Some visitors who are blind can computing platforms, monitor sizes, and screen interpret frame-based information, but it is resolutions. Make sure you can access all of the best to look for other ways to present the features of your website with the keyboard alone, information to ensure that visitors with visual simulating the experience of web users who impairments can reach your data. Evaluate cannot use a mouse. Make use of accessibility whether frames are truly necessary at your testing software such as A-Prompt, Bobby, and site. When frames are used, ensure that frames WAVE; they will point out elements that could are labeled with the TITLE attribute, provide a be inaccessible. Then, revise your HTML to make text alternative with NOFRAMES, and use the your site accessible. TARGET = “_top” attribute to ensure useful Uniform Resource Location (URL) addressing is provided for each interior frame. 4 Additional Resources World Wide Access Video Americans with Disabilities Act of 1990 A short video, World Wide Access: www.ada.gov/pubs/ada.htm Accessible Web Design, introduces accessible web design and may be purchased from AccessWeb DO-IT. You will receive an open-captioned as www.uw.edu/doit/Resources/accessweb.html well as an open-captioned and audio-described version on a DVD. It can also be freely viewed The Center for Universal Design in Education online at www.uw.edu/doit/Video/www.html. www.uw.edu/doit/CUDE/ Permission is granted to reproduce DO-IT videos for educational, noncommercial purposes as long EASI (Equal Access to Software and Information) as the source is acknowledged. people.rit.edu/easi/index.htm
Electronic and Information Technology About DO-IT
Accessibility Standards (Section 508) DO-IT (Disabilities, Opportunities, www.access-board.gov/sec508/standards.htm Internetworking, and Technology) serves to increase the successful participation of individuals International Center for Disability Resources on with disabilities in challenging academic the Internet programs and careers, such as those in science, www.icdri.org engineering, mathematics, and technology. Primary funding for the DO-IT program is National Center for Accessible Media (NCAM) provided by the National Science Foundation, resources the State of Washington, and U.S. Department of ncam.wgbh.org Education.
Trace Research and Development Center For further information, to be placed on the DO- www.trace.wisc.edu IT mailing list, request materials in an alternate format, or to make comments or suggestions Universal Design: Principles, Process, and about DO-IT publications or web pages, contact: Applications www.uw.edu/doit/Brochures/Programs/ud.html DO-IT University of Washington W3C’s Web Accessibility Initiative (WAI) Box 354842 www.w3.org/WAI/ Seattle, WA 98195-4842 [email protected] Web Accessibility in Mind (WebAIM) www.uw.edu/doit/ www.webaim.org 206-685-DOIT (3648) (voice/TTY) 888-972-DOIT (3648) (toll free voice/TTY) 509-328-9331 (voice/TTY) Spokane 206-221-4171 (fax) Founder and Director: Sheryl Burgstahler, Ph.D.
5 Acknowledgment 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 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, HRD-0833504) and the Dole Foundation (TFP-95-113). However, the contents do not necessarily represent the policy of the Dole Foundation or the federal government, and you should not assume their endorsement.
2002, 2001, 1999, 1997, University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged.
Grants and gifts fund DO-IT publications, videos,
and programs to support the academic and career success of people with disabilities. Contribute today by sending a check to DO-IT, Box 354842, University of Washington, Seattle, WA 98195-4842.
Your gift is tax deductible as specified in IRS regula-
tions. Pursuant to RCW 19.09, the University of Washington is registered as a charitable organization with the Secretary of State, State of Washington. For more information, call the Office of the Secretary of State, 800-322-4483.
University of Washington College of Engineering UW Information Technology College of Education
