SlideShare une entreprise Scribd logo
1  sur  19
Web Accessibility 25-26 September, 2009 -Srinivasu
Agenda What’s Disability? World Wide Web Consortium (W3C) W3Cs Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) 2.0 Introduction Assistive Technologies Building Accessible Websites Guideline 1 – Perceivable Guideline 2 – Operable Guideline 3 – Understandable Guideline 4 – Robust Accessibility Testing
What’s Disability Situational Disability Reaching late to venue… Traffic in city Oops! My mouse stopped working, what do I do? Text is too small on this webpage, how do I read this? Functional Disability Visually impaired Mobility impaired Hard of hearing Learning disability Autism, Cerebral Palsy
World Wide Web Consortium (W3C) Develops interoperable technologies Specifications Guidelines Software Tools Why would they do it? To lead web to its potential and for consistency on web…
W3C’s WAI (Web Accessibility Initiative) WAI develops... Guidelines widely considered as the international standard for Web accessibility  Support materials to help understand and implement Web accessibility  WAI welcomes... Participation from around the world  Volunteers to review, implement, and promote guidelines  Dedicated participants in working groups
Web Content Accessibility Guidelines (WCAG) 2.0 WCAG 2.0 has evolved over years based on feedback and recommendation. It defines how to make web content more accessible. Currently WCAG 2.0 is official recommendation http://www.w3.org/tr/wcag20
Assistive Technologies Screen Magnifier  Screen Reader Speech Recognition Refreshable Braille Text Browsers Large keyboard Mouse substitute such as a joystick, a trackball, on-screen keyboard. Scanning Software Speech Synthesis Some Pictures
Building Accessible Websites Laying Accessibility Foundation Table-less layouts – easy to manage, avoid problems for screen readers Structured mark-up – Need for Search Engines, better access to assistive technologies Valid code – Assistive Technologies completely rely on your code, if you mess-up, those users will hate you
Guideline 1: Perception Non-text content Images – provide alt / long desc attribute CAPTCHA – provide alternate in audio CAPTCHA or use CAPTCHA based on logical questions
Guideline 1: Perceivable – contd.,  Audio / Visual Content – provide closed captions Adaptability – should be fleixible. User should be able to use their own style sheets Contrast – ensure that foreground and background will have sufficient contrast
Guideline 2: Operable Keyboard access – all information and functionality should be available to access via keyboard including: Links Headings Form fields Lists Tables
Guideline 2: Operable – contd., Enough time – User should have sufficient time to read and interact with content. If content is time-based, same should be notified prior to the session and user should be given an option to extend time limit unless time limit is mandatory. Seizures – seizures should generally be avoided as far as possible Navigable – Web page should be easily navigable by any input device including assistive technologies
Accessible Rich Internet Applications (ARIA) ARIA is WAI Recommendation http://www.w3.org/WAI/intro/aria.php WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
Guideline 3: Understandable Use of Natural Language – unless a specific terminology is required Predictable – User should be able to predict the result upon his action Input assistance – provide adequate help for user to interact with forms etc.
Guideline 4: Robust Compatibility with latest technologies and support for assistive technologies Add Accessible Rich Internet Applications (ARIA) support for RIA such as AJAX based applications Alert Landmark etc…
Accessibility Testing 				          + Manual Testing (Eg: Screen Reader) Automated Tools  (Eg: Wave/ FAE) = Accessibility Testing
Accessibility Testing - Automated WAVE – http://wave.webaim.org/toolbar Firefox Accessibility extension Add-ons of Mozilla Firefox https://addons.mozilla.org/en-US/firefox/search?q=accessibility&cat=all
Accessibility Testing – Manual Screen Readers NVDA – http://www.nvda-project.org JAWS for Windows – http://www.freedomscientific.com Screen Magnifiers ZoomTextXtra – http://www.aisquared.com Dolphin Supernova – http://www.yourdolphin.com Alternate Input devices –  Track ball and switch – http://www.ablenetinc.com Dragon Naturally Speaking  http://www.nuance.com Talks – a screen reader for mobile S60 phones  http://www.nuance.com/talks/
Thank You

Contenu connexe

En vedette (6)

