How Do I Design
An Accessible Web Site?
Presented by
Paul Tang - Applications Specialist II Alternate Media
Irvine Valley College
1
Presentation Objectives
 What is Web accessibility?
 What are the accessibility barriers?
 What are the demographics on student disability?
 Why is accessibility a legal requirement?
 Who needs accessibility?
 What is universal Web design?
 How do I design for Web access?
 What is multimedia?
 How do I design for media access?
Web Access Symbol
 Summary
(for people with disabilities)
2
What Is Web Accessibility?
“The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, W3C
An “accessible Web site” will successfully communicate
its information to anyone despite physical, sensory and
cognitive disabilities.
Student in wheel
chair at computer
3
What Are The Accessibility
Barriers?
 Visual – Blindness, color blindness, tunnel vision, etc.
 Audio – Deaf, impaired hearing, no soundcard/speakers, and
poor quality of recording.
 Motor - Can’t use mouse; individuals with a more severe
physical impairment may need to have a special keyboard that
can be operated by speech, head pointing or eye gaze.
 Learning or Cognitive – Need consistent navigation structure,
flickering, moving or complicated designs can cause problems.
4
What Are The Demographics
On Student Disability?
In 1997, more than 1.4 million
students were enrolled in
California Community Colleges
College entrance
 5% (70,000) of these students had disabilities
By the year 2007, “Tidal Wave II” will have
brought 350,000 additional students to our colleges
 10% (35,000) of these students will have disabilities
5
Why Is Accessibility A
Legal Requirement?
Laws
Title II ADA
Applications
Public entities
Section 504 - Anyone
Rehab. Act
receiving
(guidelines)
federal funds
Mandates
Prohibits discrimination as well
as making programs accessible
to individuals with disabilities
Opportunity for the disabled to
participate must be as effective
as that provided to others for
programs and services
6
Why Is Accessibility A
Legal Requirement?
Laws
Section 508 Rehab. Act
(standards)
Applications
States receiving federal funds
under the “Assistive
Technology Act State Grant
Program”
SB 105 Anyone receiving California
CA state law state funds must comply with
Section 508
Title 5 Anyone receiving California
CA Code Of state funds
Regulations
Mandates
Provide the disabled
access to electronic
and information
technology (EIT)
Provide the disabled
access to EIT
Distance education
courses must be
accessible to people
with disabilities 7
What Is Electronic And
Information Technology?
In Section 508, electronic and information
technology (EIT) is defined to include:
 Information technology and any equipment or
interconnected system or subsystem of
equipment, that is used in the creation,
conversion, or duplication of data or
information.
Section 508 scroll
8
What Is Electronic And
Information Technology?
EIT includes, but is not limited to, such
things as:
 Computer hardware
 OS and Software
 Multimedia
 Video
 Networks
 Telecommunication
devices
 Information kiosk
 Web sites
 Copiers
 Fax machines
 Peripherals
9
Who Benefits From Section 508?
Everyone benefits from the accessibility
of electronic and information technology.
Voice activated cell
phones help users who
are blind and people
who are driving while
using their phones.
Driver using cell phone
10
Who Benefits From Section 508?
 Making a site accessible to
people with low vision will
also benefit people who use
PDAs or other devices with
small screens
 Closed captioned TV
allows the deaf and sport
fans in a noisy bar to stay
informed about the game
they are watching
Personal Digital Assistant
Fans watching hockey
11
Who Needs Web Accessibility?
Computer Users
 Blind and visually
impaired
 Deaf and hard of
hearing
 Physically and
motor impaired
 Learning disabled
Motor impaired student using a
voice recognition software
12
How Is Your Course Content
Perceived by Others?
 Perception takes place
through one or more
of our five senses:





Sight
Hearing
Touch
Smell
Taste
 Neither smell nor taste are
of much use for Web
browsing but sight,
hearing and touch are the
modes of perception.
Touch
Sight
Hearing
13
How Is Your Course Content
Perceived by Others?
Individuals without sight usually rely on their
hearing to access Web content using screen
readers.
Those without hearing need to rely on their sight.
Those who can neither see nor hear often rely on
Braille devices to access Web content so their
mode of perception is touch.
14
Is Your Course Content
Web Accessible?
Without equal access to technology,
members of our society who have
disabilities are greatly disadvantaged.
Computer
access
The ability to access and use computers and
other technologies has become essential to
virtually every aspect of academic and
professional life.
15
What Is Assistive Technology?
Assistive technology is a piece of equipment or
a software product that is used to increase,
maintain, or assist the functional capabilities of
individuals with disabilities.
Assistive technologies includes the following:
 Screen readers
