Transcript Web Accessibility Assessment for Everyone

Web Accessibility Assessment for
Everyone
The Disability Resource Center
The Disability Resource Center
I believe in bicycles
I believe in riding my bike to the store,
riding to work, riding for fun, fitness and adventure Road bikes, mountain bikes, single-speeds, you name it.
As long as it has two wheels and a human motor, I'm on it.
And I truly believe, deep down in my easily misdirected soul,
that the world would be a better place if
more people rode bicycles.
- Don Cuerdon
The Disability Resource Center
Web accessibility
issues are often invisible
The Disability Resource Center
Categories of disabilities
Learning disabilities
Deaf and hard of hearing
Vision impaired and blind
Mobility impaired
The Disability Resource Center
Impacts of disabilities
Learning disabilities – reading challenges
Hearing impaired and Deaf – no speakers
Vision impaired and blindness – no monitor and mouse
Mobility impaired – no mouse
The Disability Resource Center
Elements of accessibility
•
•
•
•
•
Structure
Styling (font, color, spacing)
Images
Media
Keyboard navigation
The Disability Resource Center
Web accessibility standards
• Web Content Accessibility Guidelines (WCAG) 2.0 AA
• Section 508
The Disability Resource Center
Web accessibility evaluation
• WebAIM’s WCAG 2.0 checklist
• A11yproject.com checklist
• IBM web accessibility checklist
The Disability Resource Center
Web accessibility evaluation process
•
•
•
•
•
•
Perform both manual and automated checks
Structure and keyboard navigation
Images and links
Color contrast
Media
Forms
The Disability Resource Center
Web accessibility checking software
Comprehensive checkers
• WAVE Firefox toolbar and WAVE online service
• AInspector Sidebar Firefox extension
• W15y Quick Check
The Disability Resource Center
Web accessibility checking software
Automated tools
• Functional Accessibility Evaluator
• SiteImprove – from SiteImprove
The Disability Resource Center
Web accessibility checking software
ARIA roles and color contrast
• Juicy Studio color contrast checker
• WCAG contrast checker
• AInspector Sidebar Firefox extension
The Disability Resource Center
Web accessibility checking software
Screen readers
•
•
•
•
ChromeVox Screen Reader
NVDA – free screenreader
JAWS – screen reader
VoiceOver – Mac built in screen reader
The Disability Resource Center
Web accessibility checking
Additional checks
• Use only the tab key, space bar and the Enter key on
your keyboard.
• Use screen magnification
• Use browser based text magnification
• Use Speech to Text software (Dragon Naturally
Speaking)
The Disability Resource Center
Web accessibility checking
Usability testing
• An accessible web page or application may not be
functionally accessible.
• Use people with disabilities to test your website.
The Disability Resource Center
Example of using WAVE Toolbar
z.umn.edu/scansample
•
•
•
•
•
Issues
Requires manual checking
Image alt tags
Outline
ARIA roles
The Disability Resource Center
Example of using AInspector
z.umn.edu/scansample
•
•
•
•
•
Issues
Requires manual checking
Image alt tags
Outline
ARIA roles
The Disability Resource Center
Example of using W15yQC
z.umn.edu/scansample
•
•
•
•
•
Issues
Requires manual checking
Image alt tags
Outline
ARIA roles
The Disability Resource Center
WCAG Good / Bad example
z.umn.edu/goodbad
The Disability Resource Center
In conclusion
• Web accessibility issues are often invisible.
• Identification of web accessibility issues is done using
a combination of manual and automated checks.
• Making Web page elements accessible does not
insure functional accessibility.
The Disability Resource Center
Contact info
Tonu Mikk
[email protected]
612 625-3307
http://accessibility.umn.edu
http://cap.umn.edu
http://diversity.umn.edu/disability