VA Web Accessibility Initiative
to make web content available to persons with disabilities
_________________________________________________________________
How to Design Accessible Web Pages for People with Disabilities
Designing Accessibility into Web Pages for Blind Veterans
This paper provides examples and recommendations established by
organizations recognized for their effort in making web pages
accessible for the blind. These organizations are part of the Web
Accessibility Initiative (WAI), an effort to make web content
available to persons with disabilities.
Resources Used This paper summarizes three web sites: Bobby, the World
Wide Web Consortium, , and Microsoft Accessibility .
VA Employees and Customers
The Department of Veterans Affairs has approximately 481 working
employees who are blind. The blind veteran population is approximately
100,000, and this figure is rising. In addition, the VA has training
programs for blind veterans seeking training on how to use computer
for employment. On completion of this training program the veteran is
given a PC. To date, approximately 500 PCs have been given to blind
veterans.
Screen Reader Tools for the Blind
There are software tools that will read text on a PC screen. These
readers can also identify links on a web page, but there is a limit to
their capability.
Web tool available to the Design
By far the most recognized web site for helping web designers check
web pages for accessibility errors is the Internet web site BOBBY
(http://www.cast.org/bobby). BOBBY is a web-based tool that analyzes
web pages for their accessibility to people with disabilities. The
Center for Applied Special Technology offers BOBBY is a free public
service in order to further its mission to expand opportunities for
people with disabilities through innovative uses of computer
technology.
BOBBY can:
* suggestthe text equivalents for all non-text elements (i.e.,
images, animations, audio, video)
* suggest the need for summaries of graphs and charts
* ensure that all information conveyed with color is also available
without color
* generate an organized report
* suggest the need for alternative content for features (e.g.,
applets or plug-ins) that may not be supported
BOBBY also analyzes web pages for compatibility with various browsers.
BOBBY can analyzes Internet and Intranet web pages.
The Guidelines
The following guideline information was found on the web page Bobby.
The guideline provides a simple checklist of design tips for you to be
aware of and take into consideration when designing your web page:
1. Provide alternative text for all images.
, example: ALT="describe the picture or logo".
2. Provide alternative text for each APPLET.
All HTML APPLET elements should contain two types of alternative text.
* 1. A short alternative text description placed in the ALT
attribute of the APPLET element.
* 2. An alternative HTML-based content which, if possible,
duplicates the function of the applet for those users who do not
have a Java-capable browser as well as those who are blind and may
not be able to access the Java applet with a regular
screen-reader. For example,
1. A short alternative text description placed in the ALT attribute
of the APPLET element.
2. An alternative HTML-based content which, if possible, duplicates
the function of the applet for those users who do not have a
Java-capable browser as well as those who are blind and may not be
able to access the Java applet with a regular screen-reader. For
example,
<APPLET CODE="banner.class" ALT="Scrolling news banner" WIDTH=200 HEIGHT=200>
Banner showing three things:
<OL>
<LI>The Dow Jones Industrial Average climbed 30 points today in heavy trading</
LI>
<LI>G5 Summit to start in Washington tomorrow.</LI>
<LI>Global nuclear non-preliferation treaty signed by all nations today.</LI>
</OL>
</APPLET>
3. Provide alternative content for each APPLET.
All HTML APPLET elements should contain two types of alternative text.
1. A short alternative text description placed in the ALT attribute
of the APPLET element.
2. An alternative HTML-based content which, if possible, duplicates
the function of the applet for those users who do not have a
Java-capable browser as well as those who are blind and may not be
able to access the Java applet with a regular screen-reader. For
example,
<APPLET CODE="banner.class" ALT="Scrolling news banner" WIDTH=200 HEIGHT=200>
Banner showing three things:
<OL>
<LI>The Dow Jones Industrial Average climbed 30 points today in heavy trading</
LI>
<LI>G5 Summit to start in Washington tomorrow.</LI>
<LI>Global nuclear non-preliferation treaty signed by all nations today.</LI>
</OL>
</APPLET>
4. Provide alternative text for all image-map hot spots.
All major browsers today support client-side image maps. Image maps
are images in which regions of the image contain "hot-spots" where a
person can click to follow a link. Client side image maps should
always been used in place of the older server side image maps except
for a few specific cases (like clickable geographic maps). There is no
problem with using both server and client side image maps, for
example:
<MAP NAME="csmap">
<AREA SHAPE="RECT" COORDS="5,5,100,40" HREF="jim.html" ALT="Jim's Home Page">
<AREA SHAPE="RECT" COORDS="150,1,195,140" HREF="alice.html" ALT="Alice's Home P
age">
</MAP>
<A HREF="#serverside.map">
<IMG SRC="splashscreen.GIF" ALT="Splash Screen" ISMAP USEMAP="#csmap" HEIGHT=20
0 WIDTH=200>
</A>
6. Provide alternative text for image submit buttons.
What is required is an ALT tags. An example of an ALT tag is images
is: ALT="describe the picture or logo".
7. Provide alternative content for each OBJECT that conveys
information.
1. A short alternative text description placed in the TITLE attribute
of the OBJECT element.
2. An alternative HTML-based content which duplicates or describes
the function of the OBJECT for those users who are unable to
access it in its original form.
For example:
<OBJECT classid="java:Press.class" width="500" height="500"
title="Java applet: how temperature affects pressure.">
As temperature increases the molecules in the balloon...
</OBJECT>
8. Each FRAME must reference an HTML file.
When creating a frames-based web page, it is possible to make the
source of a frame be an image rather than an HTML file. When this is
done, it is not possible to include alternative text for the image.
Instead of referencing an image directly, the frame should point to an
HTML file that contains the image. For example, DON'T DO:
<FRAME SRC="banner.gif" TITLE="Frame banner">
Instead try:
<FRAME SRC="banner.html" TITLE="Frame banner">
----- banner.html -----
<HTML>
<BODY>
<IMG SRC="banner.html" ALT="Company XYZ's logo and new product listing.">
</BODY>
</HTML>
9. Is this image button being used as a server-side image map?
When a form is submitted using an image button, most web browsers will
transmit the x and y coordinates of where in the image the user's
mouse clicked. If the web server takes different actions depending on
the location clicked, this amounts to a form of server-side image map
is subsequently inaccessible to blind users. For this reason, authors
should consider using multiple submit buttons (each with its own
image) in place of a single graphical submit button.
10. Avoid using movement where possible.
11. Avoid blinking or scrolling text created with the BLINK.
Some screen readers for the blind are unable to read blinking text. It
is suggested that blinking text created by the Netscape BLINK tag be
replaced by one of the following options:
1. Emphasized text, i.e. this is important
2. An animated GIF image whose ALT text corresponds to the blinking
text.
3. A Java applet with alternative text that corresponds to the
blinking text.
12. Avoid blinking or scrolling text created with the MARQUEE element.
Some screen readers for the blind are unable to read scrolling text.
It is suggested that scrolling text created by the Internet Explorer
MARQUEE tag is replaced by one of the following options:
1. Emphasized text, i.e. this is important
2. An animated GIF image whose alternative text corresponds to the
scrolling text.
3. A Java applet marquee with alternative text that corresponds to
the scrolling text.
13. Ensure that pages are readable and usable without frames.
Pages that are designed using HTML frames can often-present
substantial navigation difficulties to both blind users and to those
without frames-capable browsers. A frame-based page should always
include an alternative layout inside a NOFRAMES element. For example:
<FRAMESET COLS="*,130">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
<BODY>
<NOFRAMES>
Your alternative page goes here
</NOFRAMES>
14. Provide alternative content for each SCRIPT that conveys important
information of function.
If a SCRIPT element conveys important information, then it should be
directly followed by a NOSCRIPT element which provides the same
information made accessible to browsers that don't support scripting.
For example,
<SCRIPT type="Javascript">
...some Javascript script to show a billboard of sports scores...
</SCRIPT>
<NOSCRIPT>
<P>To access today's scores,
<A href="scores.html">visit our text-only version.</A>
</NOSCRIPT>
15. Adjacent links should be separated
One common problem for many blind web users is identifying which
pieces of text are links and which are not. To a sighted person, links
are often displayed blue, underlined, or bolded depending on the web
browser. To help people who are blind find all the hypertext links on
a page, a variety of screen readers have adopted techniques to list
each of the links consecutively. Unfortunately, if there is no text or
image separating two adjacent links, even if they occur on consecutive
lines, some screen readers will incorrectly read adjacent links as a
single link.
Place some sort of separating character or object other than a new
line (BR or P) or space between adjacent links. Images or bullets are
good choices, though numbered lists can often be more helpful. Instead
of doing something like:
<A HREF="jim.html">Jim's Home Page</A>
<BR>
<A HREF="alice.html">Alice's Home Page</A>
try:
[<A HREF="jim.html">Jim's Home Page</A>] [<A HREF="alice.html">Alice's Home Pag
e</A>]
16. Give each frame a title
A TITLE attribute should be added to each FRAME element to describe
the purpose and content of the FRAME. For example,
<FRAMESET ROWS="100,*">
<FRAME SRC="navigate.html" TITLE="Navigation Bar">
<FRAME SRC="content.html" TITLE="The Navigation Bar changes the contents of thi
s frame.">
</FRAMESET>
17. Consider adding a description to FRAME or IFRAME when the frames
TITLE in not sufficient.
To help blind users navigate between frames, it is worthwhile to
create a separate text file that describes the layout and purpose of
the FRAME or IFRAME element. This should be in addition to the TITLE
attribute on each FRAME and using the LONGDESC attribute of both
elements. For example,
<FRAMESET ROWS="100,*">
<FRAME SRC="navigate.html" TITLE="Navigation Bar" LONGDESC="navigatepurpose.txt
">
<FRAME SRC="content.html" TITLE="The Navigation Bar changes the contents of thi
s frame." LONGDESC="contentpurpose.txt">
</FRAMESET>
18. If possible, avoid using tables to format text documents in
columns
Tables are used either to layout a page of graphics, text and other
elements such as navigation bars or to present data in a tabular
format such as train schedules, spreadsheets, etc. Unfortunately,
screen reading tools for the blind have a difficult time reading
multiple columns of text -- they often read across rows as a single
sentence. For example:
There is a 30% chance of rain Classes at the University of showers
this morning, but the Wisconsin will resume on weekend looks like it
will be sunny. September 3rd.
While this is a problem that the tools need to solve, authors can help
the tools interpret tables effectively by providing information about
the table. In the future, style sheets should be used to layout pages
with graphics, text and other elements. Where multicolumn text and
HTML tables are used, consider making the table, page, or site
available in a text-only version. In the future, as more browsers and
screen readers support the HTML 4.0 specification, it will be possible
to label HTML tables in ways which allow them to be more accessible.
19. Provide summaries for tables of data
Like ALT text for images, each TABLE element should contain a SUMMARY
attribute that briefly describes the table structure and purpose. For
example:
<TABLE border="border" summary="This table charts the number of cups of coffee
consumed by each senator, the type of coffee (decaf or regular), and whether ta
ken with sugar.">
...
</TABLE>
Adding a table summary is especially useful for non-visual users.
20. Create link phrases that make sense when read out of context
Users who are blind often jump from link to link when skimming a page
or looking for information. When they do this, only the text of the
link ("link text") is read.
Therefore, it is important that link text make sense when read without
surrounding text. For example, authors should not use "click here" as
link text several times on the same page; this requires a user
browsing the page with a screen reader to step through each link and
read the surrounding text to determine the purpose of the link.
Instead, link text should carry sufficient information, as in
"download this document in ASCII text," "view the full version in
HTML," or "for the text version select this link."
21. Give each frame a title
A TITLE attribute should be added to each FRAME element to describe
the purpose and content of the FRAME. For example,
<FRAMESET ROWS="100,*">
<FRAME SRC="navigate.html" TITLE="Navigation Bar">
<FRAME SRC="content.html" TITLE="The Navigation Bar changes the contents of thi
s frame.">
</FRAMESET>
Web Design Tips From Other Reliable Internet Sources
Additional information on WAI design can be found on
1. The U.S. Department of Education's "Requirements for Accessible
Software Design" including the technical guidance that appears as
Appendix A to the "Requirements"
2. Document Section 508 Home Page of the Civil Rights Division, U.S.
Department of Justice
3. Accessible Web Authoring Resources and Education Center
4. WebABLE! is the authoritative Web site for disability-related
internet resources with an accessibility database that lists
hundreds of internet based resources on accessibility
5. Trace Research & Development Center. Trace is a non-profit
research center which focuses on making off the shelf technologies
and systems like computers, the Internet, and information kiosks
more accessible for everyone through the process known as
universal, or accessible design.
6. [The Library of Congress National Library Services for the Blind
and Physically Handicapped]
7. [The Equal Employment Opportunity Commission] (EEOC)
8. [The American Council of the Blind]
Summary
To design an accessible web site that can help remove barriers and
make the world a more accessible place, that is what this paper is
about. The guidelines and resource information presented in this paper
is a real start for webmaster involved with designing web sites that
are accessible for people with disabilities. In addition, there are
web tools available to webmasters like Bobby, that can evaluation a
design for possible accessibility errors and Website Garage that will
give you a diagnostic report.
VICUG-L is the Visually Impaired Computer User Group List.
To join or leave the list, send a message to
[log in to unmask] In the body of the message, simply type
"subscribe vicug-l" or "unsubscribe vicug-l" without the quotations.
VICUG-L is archived on the World Wide Web at
http://maelstrom.stjohns.edu/archives/vicug-l.html
|
