Transcript Insuring That Your Web Communications Are Usable by

Ensuring That Your
Web Communications
Are Usable By All Audiences
DBTAC – Northeast ADA Center
Sharon Trerise
Coordinator of Accessible IT
[email protected]
Employment and Disability Institute
1
www.edi.cornell.edu
Northeast ADA & IT Center
• 10 regional centers in US
• Funded by National Institute on Disability and
Rehabilitation Research, US Dept. of Education
• Focus on 2 areas:
– Americans with Disabilities Act
– Accessible Information Technology in Education
• 800-949-4232, [email protected]
• www.northeastada.org
2
Topics
•
•
•
•
Legislation effecting college web sites
How do people with disabilities access the web
Web Accessibility Project with Community Colleges
Web Access Toolkit
3
Your Web Audience
•
•
•
•
•
•
•
Students
Faculty
Staff
Alumni
Parents
Community
World
4
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
5
9.5%
© 2001 Trace R&D Center, University of Wisconsin
6
10%
© 2001 Trace R&D Center, University of Wisconsin
7
14%
© 2001 Trace R&D Center, University of Wisconsin
8
21%
© 2001 Trace R&D Center, University of Wisconsin
9
34%
© 2001 Trace R&D Center, University of Wisconsin
10
42%
© 2001 Trace R&D Center, University of Wisconsin
11
64%
© 2001 Trace R&D Center, University of Wisconsin
12
Continuing Education & 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
13
Students with Disabilities
• Increasing percent of students in K12 &
postsecondary education are disabled (~11%,
higher in Community Colleges)
• Students with cognitive (learning) disabilities
makes up the largest percentage of students
with disabilities
14
Accessible Web Design - Who benefits?
• People with disabilities
• People with slow internet connection
• People using PDAs, phones or other mobile
devices,
• People using older equipment to view the web
• People whose primary language is not English
• Seniors
• People who are color blind
15
Who benefits?
EVERYONE
16
Legal considerations – Federal*
• Americans with Disabilities Act (ADA) & Section 504
of Rehabilitation Act of 1973
– Prohibit discriminating against individuals with disabilities
• Office for Civil Rights (OCR)
– Institutions that use the internet for communication regarding
programs, goods and services must make that information
accessible;
– must “effectively communicate” with individuals with
disabilities including students, faculty, staff & the wider
community
17
State Legislation
• New York State's Official Policy/Standards
"Accessibility of State Agency Web-based
Intranet and Internet Information and
Applications"
– NYS Statewide Technology Policy P04-002
http://www.oft.state.ny.us/policy/p04-002/index.htm
– NYS Mandatory Technology Standard S04-001
http://www.oft.state.ny.us/policy/s04-001/index.htm
18
Standards / Guidelines
• Section 508 of the Rehabilitation Act
– http://www.section508.gov/index.cfm?FuseAction=
Content&ID=12
• World Wide Web Consortium (W3C)
– Version 1: http://www.w3.org/TR/WCAG10/
– Version 2 draft released in March 2004:
(http://www.w3.org/TR/2004/WD-WCAG2020040311/)
19
How do People with Disabilities
Access the Web?
•
•
•
•
•
Blind and visually impaired
Color blind
Deaf and hearing impaired
Mobility impairments
Learning disabilities
20
Blindness
• Do not use a mouse
• May use a screen
reader to listen to the
content
• May use a refreshable
Braille display
Images, photos and
graphics are unusable
Colors are unusable
Navigation may be
difficult / confusing
All content must be
accessible from the
keyboard
21
Blindness: Simulation
• Completely inaccessible
• Less accessible
• More accessible
22
Blindness: Accessible Design Techniques
• Provide text description for all images & photos (“alt”
tags)
• Provide an option to skip navigation
• Ensure keyboard accessibility
• Use meaningful links (“Class schedule” rather than
“click here”)
• Use proper HTML (header tags, etc.)
• Don’t write scripts that require mouse usage
23
Low Vision
• Use screen
magnification
software
Images, photos and
graphics may become
unusable when enlarged
Navigation may be
difficult / confusing
24
Low Vision: Common causes
• Cataracts
• Glaucoma
25
Low Vision: Common causes
• Macular Degeneration
• Retinopathy
26
Low Vision: Simulation
27
Low Vision: Simulation
• Text in graphics
– Less accessible
– More accessible
• Poor contrast
– Less accessible
28
Low Vision: Accessible Design Techniques
• Limit or eliminate text
within graphics
• Have plenty of contrast
• Use relative rather than
absolute font sizes
29
Color Blindness
• Approximately 8-10% of the
male population and about
0.5% of the female population
experiences some form of
color deficiency
• Cell phone, PDA and
text browser users may
not have color
Reds & greens are
often indistinguishable
Other colors may be
indistinguishable
30
Color Blindness: Simulation
Map of Hurricane Isabel (with color)
31
Color Blindness: Simulation
Map of Hurricane Isabel (with red/green colorblindness)
Simulated using Vischek (http://www.vischeck.com/vischeck/vischeckURL.php 32)
Color Blindness: Simulation
Subway map
33
Simulation
• Using color for important meaning
– Less Accessible
34
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*
35
Mobility Impairments
• May use only the
keyboard for
navigation
• May tire quickly
• May not have fine
motor control
All content must be
accessible from the
keyboard
Lengthy navigation
may cause fatigue
Small links are
difficult to select
36
Mobility Impairments: Assistive Technology
• Head wand
• Mouth stick
• Adaptive Keyboard
37
Simulation
• Navigation not accessible from keyboard
– Less Accessible
– More Accessible
• No way to skip over lengthy navigation
– Less Accessible
– More Accessible
38
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 &
other lengthy content (visible skip navigation
link)
39
Deaf and Hard of Hearing
• Audio is unusable
Video clips that include
audio are unusable
Audio clips are
unusable
40
Simulation
• Not Accessible
• Accessible
41
Deafness: Accessible Design Techniques
• Provide transcripts for all audio content
• Provide synchronized captions for all video
content
– MAGpie – free captioning tool from WGBH
– HiCaption from HiSoftware
42
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
Animated
images may be
distracting
Complex layouts
may lead to
confusion
Text-only content
may be limiting
43
Cognitive Impairments: Example
• Complex layouts:
– http://www.ipc.at/
– www.msnbc.com
• Moving content: http://www.ohsu.edu/
• Too much text: http://www.pissd.com/
• Usability testing example:
http://www.gatewaycc.edu/
44
Cognitive Disability: 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
45
PowerPoint on the web
• PowerPoint is not a web-friendly format
• How to convert to accessible HTML
– Copy the outline to an HTML page & format by hand
– Use HTML slide program such as WimpyPoint or Slidemaker
or OperaShow
– PowerPoint Add-on (Windows only)
• University of Illinois: Office Accessibility Wizard
(www.rehab.uiuc.edu/office/download.html)
– Use LecShare, Inc. to convert slides to accessible web
format
46
PDF (Portable Document Format)
• Adobe Acrobat Reader Full Version 6.0 or
newer
• If document was not created with accessibility
in mind, it will still pose significant
accessibility challenges to blind users
(images w/o alt text, no headings, etc.)
47
PDF
The most reliable way to make a
PDF file accessible
is to convert it to
accessible HTML.
48
Accessible PDF
• PDF files must be created with accessibility in
mind
– Use heading styles
– Add text description for all graphics
– Use bulleted or numbered list feature
• Document must:
– Contain real text (not scanned image)
– Be in Tagged PDF format*
– Be marked up for accessibility*
49
Web Accessibility in Community
Colleges Project
• 3 Phases
– Survey head of Student Services at CC’s
– Evaluate a sample of CC websites
– Develop a web accessibility toolkit
50
Percent Offering Online Services
Online Classes
93.7
Class Schedule
94.8
Course Catalog
52.4
Bursar Billing
68.9
Course Registration
81
Financial Aid
87.4
Admissions Application
86.7
0
20
40
60
80
100
51
Requirements
regarding web
accessibility
Guidelines governing
web design
100%
100%
90%
90%
80%
71%
80%
70%
70%
60%
60%
50%
50%
40%
40%
30%
30%
14%
50%
29%
19%
14%
20%
20%
10%
10%
0%
0%
Yes
No
Don't know
Sample = 701 Community Colleges
52
What do the web accessibility requirements cover?
All Web Pages
82%
• Of the 50% who have web accessibility requirements,
–
–
–
84% of policies cover student services pages
66% of policies cover individual department/ faculty pages
75% cover online course content including distance learning
courses
Student Services
84%
– 82% cover ALL college web pages
• POINT: More directly under control of central administration
Distance
(webmaster), more likely to be covered by web policy; as
75%
opposed to under control of departments or individual
Learning
faculty
Dept / Faculty
Pages
66%
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100
%
53
Website Evaluations
• 30 Community College sites
• Range of size and location
• 4 tasks + home page
–
–
–
–
–
Home page
Disability services
Class schedules
Admissions application
Financial aid
54
Manual 508 Evaluation: Process
• Code-level evaluation
• Each standard rated 1 through 3
Manual 508 Evaluation: Results
• <1% of pages met all Section 508 standards
that were applicable to that page
55
Checkpoint
(# pages included)
508 Manual Check Results
(% of all relevant sets of pages n=150)
No Implimentation - significant barrier
a) Images (n=136)
35
b) Multimedia (n=0)
c) Color (n=142)
Partial Implimentation
42
23
NA
4
96
d) CSS (n=132) 12
97
e) Image maps: Redundant Links (n=0)
NA
f) Client-side image maps provided (n=0)
NA
g) Data table Headers (n=6)
100
NA
h) Logical Level Headers (n=0)
i) Frames (n=4)
j) Flickering (n=137)
Full Implimentation
100
4
k) Text-Only (n=5)
96
20
80
l) Scripts -- Asst. Tech Equivalent (n=60)
87
5
m) Scripts - Link to accessible version (n=11)
8
100
n) Forms (n=78)
91
4
o) Skip Nav Links (n=136)
97
p) Timed Response (n=1)
100
0%
10%
20%
30%
40%
50%
5
3
60%
70%
80%
90%
100%
56
Survey*:
50% of institutions with
Web Accessibility Requirements
Website Evaluations**:
<1% Web Pages met
Section 508 Web Accessibility
Standards
*N = 701 community colleges
**N = 150 web pages from 30 community college websites
57
Barriers to implementation
Lack of
support from
administration
Costs &
Staffing
Lack of knowledge /
training
•
•
•
•
•
•
•
•
Costs
Staffing
Training
Technical
support
Awareness
Attitude
Administrat
ive support
Faculty
Involveme
nt
Attitude;
Disregard
Lack of
awareness
Lack of Faculty
Involvement
Lack of
technical
support
58
Toolkit: www.webaccesstoolkit.org
• Designed for administrators and department
leaders
• Involve stakeholders from many areas of
campus
• Make the standards “real” (user perspective)
• Provide resources for technical knowledge
and training
59
Designing with Accessibility in Mind
Incorporate accessibility
considerations in design
rather than retrofit
– Less expensive
– More accessible for everyone
60
Web Accessibility:
Designing for Everyone
•
•
•
•
•
•
•
•
•
•
People using different web browsers
People using different screen resolutions
People using phone web services
People using handheld display units
People using car computing systems
People using screen readers
People who are deaf or hard of hearing
People who can’t use a mouse
People who are color blind
People with differences in attention/perception
61
To Learn More (handout)
• WebAIM (Web Accessibility in Mind)
– www.webaim.org
• EASI (Equal Access to Software and Information)
– www.rit.edu/~easi
• NCAM (National Center for Accessible Media), WGBH
– http://ncam.wgbh.org/index.html
• AccessIT (National Center on Accessible Information
Technology in Education)
– http://www.washington.edu/accessit
62
Sharon Trerise
[email protected]
DBTAC – Northeast ADA Center
Employment and Disability Institute
Cornell University
School of Industrial and Labor Relations
201 ILR Extension Building
Ithaca, New York 14853
tel. 607.255.6751
www.northeastada.org
63