Transcript accessible.pps

Designing Accessible Web
Applications
Leslie M. Tierstein, STR LLC
Hilary Benoit, W R Systems, Ltd.
1
Accessible Web Applications

2
Overview
–
Accessibility and disabilities
–
Assistive devices
–
Accessibility standards
–
Developing accessible applications
–
Software
Accessible Web Apps
Accessibility



3
Accessible: Something that can be used by
persons with disabilities
The software or device should be able to
transform itself into a needed format
The software or device should be compatible
with access aids providing “Assistive
Technology”
Accessible Web Apps
Disabilities
Category
Visually
Impaired
Auditory
Impaired
Mobility
Impaired
Cognitive
Disabilities
4
Typical Problems
Blind; low/limited vision; weak, dim or
tunnel vision; extreme near- or farsightedness;
Deaf; hard of hearing; high/low-frequency
loss
Repetitive Strain Injury (RSI); arthritis;
stroke; Amyotrophic Lateral Sclerosis
(ALS); MS; spinal cord injuries; loss of
limbs/digits; broken arm etc.
Cognitive and learning disabilities
Accessible Web Apps
Assistive Technology (AT)

Software or devices that transform a computer
program into a form accessible to a person
with disabilities
–
–
–
–
5
Screen readers
Screen magnifiers
Speech synthesizers
Voice input software
–
–
–
Alternative keyboards
Pointing devices
Braille displays
Accessible Web Apps
Accessibility Standards

W3C Web Content Accessibility Guidelines 1.0
–

Section 508
–
–
–
6
Web Accessibility Initiative (WAI) checkpoints
originally in the Rehabilitation Act of 1973
expanded and strengthened by the Rehabilitation
Act Amendments of 1998 - paragraph 1194
effective for federal acquisitions as of June 21, 2001
Accessible Web Apps
Section 508
“Section 508 requires that when Federal agencies develop,
procure, maintain, or use electronic and information
technology, Federal employees with disabilities have access
to and use of information and data that is comparable to the
access and use by Federal employees who are not
individuals with disabilities, unless an undue burden would
be imposed on the agency. Section 508 also requires that
individuals with disabilities, who are members of the public
seeking information or services from a Federal agency,
have access to and use of information and data that is
comparable to that provided to the public who are not
individuals with disabilities, unless an undue burden would
be imposed on the agency.”
7
Accessible Web Apps
Section 508–B Technical Standards



8
1194.21 - Software applications and operating
systems (12 rules)
1194.22 - Web-based intranet and internet
information and applications (16 rules)
Both cover essentially the same areas of
concern, with additional issues in 1194.22.
Accessible Web Apps
Section 508 – Areas of Concern
–
–
–
–
–
–
–
–
9
Graphics
Multimedia
Mouse vs. keyboard
accessibility
Data Tables
Frames
Animation
Scripting
Online Forms
–
–
–
–
–
–
–
–
–
Navigation
Timed Response
Dynamic Content
Scripts and Applets
Language
Color
Screen Flicker
Bitmap Images
Image Maps
Accessible Web Apps
WAI-Section 508 Cross-Reference
10
#
Section 508
1194.22
W3C WAI
1.0
#
Section 508
1194.22
1
2
3
4
5
6
7
8
9
10
11
A)
B)
C)
D)
E)
F)
G)
H)
I)
J)
K)
1.1
1.4
2.1
6.1
1.2
9.1
5.1
5.2
12.1
7.1
11.4
12
13
14
15
16
17
18
19
20
21
L)
M)
N)
O)
P)
W3C WAI
1.0
4.1
6.2
14.1
6.3
1.3
Accessible Web Apps
HTML 4.0 Enhancements