• Used by people who are blind
• Makes on-screen information available as
– Synthesized speech (JAWS - Job Access With Speech) or
– Refreshable Braille display (Duxbury Braille Translator)
16
What Is Assistive Technology?
 Voice recognition software
• Assists people who have difficulty using a mouse
or keyboard
– Dragon Naturally Speaking
 Magnification software
• Helps people with low vision
– ZoomText Xtra
 Alternative keyboards and mice
• Used by people who are unable to use a standard
keyboard or mice
17
What Is Universal Web Design?
It is a style of Web development which seeks
to create Web sites which are accessible to
the broadest audience possible.
Networking of computers
around the globe
18
What Does Universal Design Do?
Universal design seeks to create Web pages at
the point where assistive technologies and
Web based innovation intersect.
19
Web Design Overview
Identify target population
Define page content
Design Web site presentation
 Intuitive site navigation
Computer user
 Clearly worded text
 Consistent and simple design layout
 Content appropriate and meaningful to the audience
Implement Web site
20
Designing For Low Vision
People with low vision may have any one
of a number of problems with their vision
 Poor acuity (blurred or fogged vision)
 Loss of all central vision (only see with
edges of their eyes)
Adult reading with
a magnifying glass
21
Designing For Low Vision
People with low vision (continued)
 Extreme far-sightedness or near-sightedness
 Tunnel vision (like looking through a tube or
soda straw)
 Loss of vision in different parts of their visual
field as well as other problems (glare and
night blindness)
22
Designing For Low Vision
Solutions to accessibility:
 Allow the user to zoom in to view portions of
the screen in more detail
 Allow the user to adjust the fonts, colors and
cursors used in your program to make them
more visible
 Use a high contrast between text and
background
23
Designing For Low Vision
Solutions to accessibility:
 Do not place text over a patterned background
where the two might interfere with each other
Can you read this?
24
Designing For Low Vision
Solutions to accessibility:
 Use a consistent or predictable layout for
screens and dialogs within the program
 Use good color contrast
• Red text on brown background
(bad color contrast)
Bad
Contrast
25
Designing For Color Blindness
Color blindness is
more common in
men and rare in
women
Most color blind
people have a
deficiency with
either red or green
Image of red and green apples
26
Designing For Color Blindness
Solutions to accessibility:
Image of red and green apples
 Use either light text on a
dark background or dark
text on a light background
 Make sure that there is
sufficient contrast
 Avoid using red and green
colors because they are
often indistinguishable
View of apples by the color-blind: green
27
Designing For The Blind
Access by people who are blind is
usually accomplished using special
screen reading software to access and
read the contents of the screen, which
is then sent to a voice synthesizer
(JAWS) or dynamic Braille display.
Speaking
computer
28
Designing For The Blind
Solutions to accessibility:
 Use consistent or predictable screen and
dialog layouts
 Use single column text whenever possible
 Make line-by-line reading in tables sensible
• Associate table headers with table cells
29
Designing For The Blind
Example – Accessible Data Table
Coffee Consumption by California Senators
Name
Cups
Types
Sugar?
D. Feinstein
4
Espresso
No
B. Boxer
6
Decaf
Yes
Text read aloud using JAWS
Name: D. Feinstein, Cups: 4, Types: Espresso, Sugar: No
Name: B. Boxer, Cups: 6, Types: Decaf, Sugar: Yes
30
Designing For The Blind
Solutions to accessibility:
 Provide text alternatives for all visual
information
• Graphics have Alt tags – text descriptions of
images
Graduation cap
31
Designing For The Blind
Solutions to accessibility:
 All text should be available as e-text to allow
a screen reader program to read aloud
through a voice synthesizer (e.g. JAWS)
 Use hyperlinks with descriptive text
• Click here for a picture of Tom Cruise
(bad design)
• Click here for a picture of Tom Cruise
(good design)
32
Designing For The Blind
Solutions to accessibility:
 Avoid frames but, if used, include title that helps
understand the frames purpose
• Title = “Navigation Frame”; Title = “Content Frame”
Best Practices
Web Accessibility
Web Accessibility
Courseware Accessibility
Adaptive Technology
Emerging Technology
Web Accessibility Resources
Note: If a browser does not support frames, use the
NOFRAMES alternative to provide a link to a non-frame
33
version of the same content.
Designing For The Blind
Solutions to accessibility:
 Provide alternate means of accessing equivalent
content for scripts, applets and plug-ins with
hypertext links in case active features are inaccessible
• Scripts – Macro commands, e.g. Salary Calculator
• Applets – Small executable applications, e.g. 3-D Clock
• Plug-Ins – Modules extending Web browser capability,
e.g. Adobe Acrobat Reader - PDF (Portable Document
Format) files
34
Designing For The Deaf
People who are deaf will not be able to hear
sound at all.
Other people who have hearing impairments may
be able to hear some sound but may not be able
to distinguish words.
People who are deaf or with hearing impairments
need to get visual signals for all information
otherwise conveyed by sound.
Hard of hearing person
35
Designing For The Deaf
Solutions to accessibility:
 An individual with a mild to moderate hearing
