Southwest Educational Development Laboratory
Volume 2, Number 1, 1997
The Internet: A Word from the Director
Accessible Information on the World Wide Web
General Guidelines For Improving Accessibility of World Wide Web Pages
→ Accessibility Design Considerations and Examples
NIDRR Project Results Used by Special Olympics International to Evaluate Impact of Sports Program
The major areas to be discussed are graphics, image maps, text links, audio, video, frames and tables, and forms. Many of the following examples are drawn from:
Note: the numbers [1], [2], and [3] identify the source of various suggestions for adaptations.
Graphics include icons (small representative pictures) as well as pictures, drawings, and charts. The addition of graphics to a Web page can increase interest, attractiveness, and should enhance the understanding of content. Graphics with no real purpose should be avoided. They add to the time needed to load and view a document, and in some cases, may cause the document to be inaccessible to many computer users. These can include people without graphics- capable browsers, as well as users who may be blind and use a screen reader to access information. Others in this group include persons who have the graphics capabilities of their browsers turned off to gain speed on the Web (estimated at 30%) [3].
Most browsers have the capability of alternate text references (ALT=" ") to identify graphics that are not visible. This text only appears when the image is not shown. The (ALT="
") tag should be used to simulate the function of the image it replaces rather than to provide a description of the icon, except in the case of a unique or large image [3]. The text
is also read by screen readers so it should be short and functional [1]. The following are specific examples of use of graphics and (ALT=" ") tags to describe them.
Text Description of the Following Table
| Appearance | Description and the HTML Code |
|---|---|
| [INLINE] | This shows how an image appears in non-graphics browsers which indicates there is an image there but provides no information about it
CODE: <IMG SRC="ncddrlogo.gif"> |
| [NCDDR Logo] | This shows how an image appears in non-graphics browsers with text (NCDDR Logo) added through the (ALT=" ") tag
CODE: <IMG SRC="ncddrlogo.gif" ALT="NCDDR Logo"> |
| [*] | If the graphic icon is a bullet you can use an asterisk through the (ALT=" ") tag to represent it, which is useable by a screen reader [3].
CODE: <IMG SRC="bullet.gif" ALT="*"> |
| [o] | If the graphic icon is a bullet you can use a small letter "o" through the (ALT=" ") tag to represent it, which is useable by a screen
reader [1].
CODE: <IMG SRC="bullet.gif" ALT="o"> |
| [------] | If the graphic is a line you can use a series of dashes through the (ALT=" ") tag to represent it [3].
CODE: <IMG SRC="hline.gif" ALT="------"> |
| [horizontal line] | If the graphic is a line you can add "horizontal line" through the (ALT=" ") tag to represent it [1].
CODE: <IMG SRC="hline.gif" ALT="horizontal line"> |
| [project XYZ] | If the graphic is a logo there is no real benefit in describing it through the (ALT=" ") tag [3].
CODE: <IMG SRC="logo.gif" ALT="project XYZ"> |
| [mona lisa GIF-128 KB] | For a unique picture or larger image you can add "Description-Type-Size-in KB" through the (ALT=" ") tag to represent it [3].
CODE: <IMG SRC="monalisa.gif" ALT="mona lisa GIF-128 KB"> |
| [S] | If the graphic is a capital letter in a word, identifying the letter through the (ALT=" ") tag would be useful [3].
CODE: <IMG SRC="S.gif" ALT="S"> |
| [counter number] | If the graphic is a counter use the (ALT=" ") tag to let users know that a number is there, and its function [3].
CODE: <IMG SRC="counter.gif" ALT="counter number"> |
If you do not want anything to show, do not put anything between the quotes in the (ALT=" ") tag [3].
CODE: <IMG SRC="image1.gif" ALT=" "> |
|
| [LINK] | This shows how an image appears in a non-graphics browser when used as a link without the (ALT=" ") tag [3].
CODE: <A HREF="mailto:jwestbro@sedl.org"><IMG SRC="mailicon.gif"></A> |
| [Send us email] | This shows how an image appears in a non-graphics browser when used as a link with text (Send us email) added through the (ALT=" ") tag [3].
CODE: <A HREF="mailto:jwestbro@sedl.org"><IMG SRC="mailicon.gif" ALT="Send us email"></A> |
A separate page may be added to provide a description of some graphic images. Include a text anchor to a page describing the graphic (use a capital "D" or a short phrase located next to the picture such as 'description of graphic name') which takes the user to a page with a full description of significant graphic elements [1].
D
Description Button Description
Another alternative is to develop a text-only page which translates all graphics and information into text. This can provide a fast access method for all users. You may have text-only pages for a few specific pages or all pages at your site. Users should be able to switch back and forth between text-only and graphic versions of the page. This is the most complex adaptation, and is not needed in many cases [1].
An image map is a graphic image that provides a direct link to another page when it, or a specific part of it, is selected. Unless a text alternative is provided for the image map, some people will not be able to navigate your site. A simple list of links at the bottom of the image or screen will avoid blocking off access [3]. See the example of links below the following image map from the Missouri Arthritis Rehabilitation Research and Training Center (MARRTC).
Deleting the image map is not necessary, as the graphic aid of an image map may be especially useful for some viewers with learning or cognitive disabilities. This will be most useful if the same pattern is followed throughout the site [2].
Providing both graphic and text options is best for enhancing accessibility. In some cases, offering a separate text-only page of the links would be most appropriate. Again, viewers should be able to easily switch between graphics and text-only pages [1].
What's New | What is MARRTC | Arthritis NewsBreak | Regional Arthritis Centers | Fibromyalgia Resources | Educational Resources | Text only
Text anchors are words or phrases within a document that link the user to another location. (For example: Go to top of page) The new location may be a part of the same document, part of another document within the original site, or part of another document at a different site. A text phrase that is used as a link to another document should make sense if it stands alone or is read out of context. Just using one word to identify a link may not help the user know if the link is important to their understanding of information at the site.
A series of links on one line should be separated by a vertical bar ( | ) to ensure that screen readers can differentiate between links [1]. A list of links that is vertical rather than horizontal may be more accessible for persons using screen readers, which read from left to right on one line at a time [2].
[1] Anchor links in a horizontal list separated by vertical bars ( | ):
What's New | What is MARRTC | Arthritis NewsBreak | Regional Arthritis Centers | Fibromyalgia Resources | Educational Resources | Text only
[2] Anchor links in a vertical, rather than horizontal, list:
What's New
What is MARRTC
Arthritis NewsBreak
Regional Arthritis Centers
Fibromyalgia Resources
Educational Resources
Text only
Audio clips can be used to provide descriptive information as an accessible alternative for persons who are blind [2]. Audio clips will not be accessible to people who are deaf of hard of hearing.
A page should be made available with a description or transcript of the audio file. This is also useful to viewers who do not have access to necessary hardware or helper software to listen to audio
materials. To improve accessibility, be sure to identify the audio format (.WAV, .AU, .SND, etc. ) and the size of the file [2].
Example of audio clip.
A description of the sounds and dialogue of movies should be provided. Some software (e.g. Quicktime) allows the addition of text tracks [1]. If an alternate sound track is available, an audio description
can be added to the regular audio track for users with visual disabilities. Or, a second copy of the movie with descriptive video can be prepared. Again, be sure to identify the type of movie format
and the size of the file so that users may determine if they have the capability to access the movie. An alternate text file with a description of the movie as well as a transcript should also be provided
[1].
Example of descriptive video clip from The Lion King.
HTML allows a developer to include an alternate set of HTML instructions to be executed or displayed if the end-user's browser does not support FRAMES. Frames are really separate pages, each with its own URL, that appear together. Including an effective alternative to the FRAME page is equivalent to including ALT="text" with a graphic image it makes your critical information available to everyone. Using TABLES as an alternative to FRAMES is not a good idea, since tables are also inaccessible to some users [2].
It is very difficult to make information in columns in a table accessible to a screen reader, which reads across the page. It is best to avoid the use of tables with columns, or, provide a page with lists to make the same information available in an alternate format [2].
If a graph does not make all of its elements and relationships of those elements clear, you should provide a link for appropriate corresponding descriptive text. In a case where the ALT="text" that accompanies the graph does not give enough useful information to the viewer, provide alternate text to describe your chart or graph [2].
For users who cannot readily access forms where blanks are to be filled in, provide a document in basic HTML which can be printed from on-line or downloaded and then mailed, faxed, or electronically
mailed. This may be the same form or an alternate version, depending on the type and quantity of information requested. Or, give a phone number someone can call to provide the requested information
[1].
Example of form: NCDDR Feed back.
Avoid non-standard HTML formats and special tags. They often cause problems for Braille translation, screen readers and some browsers. Don't use the <blink> tag: some screen-readers
lock up when they encounter blinking text. Beyond concerns about accessibility, most HTML style guides warn designers against using the <blink> tag. The consensus is that it is more
annoying than eye-catching[2].
Always provide HTML, or at least ASCII forms, of all documents presented in PDF, PS, WORD or other formats to allow users without that software to access the information[1].
End all sentences, headers and items within a list with a period or other suitable punctuation. Screen-readers interpret punctuation for the listener. To a sighted user, headers are separated and emphasized to stand out. Lists, headings or titles without punctuation may be run together by a screen-reader, making it difficult for the listener to understand. The following suggestions make information accessible for all users, not only those with disabilities. It is helpful to have a standard footer on all pages, describing:
Note standard NCDDR Footer below:
Produced by the National Center for the Dissemination of Disability Research (NCDDR), a project of NIDRR
Disclaimer
http://www.ncddr.org
/products/researchexchange/v02n01/design.html
Last Updated
Tuesday, 29 January 2008 at 04:13 PM
The Web is huge, and growing. In early 1996, it was estimated that some 19 million pages were available through the WWW, with an expected doubling in size every four months. This would yield over 150 million pages at the beginning of 1997 (Venditto, 1996). Search engines are automated tools that sift through the seemingly limitless contents of the Web for specific information. In addition, sites are registered with WWW directories such as Yahoo and Magellan.
Search engines are a type of automated software (called spiders) that cover URLs across the Web in search of terms specified by the user. Some of the spiders visit every site and record the URL and text of all pages, others check to see which sites are most popular and log only information such as the URL address or title. Using slightly different approaches and search criteria, search engines yield different information.
In May 1996, Internet World reviewed a number of free search engines available on the Web. Following is a brief summary of those results.
Text description of the following table.
Brief Description of Search Engines:
With 21 million fully indexed pages, Alta Vista claims to be the largest of the databases for searching the Web, however, many of the references returned were irrelevant or had expired links. Most comprehensive results. |
|
Excite provides both a search engine and a Web directory. Found to be one of the best databases at staying current; does not display URLs in its results. 1.5 million full-text pages. |
|
Has the 'smartest' search tools which find more relevant sites. Provides 'Similar Pages' links. 1 million full-text pages. Most relevant results. |
|
One of the first search tools on the Web. It continues to add to its database and reports results in URLs and abstracts (of 19 million pages). Not the fastest or most extensive, but serviceable. |
|
Offers many search options, and allows users to weigh the relevancy of terms to refine the search. 1.5 million full-text pages (to expand in 1997 to 10 million pages). |
|
Quick searches; gives URL addresses and page titles only. Data base is updated regularly; 500,000 of the 'most popular' pages. |
Placing a search engine at your site can also make it easier for users to find information they are looking for. A number of free and shareware engines are available.
Adaptive Computer Technology Resource Centre. (1996). Accessible Web Page Design - General Design Tips.
[Online] Available: http://www.igs.net/~starling/acc/acgen.htm
Center for Universal Design (CUD). (1996.) Universal design. Raleigh, NC: NC State University.
[Online] Available: http://www.design.ncsu.edu/cud/index.html
5/1/00
Gieszczykiewicz, F.M. (1996, November). A plea for Lynx friendliness, V1.09. (Personal communication by electronic mail).
Starling Access Services. (1997). Accessible Web page design: General design tips.
[Online] Available: http://www.igs.net/~starling/acc/acgen.htm
Trace Center. (1995, December). The principles of universal design. Version 1.1. Madison, WI: University of Wisconsin.
[Online] Available: http://www.tracecenter.org
Vanderheiden, G.C., Chisholm, W.A., & Ewers, N. (1998). ADVANCED DRAFT COPY Unified Web Site Accessibility Guidelines, Version 8: Quick Reference for Page Authors. Madison, WI: Trace Center. [Online]
Available: http://trace.wisc.edu/redirects/htmlgide/5/2/00
Venditto, G. (1996, May). Search engine showdown. Internet World, 7(5), 79-86.
[Online] Available: http://www.internetworld.com
Wusage - http://www.boutell.com/wusage/ provides usage statistics for Web servers, including the number and origin of accesses (hits) to the site, which pages were accessed most, and graphs of some of the statistics gathered. Copyright 1996, by Boutell.Com, Inc.
P.O. Box 20837
Seattle, WA 98102
Phone/Fax +1 206.325.3009
email: wusage@boutell.com
MOMspider - http://www.ics.uci.edu/pub/websoft/MOMspider/ Multi-owned Maintenance (MOM) Spider is a Web-roaming
robot that specializes in the maintenance of distributed hypertext infostructures (i.e. wide-area webs). It lists any links that were broken, moved, or exhibited any other access problems. Roy Fielding
(Last modified: 24 Jul 1996.)
Department of Information and Computer Science
University of California-Irvine
Irvine, CA 92717-3425
fielding@ics.uci.edu
Web Accessibility | Site Map | Feedback
NIDRR Project Number: H133A990008
Last Updated: Tuesday, 29 January 2008 at 04:13 PM,
Contents © 1996-2005
SEDL Southwest Educational Development Laboratory (SEDL)
211 East Seventh St., Room 400 - Austin, Texas 78701-3253
Voice/Text Telephone: 800-266-1832 or 512-476-6861 - Fax: 512-476-2286
Copyright ©2004 Southwest Educational Development Laboratory