Enterprise Level Tools and solutions for Accessibility - WorldSpace, Amaze an...
Enterprise Level Tools and solutions for Accessibility - WorldSpace, Amaze an...Enterprise Level Tools and solutions for Accessibility - WorldSpace, Amaze an...
Enterprise Level Tools and solutions for Accessibility - WorldSpace, Amaze an...
 
Creating Accessible Forms
Creating Accessible FormsCreating Accessible Forms
Creating Accessible Forms
 
Introduction to Web Accessibility and WCAG
Introduction to Web Accessibility and WCAGIntroduction to Web Accessibility and WCAG
Introduction to Web Accessibility and WCAG
 
Accessible Design
Accessible DesignAccessible Design
Accessible Design
 
Accessibility testing technology, human touch and value
Accessibility testing technology, human touch and value Accessibility testing technology, human touch and value
Accessibility testing technology, human touch and value
 
StartUpSaturday_Deque
StartUpSaturday_DequeStartUpSaturday_Deque
StartUpSaturday_Deque
 

Similaire à Introduction to Web Accessibility and WCAG

Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
thegeniusca
 
Wordcamp Toronto 2013
Wordcamp Toronto 2013Wordcamp Toronto 2013
Wordcamp Toronto 2013
thegeniusca
 
Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010
Kailash More
 

Similaire à Introduction to Web Accessibility and WCAG (20)

Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
 
Wordcamp Toronto 2013
Wordcamp Toronto 2013Wordcamp Toronto 2013
Wordcamp Toronto 2013
 
Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0Wipa Seminar WCAG 2.0
Wipa Seminar WCAG 2.0
 
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
 
A11y presentation-2017
A11y presentation-2017A11y presentation-2017
A11y presentation-2017
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
2016 it summit_accessibility_2016-05-24_standard
2016 it summit_accessibility_2016-05-24_standard2016 it summit_accessibility_2016-05-24_standard
2016 it summit_accessibility_2016-05-24_standard
 
2016 it summit_accessibility_2016-05-24_standard
2016 it summit_accessibility_2016-05-24_standard2016 it summit_accessibility_2016-05-24_standard
2016 it summit_accessibility_2016-05-24_standard
 
Udem 2007 Accessibility Standards
Udem 2007 Accessibility StandardsUdem 2007 Accessibility Standards
Udem 2007 Accessibility Standards
 
Corporate Web Accessibility Implementation Strategies
Corporate Web Accessibility Implementation StrategiesCorporate Web Accessibility Implementation Strategies
Corporate Web Accessibility Implementation Strategies
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With Disabilities
 
Open hack 2011-Accessibility
Open hack 2011-AccessibilityOpen hack 2011-Accessibility
Open hack 2011-Accessibility
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
ACCESSIBLE project concept and achievements
ACCESSIBLE project concept and achievementsACCESSIBLE project concept and achievements
ACCESSIBLE project concept and achievements
 
Accessibility Part 1
Accessibility Part 1Accessibility Part 1
Accessibility Part 1
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010Accessibility testing kailash 26_nov_ 2010
Accessibility testing kailash 26_nov_ 2010
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
 

Plus de Srinivasu Chakravarthula (7)

Accessibility - a game changer
Accessibility - a game changerAccessibility - a game changer
Accessibility - a game changer
 
Accessible payments
Accessible paymentsAccessible payments
Accessible payments
 
Understanding wcag 2.0
Understanding wcag 2.0Understanding wcag 2.0
Understanding wcag 2.0
 
Digital Accessibility - what can you do_
Digital Accessibility - what can you do_Digital Accessibility - what can you do_
Digital Accessibility - what can you do_
 
Impact-Of-Inclusive-Design-UXI2016
Impact-Of-Inclusive-Design-UXI2016Impact-Of-Inclusive-Design-UXI2016
Impact-Of-Inclusive-Design-UXI2016
 
Accessibility update since beginning of 2016
Accessibility update since beginning of 2016Accessibility update since beginning of 2016
Accessibility update since beginning of 2016
 
Need For Web Accessibility Final
Need For Web Accessibility FinalNeed For Web Accessibility Final
Need For Web Accessibility Final
 