Accessibility improvements
–
–
–
–
–
11
Better support for assistive technology (eliminate
“abuse” of HTML structural elements for layout for
formatting)
New structural elements (esp. for tables)
Alternate content (for graphics and objects)
Easier navigation and orientation
Better handling of multi-lingual documents and
applications
Accessible Web Apps
1. Provide text equivalents
(a) A text equivalent for every non-text element
shall be provided (e.g., via "alt", "longdesc", or
in element content).
<a href="/cgi-bin/…">
<img src="store/images/cb-enterstore.gif"
name="enterstore"
alt="Enter Store" border="0">
</a>
12
Accessible Web Apps
2. Provide multimedia alternatives
(b) Equivalent alternatives for any multimedia
presentation shall be synchronized with the
presentation.
13
Accessible Web Apps
2. Provide multimedia alternatives
14
–
Provide captioning and/or
transcripts of audio and
descriptions of video.
–
Create a caption file using
software such as MAGpie,
or in a text editor.
–
Software packages such
as Apple’s Quicktime can
synchronize the caption file
with the video.
Accessible Web Apps
3. Don’t rely on color alone
(c) Web pages shall be designed so that all
information conveyed with color is also
available without color, for example from
context or markup.
–
–
15
Color is a secondary indicator of meaning
Foreground and background colors contrast
Accessible Web Apps
3. Don’t rely on color alone


16
Using contrasting colors:
http://www.lighthouse.org/color_contrast.htm
Vision simulator for color blindness:
www.vischeck.com
Accessible Web Apps
Vischeck
Original Page
17
Accessible Web Apps
Vischeck
As viewed by
someone with
red/green color
blindness
18
Accessible Web Apps
4. Be careful with style sheets
(d) Documents shall be organized so they are
readable without requiring an associated style
sheet.
–
19
Don’t include text positioning in the style sheet
Accessible Web Apps
5. Supplement image maps
(e) Redundant text links shall be provided for
each active region of a server-side image map.
20
Accessible Web Apps
5. Supplement image maps
21
Accessible Web Apps
6. Use client-side image maps
(f) Client-side image maps shall be provided
instead of server-side image maps.
–
–
–
22
If the “hotspots” are complicated, divide a large
image into several smaller images. Assign each
image an appropriate “alt” attribute -- or -Include a text anchor that links a description to the
whole graphic
(Server-side maps are older, slower technology
anyway.)
Accessible Web Apps
7. Identify table elements
(g) Row and column headers shall be identified
for data tables.
23
Accessible Web Apps
7. Identify table elements
<table border="1"
summary="This table charts ...">
<caption>Cups of coffee consumed </caption>
<tr>
<th id="header1">Name</th>
<th id="header2">Cups</th>
<th id="header3" abbr="Type">
Type of Coffee</th>
</tr> <tr>
<td headers="header1">T. Sexton</td>
<td headers="header2" align=right>10</td>
<td headers="header3">Espresso</td>
</tr>
.
.
.
24
Accessible Web Apps
8. Use markup for complex tables
(h) Markup shall be used to associate data cells
and header cells for data tables that have two
or more logical levels of row or column
headers.
25
Accessible Web Apps
8. Use markup for complex tables
<tr>
<th></th>
<th id="header2" axis="expenses">Meals</th>
<th id="header3" axis="expenses">Hotels </th>
<td>subtotals</td>
</tr> <tr>
<th id="header6" axis="location">San Jose </th>
. .
.
</tr> <tr>
<td id="header7" axis="date">25-aug-97 </td>
<td headers="header6 header7 header2">37.74
</td>
<td headers="header6 header7 header3">112.00
</td>
<td> </td>
. .
.
</tr> <tr>
<td>subtotals </td>
<td>65.02 </td>
. .
.
26
Accessible Web Apps
9. Title each frame
(i)
Frames shall be titled with text that facilitates
frame identification and navigation.
–
–
27
When users with a non-graphical browser like
Lynx visit a FRAMESET page, they have to select
which frame to open. They must choose the frame
they want from a list of frames.
Meaningful frame titles must be used so that users
can easily identify the frame they want to open.
Accessible Web Apps
9. Title each frame
<frameset rows="80,*" cols="*" . . .
<frame name="Logo" title="WRS Logo" scrolling="NO" src="logo.htm" >
<frameset cols="141,586*" . . . rows="*">
<frame name="Table of Contents" title="Contents" src="toc.htm">
<frame name="Main Document" title="Main" src="main.htm">
</frameset>
</frameset>
<noframes><body . . .>
<!--see next page for details -->
</body></noframes>
</html>
28
Accessible Web Apps
9. Title each frame
<frameset . . .
</frameset>
<noframes><body bgcolor="#FFFFFF">
This page contains three frames.<br>
At the top is our <a href="logo.htm">Company logo.</a><br>
On the left is the <a href="toc.htm">table of contents. </a><br>
The <a href="main.htm">main content</a> is on the right.
</body></noframes>
29
Accessible Web Apps
10. Avoid screen flicker
(j) Pages shall be designed to avoid causing the
screen to flicker with a frequency greater than
2 Hz and lower than 55 Hz.
 Do not use:
