SlideShare a Scribd company logo
1 of 21
The Disability Resource Center
Web Accessibility Assessment for
Everyone
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
tmikk@umn.edu
612 625-3307
http://accessibility.umn.edu
http://cap.umn.edu
http://diversity.umn.edu/disability

More Related Content

Similar to Web Accessibility Assessment for Everyone

Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesMichael Ryan
 
Wave training
Wave trainingWave training
Wave trainingSean Yo
 
Easy ways to make your site more accessible
Easy ways to make your site more accessibleEasy ways to make your site more accessible
Easy ways to make your site more accessibleJana Veliskova
 
Accessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and SiddhanthAccessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and Siddhanthbhumika2108
 
Designing and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityUsability Matters
 
A11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsA11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsAshton Williams
 
The Internet is for Everyone: How to Make Your Website More Accessible
The Internet is for Everyone: How to Make Your Website More AccessibleThe Internet is for Everyone: How to Make Your Website More Accessible
The Internet is for Everyone: How to Make Your Website More AccessibleAdam Rasheed
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Karen Mardahl
 
Adding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development ProcessAdding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development ProcessNTEN
 
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital AccessibilityTCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital AccessibilityRaymond Rose
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's jobRemya Ramesh
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalAndy Kucharski
 
Oct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility ConferenceOct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility ConferenceKevin Rydberg
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalPromet Source
 
SEERS - Standardised Bug Reporting
SEERS - Standardised Bug ReportingSEERS - Standardised Bug Reporting
SEERS - Standardised Bug Reportingbooshtukka
 
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1Julio Camarero
 

Similar to Web Accessibility Assessment for Everyone (20)

Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
 
Wave training
Wave trainingWave training
Wave training
 
Accessibility for Web
Accessibility for WebAccessibility for Web
Accessibility for Web
 
Easy ways to make your site more accessible
Easy ways to make your site more accessibleEasy ways to make your site more accessible
Easy ways to make your site more accessible
 
Accessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and SiddhanthAccessibility testing-Gyani and Siddhanth
Accessibility testing-Gyani and Siddhanth
 
Designing and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital Accessibility
 
A11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsA11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile apps
 
The Internet is for Everyone: How to Make Your Website More Accessible
The Internet is for Everyone: How to Make Your Website More AccessibleThe Internet is for Everyone: How to Make Your Website More Accessible
The Internet is for Everyone: How to Make Your Website More Accessible
 
Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012Build Accessibly - Community Day 2012
Build Accessibly - Community Day 2012
 
Adding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development ProcessAdding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development Process
 
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital AccessibilityTCEA Virtual Learning SIG  Lunch and Learn: Understanding Digital Accessibility
TCEA Virtual Learning SIG Lunch and Learn: Understanding Digital Accessibility
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's job
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
 
Oct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility ConferenceOct 2014 Siteimprove Stockholm Accessibility Conference
Oct 2014 Siteimprove Stockholm Accessibility Conference
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
 
SEERS - Standardised Bug Reporting
SEERS - Standardised Bug ReportingSEERS - Standardised Bug Reporting
SEERS - Standardised Bug Reporting
 
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
 
Web content accessibility
Web content accessibilityWeb content accessibility
Web content accessibility
 

Web Accessibility Assessment for Everyone

  • 1. The Disability Resource Center Web Accessibility Assessment for Everyone
  • 2. 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
  • 3. The Disability Resource Center Web accessibility issues are often invisible
  • 4. The Disability Resource Center Categories of disabilities Learning disabilities Deaf and hard of hearing Vision impaired and blind Mobility impaired
  • 5. 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
  • 6. The Disability Resource Center Elements of accessibility • Structure • Styling (font, color, spacing) • Images • Media • Keyboard navigation
  • 7. The Disability Resource Center Web accessibility standards • Web Content Accessibility Guidelines (WCAG) 2.0 AA • Section 508
  • 8. The Disability Resource Center Web accessibility evaluation • WebAIM’s WCAG 2.0 checklist • A11yproject.com checklist • IBM web accessibility checklist
  • 9. 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
  • 10. The Disability Resource Center Web accessibility checking software Comprehensive checkers • WAVE Firefox toolbar and WAVE online service • AInspector Sidebar Firefox extension • W15y Quick Check
  • 11. The Disability Resource Center Web accessibility checking software Automated tools • Functional Accessibility Evaluator • SiteImprove – from SiteImprove
  • 12. 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
  • 13. 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
  • 14. 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)
  • 15. 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.
  • 16. The Disability Resource Center Example of using WAVE Toolbar z.umn.edu/scansample • Issues • Requires manual checking • Image alt tags • Outline • ARIA roles
  • 17. The Disability Resource Center Example of using AInspector z.umn.edu/scansample • Issues • Requires manual checking • Image alt tags • Outline • ARIA roles
  • 18. The Disability Resource Center Example of using W15yQC z.umn.edu/scansample • Issues • Requires manual checking • Image alt tags • Outline • ARIA roles
  • 19. The Disability Resource Center WCAG Good / Bad example z.umn.edu/goodbad
  • 20. 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.
  • 21. The Disability Resource Center Contact info Tonu Mikk tmikk@umn.edu 612 625-3307 http://accessibility.umn.edu http://cap.umn.edu http://diversity.umn.edu/disability

Editor's Notes

  1. Describe each in more detail.
  2. Notes
  3. Notes
  4. Notes
  5. Notes
  6. Notes
  7. Notes
  8. Notes
  9. Notes
  10. Notes
  11. Notes
  12. Notes
  13. Notes
  14. Notes
  15. Notes
  16. Notes