Introduction to Web Accessibility and WCAG

  • 1. Web Accessibility 25-26 September, 2009 -Srinivasu
  • 2. Agenda What’s Disability? World Wide Web Consortium (W3C) W3Cs Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) 2.0 Introduction Assistive Technologies Building Accessible Websites Guideline 1 – Perceivable Guideline 2 – Operable Guideline 3 – Understandable Guideline 4 – Robust Accessibility Testing
  • 3. What’s Disability Situational Disability Reaching late to venue… Traffic in city Oops! My mouse stopped working, what do I do? Text is too small on this webpage, how do I read this? Functional Disability Visually impaired Mobility impaired Hard of hearing Learning disability Autism, Cerebral Palsy
  • 4. World Wide Web Consortium (W3C) Develops interoperable technologies Specifications Guidelines Software Tools Why would they do it? To lead web to its potential and for consistency on web…
  • 5. W3C’s WAI (Web Accessibility Initiative) WAI develops... Guidelines widely considered as the international standard for Web accessibility Support materials to help understand and implement Web accessibility WAI welcomes... Participation from around the world Volunteers to review, implement, and promote guidelines Dedicated participants in working groups
  • 6. Web Content Accessibility Guidelines (WCAG) 2.0 WCAG 2.0 has evolved over years based on feedback and recommendation. It defines how to make web content more accessible. Currently WCAG 2.0 is official recommendation http://www.w3.org/tr/wcag20
  • 7. Assistive Technologies Screen Magnifier Screen Reader Speech Recognition Refreshable Braille Text Browsers Large keyboard Mouse substitute such as a joystick, a trackball, on-screen keyboard. Scanning Software Speech Synthesis Some Pictures
  • 8. Building Accessible Websites Laying Accessibility Foundation Table-less layouts – easy to manage, avoid problems for screen readers Structured mark-up – Need for Search Engines, better access to assistive technologies Valid code – Assistive Technologies completely rely on your code, if you mess-up, those users will hate you
  • 9. Guideline 1: Perception Non-text content Images – provide alt / long desc attribute CAPTCHA – provide alternate in audio CAPTCHA or use CAPTCHA based on logical questions
  • 10. Guideline 1: Perceivable – contd., Audio / Visual Content – provide closed captions Adaptability – should be fleixible. User should be able to use their own style sheets Contrast – ensure that foreground and background will have sufficient contrast
  • 11. Guideline 2: Operable Keyboard access – all information and functionality should be available to access via keyboard including: Links Headings Form fields Lists Tables
  • 12. Guideline 2: Operable – contd., Enough time – User should have sufficient time to read and interact with content. If content is time-based, same should be notified prior to the session and user should be given an option to extend time limit unless time limit is mandatory. Seizures – seizures should generally be avoided as far as possible Navigable – Web page should be easily navigable by any input device including assistive technologies
  • 13. Accessible Rich Internet Applications (ARIA) ARIA is WAI Recommendation http://www.w3.org/WAI/intro/aria.php WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
  • 14. Guideline 3: Understandable Use of Natural Language – unless a specific terminology is required Predictable – User should be able to predict the result upon his action Input assistance – provide adequate help for user to interact with forms etc.
  • 15. Guideline 4: Robust Compatibility with latest technologies and support for assistive technologies Add Accessible Rich Internet Applications (ARIA) support for RIA such as AJAX based applications Alert Landmark etc…
  • 16. Accessibility Testing + Manual Testing (Eg: Screen Reader) Automated Tools (Eg: Wave/ FAE) = Accessibility Testing
  • 17. Accessibility Testing - Automated WAVE – http://wave.webaim.org/toolbar Firefox Accessibility extension Add-ons of Mozilla Firefox https://addons.mozilla.org/en-US/firefox/search?q=accessibility&cat=all
  • 18. Accessibility Testing – Manual Screen Readers NVDA – http://www.nvda-project.org JAWS for Windows – http://www.freedomscientific.com Screen Magnifiers ZoomTextXtra – http://www.aisquared.com Dolphin Supernova – http://www.yourdolphin.com Alternate Input devices – Track ball and switch – http://www.ablenetinc.com Dragon Naturally Speaking http://www.nuance.com Talks – a screen reader for mobile S60 phones http://www.nuance.com/talks/