Web Pages
The web has rapidly become the dominant Internet tool, combining hypertext and multimedia to provide a network of educational, governmental, and commercial resources. 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 experience the web differently due to the following issues:
- cannot see graphics because of visual impairments
- cannot hear audio because of hearing impairments
- use slow Internet connections and/or equipment that cannot quickly 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.
Responses:
- She could use a speech output system.
A person who is blind may use a speech output system that reads aloud text presented on the screen; this system may be composed of screen reading software and a voice synthesizer. - She could have a sighted person read the screen to her.
Yes, this is a possibility. However, it is preferable to find solutions that do not require assistance from a sighted person. - She could use a Braille output system.
Unfortunately, because universal design is not incorporated in the level of web pages, using the sighted person may be the only option. - She could use a Braille Keyboard.
Although special key boards exist, most people who are blind use standard keyboards and become touch typists.
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 and its 2008 amendments requires that U.S. programs and services be accessible to individuals with disabilities. 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 ensure 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 is used by some organizations that are not required to comply.
Many 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 current W3C Web Content Accessibility Guidelines or Access Board standards. It is important to disseminate information about the standards to all web page 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 web pages.
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 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 websites. 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: <a href="https://www.washington.edu/doit/about.htm">Click here</a>for information about our company. will present "Click here" as the link. However, <a href="https://www.washington.edu/doit/about.htm"> Information about our company.</a> 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. 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.
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="https://www.washington.edu/doit/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.
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.
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; they will point out elements that could be inaccessible. Then, make revisions to make your site accessible.
Acknowledgment
The content of this web page was adapted with permission from Burgstahler, S. and Comden, D. (2012). World Wide Access: Accessible Web Design. Seattle: UW.
More Information
Explore DO-IT Publications, Knowledge Base articles, and websites on this topic at Accommodation Resources: Web Pages. To learn about accommodations for a specific disability, select from the list below.