Transcript Slide 1

Accessible Web Design:
Background
Topics
•
•
•
•
Who benefits from accessible web design?
Policy and law
Why make sites accessible?
How do people with disabilities access the
web?
Who benefits from accessible
Web sites?
• People with disabilities
• Our aging population
• People using a wide range of technologies
Disability As a Function of Age
Source: U.S. Census Bureau Report on Americans with Disabilities: 1994-95, P70-61 (August 1997)
Based on Survey of Income and Program Participation, Oct. 1994-Jan. 1995
Disability As a Function of Age
7%
© 2001 Trace R&D Center, University of Wisconsin
Disability As a Function of Age
9%
© 2001 Trace R&D Center, University of Wisconsin
Disability As a Function of Age
15%
© 2001 Trace R&D Center, University of Wisconsin
Disability As a Function of Age
20%
© 2001 Trace R&D Center, University of Wisconsin
Disability As a Function of Age
29%
Disability As a Function of Age
37%
Disability As a Function of Age
59%
Our Aging Population
• In 2010, the majority of the US population
will be 45 years and older
Brian Basset, Cartoonist and creator of syndicated cartoon Adam@Home
Accessible Web Pages - Who benefits?
• People with disabilities
– Blind or visually impaired
– Mobility impairments
– Deaf or hearing impaired
– Cognitive disabilities (reading difficulties)
• People with slow Internet connection
• People using PDAs, phones or other mobile devices, or older
equipment to view the web
• People whose primary language is not English
• Older people and Seniors
• People who are color blind
In short ….
Who benefits?
EVERYONE
Federal laws and Accessible IT
ADA & Section 504 of the Rehabilitation Act
– Establishes the rights of individuals to equal access - Right
to an accommodation if needed to achieve equal access
Section 508 of the Rehabilitation Act
– Establishes standards for development, procurement,
maintenance and use of accessible IT by federal agencies &
their employees
NYS Policies
New York State's Official Policy/Standards
NYS Statewide Technology Policy P08-005
"Accessibility of Web-Based Information and Applications”
http://www.cio.ny.gov/Policy/NYS-P08-005.pdf
Standards/Guidelines for
Accessibility
Section 508 of the Rehabilitation Act
– www.section508.gov
Web Content Accessibility Guidelines (WCAG v1.0)
– http://www.w3.org/WAI/
– Priority 1, 2 and 3 checkpoints
• Priority 1 - MUST DO
• Priority 2 - SHOULD DO
• Priority 3 - MAY DO
– Version 2 in final draft form
– NYS Statewide Technology Policy P08-005
How do People with Disabilities
Access the Web?
 Blind and visually impaired
 Color blind
 Deaf and hearing impaired
 Mobility impairments
 Learning disabilities
Blindness
Users:
• Do not use a mouse
• May use a screen reader to listen to the
content
• May use a refreshable Braille display
Design considerations:
•
•
•
•
Images, photos and graphics are unusable
Colors are unusable
Navigation may be difficult / confusing
All content must be accessible from the
keyboard
Blindness
Accessible Design Techniques
• Provide text description for all meaningful images and
photos (“alt” text attributes – e.g. alt=“Photo of … ”)
• Provide an option to skip repetitive navigation
• Ensure keyboard accessibility
• Use meaningful link text (“Class schedule” rather than
“click here”)
• Use proper, semantic markup (titles, header tags, etc.)
• Don’t write scripts that require mouse usage
Low Vision
Users:
May use screen magnification
software
Design Considerations:
Images, photos and graphics may
become unusable when enlarged
Navigation may be difficult /
confusing
Low Vision: Common causes
Cataracts
Glaucoma
Low Vision: Common causes
Macular Degeneration
Retinopathy
Magnified graphical text
Low Vision
Accessible Design Techniques
• Limit or eliminate text within graphics
• Have plenty of contrast
• Use relative rather than absolute font sizes
Color Blindness
Users:
• Approximately 8-10% of the male population and about
0.5% of the female population experiences some form of
color deficiency
Design Considerations:
• Reds and greens are often indistinguishable
• Other colors may be indistinguishable
Color Blindness
Map of Hurricane Isabel (with color)
Color Blindness: simulation
Map of Hurricane Isabel (with red/green colorblindness)
Simulated using Vischek (http://www.vischeck.com/vischeck/vischeckURL.php )
Color Blindness: simulation
Color Blindness
Accessible Design Techniques
Do not use color alone to convey content
– Use additional cues or information to convey content
The flights listed below in RED
have been cancelled.
The flights in GREEN are
departing on time.
Delta 1342
United 320
American Airlines 787
Southwest 2390
The flights listed below that have been
cancelled are indicated in RED and by
an asterisk.
The flights in GREEN are departing on
time.
Delta 1342 *
United 320
American Airlines 787
Southwest 2390 *
Mobility Impairments
Users:
 May use only the keyboard for navigation
 May tire quickly
 May not have fine motor control
Design Considerations:
 All content must be accessible from the keyboard
 Surfing through large or lengthy navigation blocks may
cause fatigue; make sure 'skip navigation' link is visible
 Small links are difficult to select
Mobility Impairments: Assistive
Technology
Head wand
Adaptive Keyboard
Mouth stick
Mobility Impairments
Accessible Design Techniques
• Ensure that the page is keyboard accessible
• Do not require fine motor control (free of moving links or
very small links)
• Provide a way to skip over long lists of links and other
lengthy content (visible skip navigation link)
Deaf or Hard of Hearing
Users:
• Do not use audio features alone to convey information
Design Considerations:
• Video clips that include audio-only are unusable. If included,
clips should be captioned.
• Audio clips are unusable. If included, provide a transcript.
Deafness
Accessible Design Techniques
• Provide transcripts for all audio content
• Provide synchronized captions for all video content (e.g.
MAGpie - free captioning tool)
• Many people benefit





Students in library w/o headset
People with learning disabilities
People for whom English is not their primary language
People in a noisy environment
Everyone (content is presented in >1 medium)
Cognitive Disabilities
Users:
• May have difficulty focusing on or comprehending lengthy
sections of text
• Complex layouts or inconsistent navigational schemes may be
confusing
• May need content in >1 form
Design Considerations:
• Animated images may be distracting
• Complex layouts may lead to confusion
• Text-only content may be limiting
Cognitive Disabilities:
Accessible Design Techniques
•
•
•
•
•
Simplify the layout as much as possible
Provide clear and consistent site navigation
Organize information into manageable “chunks”
Logically organize your site and individual documents
Use icons, illustrations, arrows, audio, video or other
multimedia to enhance understanding
Web Accessibility:
Designing for Everyone
People using:
People who:
•
•
•
•
•
•
• are deaf or hard of hearing
• are blind or visually impaired
(e.g. low vision, color blind)
• can’t use a mouse
• possess differences in
attention/perception
different web browsers
different screen resolutions
phone web services
handheld display units
car computing systems
screen readers
To Learn More
Forum IT Accessibility Curriculum and Resources
 http://www.nysforum.org/accessibility/resources/
WebAIM (Web Accessibility in Mind)
 http://www.webaim.org
EASI (Equal Access to Software and Information)
 http://people.rit.edu/easi/
NCAM (National Center for Accessible Media), WGBH
 http://ncam.wgbh.org/
AccessIT (National Center on Accessible Information Technology
in Education)
 http://www.washington.edu/accessit
Accessible Web Design:
Background
THE END
Revised 2010