–
–
–
–
30
<blink>
<marquee>
Flashing text
Turning graphics on and off
Accessible Web Apps
11. Consider text-only pages
(k) A text-only page, with equivalent information
or functionality, shall be provided to make a
web site comply with the provisions of this part,
when compliance cannot be accomplished in
any other way. The content of the text-only
page shall be updated whenever the primary
page changes.
31
Accessible Web Apps
12. Provide text equivalent for
scripts
(l) When pages utilize scripting languages to
display content, or to create interface
elements, the information provided by the
script shall be identified with functional text that
can be read by assistive technology.
32
Accessible Web Apps
13. Use accessible plug-ins and
applets
(m) When a web page requires that an applet,
plug-in or other application be present on the
client system to interpret page content, the
page must provide a link to a plug-in or applet
that complies with §1194.21(a) through (l).
–
–
33
Macromedia Flash is not accessible
Oracle’s Web Forms applet is (more later)
Accessible Web Apps
14. Design accessible forms
(n) When electronic forms are designed to be
completed on-line, the form shall allow people
using assistive technology to access the
information, field elements, and functionality
required for completion and submission of the
form, including all directions and cues.
34
Accessible Web Apps
14. Design accessible forms

Associate labels with form objects.
<form action= . . . ">
<label for="Name"> Name </label>
<input name="Name" id="Name" size= 45>
<br>
<label for="Address"> Address </label>
<input name="Address" id="Address" size=45>
<br>
. . .
</form>
35
Accessible Web Apps
15. Avoid repetitive navigation links
(o) A method shall be provided that permits users
to skip repetitive navigation links.
<p class="nav">
<a href="#skipnav"><span style="color: #ffffff; background-color:
#ffffff;">[*]</span></a>
[<a href="home.html">Home</a>]
[<a href="new.html">What’s new<a>]
. . . <!— rest of navigation bar options >
</p>
<h4><a name="skipnav" tabindex="1">How to use our site</a></h4>
<!-- content of page -->
36
Accessible Web Apps
16. Alert users to time-outs
(p) When a timed response is required, the user
shall be alerted and given sufficient time to
indicate more time is required.
37
Accessible Web Apps
16. Alert users to time-outs
–
–
–
–
38
Provide a way to enable users to allow timed
instructions to continue without stopping.
Notify users when a process is going to time out and
allow them to indicate whether more time is needed.
Do not have timed responses for important
messages. Display the message until the user
closes it.
For Windows software, the time required for
responses can be tied to settings that the user can
customize through the Control Panel.
Accessible Web Apps
17. Indicate the language of the text

Clearly identify changes in the natural
language of a document’s text and any text
equivalents (e.g., captions).
<html lang="en"> ....
and with a certain <span lang="fr">je ne sais quoi</span>,
she entered both the room, and his life, forever. <q>My name
is Natasha,</q> she said. <q lang="it">Piacere,</q>
he replied in impeccable Italian, locking the door.
. . .
</html>
39
Accessible Web Apps
18. Keep everything updated

