Access To Electronic Resources
- World Wide Access: Accessible Web Design
- Meet the Speakers in the Videotape -- World Wide Access: Accessible Web Design
The development of sophisticated multi-media electronic and World Wide Web resources has extended the reach of computers. Increasingly, however, these resources are not fully accessible to people with some types of disabilities. For example, screen reader software with a speech synthesizer used by a student who is blind cannot interpret tables, graphics, or video clips.
- Show Overhead #40
Some people cannot see graphics because of a visual impairment or cannot hear audio because of a hearing impairment. Some have difficulty when screens are unorganized, inconsistent, and cluttered and when descriptions and instructions are unclear. These difficulties may occur because they have learning disabilities, speak English as a second language, or are younger than the average user. Other people use older equipment, have slow connections or modems that limit their access to multimedia features.
As more information is delivered using computer and network technologies, schools and businesses play an increasingly important role in ensuring access to electronic information resources for all potential interns and employees.
When evaluating the accessibility of electronic resources, remember to consider online catalogs; career and cooperative education resources; electronic indexes and full text resources such as encyclopedias, available through stand-alone stations or networked terminals; and Internet resources on the World Wide Web.
Accessibility should also be considered when purchasing new electronic resources for your career services office. Ask the vendor if the product has been tested for accessibility and, specifically, if the product is compatible with screen reading software. Develop a policy that electronic products in your office be reviewed for accessibility before purchase.
Electronic resources designed or developed in-house, such as career services and cooperative education Web pages, online catalogs, and local digital library projects, should be developed with universal access as a goal. Accessibility guidelines should be incorporated into Web page standards.
Then, as a backup, make it a priority to buy and develop accessible resources. Be prepared to assist people with electronic resources that they cannot access independently.
Universal Design Principles
In making electronic resources accessible, principles of universal design should be employed. In general, "universal design" means to design products and services that can be used by people with a wide range of characteristics, abilities, and disabilities. Following universal design principles in designing your electronic resources can help ensure that all students and employees will be able to independently utilize them, regardless of their disabilities or the limitations of their equipment and software. For additional guidelines consult The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). Contact information can be found in the Computing Resources section of this notebook.
- Show Overhead #41
Typically, organizations design their electronic services for the average user. Universal design means that you design them for people with a broad range of abilities and disabilities. The Trace Research and Development Center has defined universal design as: "The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design."
- Show Overhead #42
Universal design principles can be applied to both facilities and tools. They are especially appropriate to consider when designing electronic resources, including online catalogs, educational software, and electronic reference sources in CD-ROM or other formats, or on the Internet. Adapted from a listing by the Trace Center, here are some general guidelines to consider in designing an electronic resource.
- Design the resource so that it can be used by anyone. Provide the same means of use for all users -- identical when possible; equivalent when not. Avoid segregating or stigmatizing any potential users.
- The resource should be flexible in the ways that it can be used, accommodating a wide range of individual preferences and abilities. Provide choice in methods of use, for example, accommodate both right- and left-handed access.
- The design should be simple, allowing the resource to be used with minimal training. The resource should be easy to understand, regardless of the user's age, experience, knowledge, language skills, or current level of concentration.
- Information should be provided redundantly. The variety of formats included should accommodate people with visual, hearing, and other impairments. Use several different modes (e.g., pictures, text) to provide essential information. Make the resource compatible with current adaptive computer technologies.
- Design the resource so that minimal physical effort is required to operate it.
Accessible Web Design
In this section we'll apply universal design principles to a common activity in schools and businesses today, designing Web pages. 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. Many career services offices and businesses now maintain their own Web sites. Perhaps yours is one of them. Yet, because of the multimedia nature of the medium, many Internet surfers cannot access some materials available on the World Wide Web.
In the video presentation, World Wide Access, individuals with disabilities share access problems and solutions. At the end of the video, design features for making Web pages accessible are listed. These recommendations are covered in the handout titled World Wide Access: Accessible Web Design. Watch the videotape and review the publication.
General Page Design
Let's consider the principles described in the videotape. If you have not created a Web page before, you may be confused by some of the technical jargon used. If so, don't be discouraged. Focus on the basic principles and pass the information in the handout on to staff, partnering employers, and administrators responsible for Web page development at your institution and in your community. We'll start out with principles related to general page design.
The first principle to remember is to maintain a simple, consistent page layout throughout your site. Much of the power and appeal of the Web comes from the fact that it presents information in a variety of formats while also organizing that information through hypertext links. Designing a well organized site with a consistent design makes it easier for visitors to find the information they need. Following this guideline will especially assist people with learning disabilities who have difficulty following disorganized presentations.
- Show Overhead #43
Think about the physical effort needed to use your site. Remember that small buttons marking links can be difficult targets for visitors with mobility impairments that result in restricted hand movements. Larger buttons make it easier for all visitors to select the links on your page. Along with a consistent page layout, it is important to keep backgrounds simple and make sure there is enough contrast.
- Show Overhead #44
People with low vision or color blindness, or those using black and white monitors may 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. Following this guideline will aid visitors with low vision and those with learning disabilities who may find busy backgrounds and moving features from page to page confusing.
- Show Overhead #45
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. Make links descriptive enough so that they are understood out of context.
- Show Overhead #46
Hypertext Markup Language (HTML) is the standardized code used to create Web sites. The code works with tags that tell 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. The World Wide Web Consortium (W3C) specifies what is standard HTML with the intent of maintaining a language compatible with many platforms and browsers.
The universal format of the World Wide Web meets the equitable and flexible principles of universal design. However, many people like to add new and non-standard features to add flash to their Web pages. This obstructs the original purpose of a world-wide standard and the open communication that it allows and encourages.
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
- Show Overhead #47
Notify your users that you are concerned about accessibility by including a statement about accessibility on your page. Encourage site visitors to notify you with their accessibility concerns. For example, the DO-IT home page includes this 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."
People 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. This addresses the universal design principle of redundant presentation of information in different modes.
- Show Overhead #48
Some people have advocated the use of alternative text versions of Web sites that are graphic-intensive. However, this adds a great deal of maintenance time and complexity as two versions must be updated. The maintenance time increases exponentially for organizations that are required, or that choose to provide their sites in multiple language versions. Make every effort to create the original version in an accessible format. Remember, the first principle of universal access is equitable use, so avoid segregating users of your electronic resources based on their ability, connection speed, or type of hardware and software they use. Below are guidelines for providing alternative text for various types of visual features.
To start out, always include short, descriptive ALT attributes for graphical features on your page. What is an ALT attribute? An ALT attribute is an HTML code used with the IMG tag that is used to give alternative text information for graphical features. The alternative text helps the visitor understand what is on the page even if they are using a text browser or if they have image loading turned off in their graphical browser.
The bolded text in the following example of HTML code shows what an ALT attribute looks like. An ALT attribute always works within an image or graphical HTML tag.
<HTML> <HEAD> <TITLE>DO-IT Program</TITLE></HEAD> <BODY><IMG SRC="http://www.washington.edu/doit/./doitlogo.large.gif" ALIGN=MIDDLE ALT="[DO-IT LOGO]"> <H1>DO-IT at the University of Washington</H1>
In some cases where a graphic provides no additional information, the ALT attribute can be used with a null value ("") to eliminate clutter. ALT attributes for graphical bullets can simply be asterisks.
<IMG SRC="http://www.washington.edu/doit/./dec.gif" ALIGN=MIDDLE ALT=""> <IMG SRC="http://www.washington.edu/doit/./bullet.gif" ALIGN=MIDDLE ALT="*">
For example, when a sighted visitor views the DO-IT home page at www.washington.edu/doit 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] because DO-IT staff used this text as an ALT attribute for the graphic. 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 five words) as browsers sometimes have difficulty with long ALT attributes. This example can also be used to explain the difference between text and words embedded in a graphic. Web designers sometimes embed text in graphics so that they can incorporate color, fancy fonts, and other design elements into the display. It is important to differentiate between text, which screen readers can access, and words that are images, which screen readers cannot read. In the DO-IT logo, "DO-IT" is a graphic image. DO-IT staff include "DO-IT" in the ALT attribute so that the DO-IT name is displayed by a text browser and thus read by a speech synthesizer.
Another principle of universal design is to use 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, a site with information on state trivia presents a map of the United States. A visitor can click on Washington to find out the state bird, song, insect, flower, and other facts. 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 unlabeled links that lead them in circles.
The HTML coding in this example does not include an alternative menu for the image map.
<HTML> <HEAD> <TITLE>States Trivia</TITLE> </HEAD> <BODY> <A HREF="http://www.washington.edu/doit/images/home.map"> <IMG SRC="http://www.washington.edu/doit/images/states.jpg"ismap></A> </BODY> </HTML>
When viewed through a graphical browser, such as Netscape, a picture of a map of the United States appears and the visitor can choose information by state. But, when a visitor using a text-based browser visits the site, what he sees is this:
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, cannot get to your information.
The accessibility of image maps is dependent on the server software used at a Web page site. If ALT attributes are included for every hyperlink in an image map, some server programs can pull the hyperlink information from the image map and present it in menu format for text-based browsers. However, many Web servers do not have this capability. If this support is not available to you, you can always make the image map accessible by adding a separate navigation menu, or listing of hypertext links, above or below the image map.
Using ALT attributes and alternative menus help all of your visitors navigate through your site. The next principles we will discuss help your visitors understand the content in non-text, graphical features on your page. Including ALT attributes is sufficient for logos and graphics that are not critical to the information content of the page. 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, possibly because they are blind. Include descriptive captions for photographs and pictures. Describe images in enough detail so that a visitor who cannot see the pictures will understand the content that they add to the page.
If you present information in an image format, such as a scanned-in image of a page of a manuscript, be sure to also include a transcription of the manuscript in a straight text format. Remember, words embedded in an image are not accessible to those using a voice output system. 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. Again, think redundancy.
Multimedia and audio formats can present barriers to people with hearing impairments as well as for people with less sophisticated computer systems. Provide captioning and transcriptions for spoken materials so these visitors have an alternative method of accessing this information.
Most screen reader programs read from left to right, jumbling the meaning of information in tables. Some adaptive technology can deal with format issues such as this, but it is best to look for other ways to present the information so that visitors with visual impairments can read your data. Consider using an alternative format for information that might be included in a table.
Use special features such as forms, data-bases and plug-ins with care. Always test forms and databases with a text-based browser. Include an electronic mail address and other contact information for those who cannot use the form or database.
Use features that require plug-ins, mini programs that run within a browser, with care. Not all people have the high-end equipment needed to download and run plug-ins. In addition, content presented using plug-ins is not accessible through text-based Web browsers. As the software is developed, applets (such programs created with JAVA) and plug-ins (such as Adobe Acrobat) may provide adequate accessibility features. However, to ensure that people with visual and hearing impairments can access your information, provide the content from these programs in other, text-based formats.
Web Page Test
The final guideline is to test your Web pages with as many Web browsers as you can. Always use at least one text-based browser. This way, you will see your Web resources from the many perspectives of your users.
Part of testing your Web site includes running it against an HTML validator program. These programs compare the HTML at your site with the rules of standard HTML. They then provide a report listing errors and non-standard tags. Some validators check specifically for accessibility. Try using an accessibility validation site which performs a diagnostic on your pages and points out parts that could be inaccessible. For example, Bobby is an easy-to-use program to find HTML compatibility problems that prevent pages from displaying correctly on different Web browsers. Bobby specifically highlights accessibility problems. Bobby was created at CAST (Center for Applied Special Technology). Its URL is www.cast.org/bobby.
- Show Overhead #49
Whether you are developing electronic resources or designing a computer facility for your career services office or business, apply universal design principles to maximize access. In particular, consider these accessible Web design principles when developing Web pages.
- Maintain a simple, consistent page layout.
- Keep backgrounds simple. Make sure there is enough contrast.
- Use standard HTML.
- Include a note about accessibility.
- Provide text alternatives (ALT attributes, captions, alternative menus, transcriptions) for graphical features.
- Test and use special features with care.
- Test your Web pages with a variety of browsers.
Career services offices and businesses have a moral and legal responsibility to make computing resources accessible to everyone, including those with disabilities. They must provide accessible buildings, computers, and electronic resources. You should also demand from vendors that products you purchase are accessible to individuals with a variety of disabilities.