impairment may just need a mechanism to
increase the volume – assistive listening
devices.
 An individual with a severe hearing
impairment or who is deaf may need to have
auditory/video information presented in some
visual form – text transcript or closed caption.
36
Designing For The Deaf
Solutions to accessibility:
 Provide all auditory information in a visual
form using text transcripts.
Text transcript – Zoot Suit Fashion
 Provide a link to a text transcript for audio clips –
e-text file or HTML file
37
Designing For The Deaf
Solutions to accessibility:

 Have a mode of operation that will work in
noisy environments or if sound is turned off.
 Use closed or open caption for digital video
clips
Example: Blackboard Tour
www.ivc.edu/academics/de/sbc
38
Designing For The Motor Impaired
Types of physical impairments:
 Loss of limbs or digits
 Repetitive stress injury
 Arthritis
 Stroke and head injury
 Parkinson's disease
 Cerebral Palsy
 Muscular Dystrophy
Office worker using cell
phone in wheel chair
39
Designing For The Motor Impaired
Solutions to accessibility
 An individual with a mild physical impairment
• May just need to have the behavior of the keyboard
and mouse changed slightly in order for them to be
able to effectively use the computer.
 An individual with a more severe physical
impairment
• May need to have a special keyboard that can be
operated by speech, head pointing or eye gaze.
40
Designing For The Motor Impaired
Solutions to accessibility:
 Use of “hot keys” or keyboard commands
allows the physical or motor impaired access
to Distance Education courses when the user
can’t use the mouse
• TAB, SHIFT + TAB, and ENTER keys to navigate pages
 Avoid timed responses (less than 5-8 sec.) or
allow for the response time to be changed
41
Designing For
The Learning Disabled
Types of learning disabilities
 Mental Retardation
 Language and Learning Disabilities
 Dyslexia
 Short Term Memory
 Dementia
Learning disabled
student
42
Designing For
The Learning Disabled
Solutions to accessibility:
 Make sure the user is alerted and given sufficient
time to indicate more time when a timed response is
required
 Make sure that all messages and alerts stay on screen
until they are dismissed by the user
 Make language as simple and straightforward as
possible, both on screen and in any handouts
 Use simple and consistent screen layouts
43
Designing For
The Learning Disabled
Solutions to accessibility:
 Keep pages clear, concise and scannable
 Ensure well-structured pages with good site
navigation
 Use graphics to enhance the understandability of the
content
 Eliminate graphics that distract from the main content
Irrelevant image
44
Designing For
The Learning Disabled
Solutions to accessibility:
 Avoid blinking, moving or flickering content
• Internet Explorer and Netscape Navigator do not
allow users to control flickering or blinking
• Information that is shown or conveyed through
blinking, flickering, or movement may cause
seizures in users with photosensitive epilepsy
Marquee –
moving lights
45
What Is Multimedia?
Multimedia is the use of computers to present
text, graphics, video, animation, and sound in
an integrated way.
Student using computer
46
Designing For Media Access
Accessible PowerPoint Presentations
 Use text descriptions on all graphics and photos
Palm trees overlooking ocean in Hawaii
 Save PowerPoint slide as Web page - HTML
format
47
Designing For Media Access
Accessible Web Videos
 Use synchronized captions in streaming videos or
 Provide text transcripts to make content accessible
Accessible PDF (Portable Document Format) Files
 Visit http://access.adobe.com and download Acrobat
Reader 6.0 with accessibility features
 Use JAWS or Window-Eyes to read PDF files
48
Designing For Media Access
Accessible Flash Animation
 Flash MX allows for media accessibility
• Flash MX allows designers to create accessible.
animation, interactive Web features and movies.
• MAGpie (Media Access Generator) allows closed
captioning of Flash animations.
• Use Window-Eyes 4.2 to read Flash animation.
 Flash MX demonstration – Zoot Suit Culture
http://www.pbs.org/wgbh/amex/zoot/eng_sfeature/sf_zoot_mx.html.
49
Summary
By providing Web accessibility for disabled
students, you and Irvine Valley College will be in
compliance with Section 508 of the Rehabilitation
Act.
 Provide disabled students access to
electronic and information technology
to achieve academic and career success
Graduating student
in wheel chair
50
Acknowledgement Of Sources
High Tech Center Training Unit
University of Bath
WebAIM (Accessibility In Mind)
National Center for Accessible Media
University of Wisconsin - Trace R & D Center
California State University, Northridge Disability Conference
California State University, Fresno - Videos
51