40
Ensure that equivalents for dynamic content
are updated when the dynamic content
changes.
Accessible Web Apps
19. KISS

Use the clearest and simplest language
appropriate for a site’s content.
–
–
–
41
Basic rules for good writing apply.
To test your document, try using the Gunning-Fog
reading measure: low score = easy to read.
Use Microsoft Word to give readability score:
Tools --> Options -->
Spelling & Grammar
Accessible Web Apps
20. Provide alternatives to objects

Ensure that pages are usable when scripts,
applets, or other programmatic objects are
turned off or not supported. If this is not
possible, provide equivalent information on an
alternative accessible page.
–
42
Use <noscript>
Accessible Web Apps
Accessibility in Oracle Web Forms



43
Web forms are java-based
Section 508 1194.21 applies
See white paper at
http://www.oracle.com/accessibility/index.html
Accessible Web Apps
Accessibility in Oracle Web Forms

All items should have “speakable prompts”,
which are seen by screen readers
–
–
–
44
Hint Text, Prompt, Label or Tooltip Text (in this order
of precedence)
Keep speakable prompts unique per item
Supply speakable prompts for items with no onscreen labels
Accessible Web Apps
Accessibility in Oracle Web Forms

All functionality must be accessible from the
keyboard
–
–
–
–
45
Define access keys from push buttons
Make the item keyboard navigable
Since iconic items cannot have access keys,
keyboard accessibility must be provided by alternate
means (eg, a pull-down menu)
Navigation between items and between screens
Accessible Web Apps
Accessibility in Oracle Web Forms

Color usage should be under the control of the
user
–
–
46
Use “automatic” color to use either “Oracle” look
and feel or “generic”, which consults the users’ color
display settings
Only the Java runtime engine correctly interprets
automatic color
Accessible Web Apps
Accessibility in Oracle Web Forms

47
Additional tools are provided for Oracle
Applications 11i
Accessible Web Apps
Accessibility of PDF



48
Use the Adobe Acrobat 5.0 “Make Accessible”
plug-in to allow screen readers to read PDF
Use Acrobat Exchange to scan the PDF file
and produce OCR output
Convert the PDF to HTML (link available at:
http://access.adobe.com/simple_form.html)
Accessible Web Apps
References

W3C Web Accessibility Initiative
–
–
–

Section 508
–
49
www.w3c.org/wai/references
HTML 4.0 Accessibility Improvements
WAI Guidelines
http://www.section508.gov/final_text.html (least
amount of bureaucratese)
Accessible Web Apps
Accessibility Compliance Software

Bobby (www.cast.org/bobby)
–

Insight (www.ssbtechnologies.com)
–

analyzes web pages against Section 508 Standards
Web Page Backward Compatibility
Viewer (www.delorie.com/web/wpbcv.html)
–
50
analyzes web pages against the WAI Guidelines
turn off selected features and view the page as
though your browser was not able to interpret them
Accessible Web Apps
51
Accessible Web Apps
Assistive Software (1)

textHELP (www.texthelp.com)
–

ReadPlease (http://www.readplease.com)
–

reads text of web pages and email - freeware with upgrades at
minimal cost
WebHEARit (www.prodworks.com)
–
52
screen reader - enables a PC to read text in any windowsbased application - download a free demo.
enables any Internet Explorer application to “speak” a Web
page’s content and navigational links.
Accessible Web Apps
Assistive Software (2)

JAWS (www.freedomscientific.com)
–

Magic (also from Freedom Scientific)
–
53
Screen reader with Braille support – free, timelimited demo available
Screen magnifier
Accessible Web Apps
About the Authors



54
Leslie Tierstein is a Technical Project Manager
at STR LLC in Fairfax VA. She can be reached
at [email protected].
Hilary Benoit is Director of Quality at W R
Systems, Ltd in Fairfax VA. She can be
reached at [email protected].
This presentation is available on line at:
http://www.strllc.com and
http://www.wrsystems.com
Accessible Web Apps