Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Role of-engineering-best-practices-to-create-an-inclusive-web final-1


Published on

Role of Engineering Best Practices to Create Inclusive Web presented at CSUN

Published in: Design, Technology
  • Be the first to comment

Role of-engineering-best-practices-to-create-an-inclusive-web final-1

  1. 1. Role of Engineering Best Practices to create an inclusive web! Srinivasu Chakravarthula YAHOO! CONFIDENTIAL
  2. 2. In this… <ul><li>What is Web Accessibility? </li></ul><ul><li>Why Accessibility? </li></ul><ul><li>Engineers to understand </li></ul><ul><li>Frequent Accessibility errors </li></ul><ul><li>Some of the common misconceptions </li></ul><ul><li>Solution </li></ul><ul><li>WCAG: Principle 1: Perceivable </li></ul><ul><li>WCAG: Principle 2: Operable </li></ul><ul><li>WCAG: Principle 3: Understandable </li></ul><ul><li>WCAG: Principle 4: Robust </li></ul><ul><li>ARIA </li></ul><ul><li>Accessibility Testing </li></ul><ul><ul><li>Automated Testing </li></ul></ul><ul><ul><li>Manual Testing </li></ul></ul><ul><li>YUI and Accessibility </li></ul><ul><li>YU </li></ul>
  3. 3. What’s web accessibility? <ul><li>To provide equal access to information on the world wide web to everyone, irrespective of people with all abilities or with any limitations </li></ul><ul><li>From Wikipedia: </li></ul><ul><li>“ Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.” </li></ul><ul><li>Source: </li></ul>
  4. 4. Why Accessibility? <ul><li>As per World Health Organization (WHO), there are around 650 million people with disabilities around the world </li></ul><ul><li>US and India has around 60 million people with disabilities in each country </li></ul><ul><li>Increases the SEO ranking; not just for people with disabilities </li></ul><ul><li>Works pretty well on a mobile device </li></ul><ul><li>Increase the customer base </li></ul>
  5. 5. Engineers need to understand about… <ul><li>People with Situation Disability </li></ul><ul><li>People with Functional Disability </li></ul><ul><li>Importance to write semantic mark-up </li></ul><ul><li>Apply appropriate techniques no matter what technology they use! </li></ul>
  6. 6. Frequent Accessibility errors… <ul><li>No text alternative </li></ul><ul><li>No headings </li></ul><ul><li>No form labels </li></ul><ul><li>No keyboard access </li></ul><ul><li>Poor color combination </li></ul><ul><li>No user control for flash content </li></ul><ul><li>No keyboard access to dynamic functions </li></ul>
  7. 7. Some of the common misconceptions… <ul><li>Accessibility is an additional effort </li></ul><ul><li>Accessibility is just for visually impaired users </li></ul><ul><li>Accessibility is an expensive task </li></ul><ul><li>Need to provide a separate text version of the website </li></ul>
  8. 8. Solution… <ul><li>Consider accessibility right at the initial stage of the project </li></ul><ul><li>Web Content Accessibility Guidelines (WCAG) 2.0 – </li></ul><ul><li>Accessible Rich Internet Applications (ARIA) - </li></ul><ul><li>Authoring Tool Accessibility Guidelines (ATAG) - </li></ul>
  9. 9. Principle 1: Perception <ul><li>Non-text content </li></ul><ul><ul><li>Images – Provide appropriate alt attribute </li></ul></ul><ul><ul><li>CAPTCHA – Provide alternative </li></ul></ul><ul><ul><li>Audio / Video – Closed captioning / text transcript </li></ul></ul>
  10. 10. Principle 1: Perceivable – contd., <ul><li>Adaptability – not mouse click alone! </li></ul><ul><li>Sufficient Color Contrast – use CCA to test for contrast before choosing the colors! </li></ul>
  11. 11. Principle 2: Operable <ul><li>Keyboard access – all information and functionality should be available to access via keyboard including: </li></ul><ul><ul><li>Links – provide descriptive links; avoid “click here…” </li></ul></ul><ul><ul><li>Headings – mark up with Hx attributes </li></ul></ul><ul><ul><li>Form fields – provide associated labels and ARIA support for dynamic forms </li></ul></ul><ul><ul><li>Lists – define lists and nested lists with correct mark-up </li></ul></ul><ul><ul><li>Tables – provide table summary, caption and associated headers </li></ul></ul>
  12. 12. Principle 2: Operable – contd., <ul><li>Enough time – provide sufficient time to the users and provide option to increase the time as desired </li></ul><ul><li>Seizures – seizures should generally be avoided as far as possible </li></ul><ul><li>Navigable – Web page should be easily navigable by any input device including assistive technologies </li></ul>
  13. 13. Principle 3: Understandable <ul><li>Use of Natural Language – unless a specific terminology is required </li></ul><ul><li>Predictable – User should be able to predict the result upon his action </li></ul><ul><li>Input assistance – provide adequate help for user to interact with forms etc. </li></ul>
  14. 14. Principle 4: Robust <ul><li>Maximize Compatibility with current and future user agents including assistive technologies </li></ul><ul><li>Provide name, role and value to all the elements </li></ul>
  15. 15. Accessible Rich Internet Applications (ARIA) <ul><li>ARIA is WAI Recommendation </li></ul><ul><li>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. </li></ul>
  16. 16. Accessibility Testing <ul><li> + </li></ul>Automated Tools (Eg: Wave/ FAE) Manual Testing (Eg: Screen Reader) Accessibility Testing =
  17. 17. Accessibility Testing - Automated <ul><li>WAVE – </li></ul><ul><li>Web Developer Kit - </li></ul><ul><li>Color Contrast Analyzer - </li></ul>
  18. 18. Accessibility Testing – Manual <ul><li>Screen Readers </li></ul><ul><ul><li>NVDA for Windows– </li></ul></ul><ul><ul><li>VoiceOver for Mac, iPhone and iPad </li></ul></ul><ul><ul><li>Talks or Mobile speak for symbian based mobile phones </li></ul></ul><ul><li>Screen magnifiers </li></ul><ul><ul><li>Dolphin Supernova </li></ul></ul><ul><ul><li>In-built screen magnifier in Windows 7 </li></ul></ul><ul><li>Alternate input tools </li></ul><ul><ul><li>On-screen keyboard </li></ul></ul><ul><ul><li>Single switch </li></ul></ul><ul><ul><li>Head mounted mouse </li></ul></ul>
  19. 19. YUI and Accessibility <ul><li>We have a lot of accessible controls in YUI 3 such as TabView, Menu, Calendar and so on… </li></ul><ul><li>We have used ARIA to make the widgets accessible. </li></ul><ul><li>See the blog with videos at </li></ul>
  20. 20. <ul><li>Questions? </li></ul>
  21. 21. Thank you! Telephone: 91 80 3077 4444 Email: [email_address] Twitter: @VasuTweets Our blog: Twitter: @yahooaccess Fcebook: