| At
Cabrillo, about 15% of students have a disability; statistics in the
general population are higher
(19.7% according to the U.S. Census, 1997). That's one person in five!
(Ingel, 2002)
What
are the Legal Mandates?
- ADA
(Americans with Disabilities Act)
- Telecommunications Act
- Section 508 of the Rehabilitation Act - http://www.section508.gov
Company
nondiscrimination policies - http://www.hp.com/hpinfo/abouthp/accessibility
Web Content Accessibility Guides 2.0 [draft] Quick Reference — http://www.w3.org/WAI/WCAG20/quickref/Overview.php?introopt=Y
People
with disabilities use a variety of technologies to access web pages:
- Screen readers for blind computer users
- Screen magnification, for visually impaired users
- Voice recognition software (requires keyboard access without mouse)
- Text-to-speech software
- Text browsers and other specialty browsers
- Switches, trackballs, large print keyboards, etc.
For
the blind user, accessing visually presented information
(images, graphs, videos, charts) is done with software referred to as
"assistive technology".
- Use the "alt"
attribute to describe the function of all images and animations on
a web page. (Under Image Properties in most software programs
that generate HTML). If you write the HTML code yourself, alternative
text is written into the tag shown below:
<img src="imagefilename.gif" alt="text
description of image">
-
Use a client-side
MAP and text for hotspots in image maps. The TAB key moves between
links and image map areas in the order they're defined in the HTML—be sure it generally moves from left to right and top to bottom, but
does not skip back and forth between groups of items. Use TITLE attributes
to name AREA fields in client-side image maps
-
Provide captioning
and transcripts of audio, descriptions of video, and accessible versions
in case inaccessible formats are used.
-
Summarize or
use the longdesc attribute in all graphs and charts. (This attribute
will be available in future browsers)
-
Avoid using scrolling
marquees wherever possible; otherwise, provide an alternative page.
Getting oriented
to a web page's structure
Use headings,
lists and consistent structure. Although the use of graphic bullets
may make the lists difficult to understand. If graphical bullets are
still used, then the Alt tag should be added.
Lists whether ordered (numbered) or unordered (bulleted) are a
good way to display links. Ordered hyperlinks are helpful in that
the numbers give the user another tool for navigation.
- This is an
example of an ordered list
- which uses
- numbers
Don't rely on
specific fonts, colors, or sizes. Use real heading tags not just formatted
text. Don't require a specific window size. Don't assume things will
line up vertically because horizontal distances may change.
Orientation
to the contents of a site using frames
- Avoid using frames. You can use the NOFRAMES
tag to show a link to an alternate page that doesn't use frames.
Problems with
columnar text
- Screen readers
have difficulty reading multiple columns.
- Design tables
that read across from left to right and make sense.
Hyperlink descriptions
- Use text that
makes sense when read out of context. For instance, do not use "click
here."
Scripts, Applets,
and Plug-ins
- Provide alternatives
to all controls and applets Provide an alternate page that uses static
text and graphics for displaying information, and standard links for
input
- Example:
For a search field, provide a tree of indexed links
- Example:
For a form, provide instructions to supply information by phone,
fax, mail, or email
- Example:
For information displayed by an ActiveX control or Java applet,
provide a page displaying the same information as HTML text.
- Use either LABEL
or TITLE tags to associate a name with every control
- ActiveX controls
should use Active Accessibility to be compatible with accessibility
aids.
- Java applets
should use Active Accessibility for Java to be compatible with accessibility
aids
Tables
- Make line by
line reading sensible. Summarize. Avoid using tables for column layout
whenever possible. *Internet Explorer will "decolumnize" for a screen
reader. The information contained within a table is read from left
to right, making it difficult to understand the logic of the information.
This difficulty is compounded when the table cells are not of uniform
size. Sometimes the words run together, making the screen reader spell
out the contents of the line.
For
the low vision user, distinguish between foreground text and background
color or patterns
- Provide clear
contrast between text and background. Background textures are exceedingly
difficult to read. Blue active links on a similar color background
is not good design.
- Different monitors
have different limits on the number of colors they can display. Colorblind
people have difficulty distinguishing colors. Since the presentation
of color depends heavily upon particular browsers and monitors, one
solution is to view your Web design on multiple systems to gauge the
accessibility of your color use. A test for colorblindness acceptability
is to view the page with the color option turned off. If the text
is difficult to read in shades of gray that is a good indication that
the page is probably inaccessible to colorblind visitors.
Recognizing
information communicated only by color cues
- Avoid using color
alone to convey information e.g. color-coded pop-up graphic buttons.
Supply "alt" text tags for buttons.
Getting an overview
of a site's content
- Include a site
map or index link to a site map near the start of the home page.
Accessing information
by the hearing impaired requires that audio components of a web
page be augmented with text scripts or closed captioning
- Create a text
script of the audio file
- Even better,
provide closed captions for all audio content that contains useful
information
Learning Disabilities/Cognitively
Impaired; Reading the web page text
- Site should be
able to handle screen readers and large print display software.
- Focusing on relevant
information by creating clear and elegant pages, which facilitates
information gathering. Always put the navigational icons in the same
location.
- Hyperlink words
which describe the destination of the link. E.g. Click here
for a picture of Beethoven; Click here for a picture of Beethoven.
- The confusion
and frustration experienced by anyone attempting to navigate and use
a poorly designed site will be even greater for students with cognitive
disabilities.
- Include only
3 to 5 important pieces of information on each web page. (research
has confirmed this!)
- Use simple shapes
and unambiguous navigational icons which are always in the same locations
on each web page.
Physical Disabilities
require accessing web pages with keyboard commands.
- Test page using
keyboard commands only. Web access is managed entirely with assistive
computer technologies.
Technological
Diversity
Finding a common
ground between network access speed, graphics and multimedia capability
and access for persons with disabilities.
- Market research
says you have between 7-10 seconds to get something up on that screen
before you loose your viewer to confusion and/or boredom. The target
range modem speed to design for now is between 56k.
- Information icons
which are culturally specific may not provide a consistent message
to a diverse and global audience. E.g. an image of a turtle may mean
slow or wisdom, depending on the culture.
- High energy animations,
digital movies, stereo sound and Java applets are exciting only if
users have the hardware, software and network access speed to enjoy
them.
Validate
and Test
•Use validation tools such as Wave 4.0 Accessibility Tool http://wave.webaim.org/index.jsp
•Use human testers, and good judgment
Be Knowledgeable
Look for
accessibility features in new versions of authoring software
Listen
to Feedback
- No one is perfect, no one can think of everything—respond
to requests and make necessary changes
- Remember that you are lucky to get this feedback—usually
your website visitors just get frustrated, go elsewhere, or (increasingly!)
sue for compliance.
|