Web Accessibility


Published on

Web Accessibility,Why should care!
defining accessibility - how can disabled people
Navigate the web !

Published in: Education, Design, Technology

Web Accessibility

  1. 1. Web Accessibility Why should we care?!
  2. 2. Outline <ul><li>Define </li></ul><ul><li>Guidelines </li></ul><ul><li>The Audit </li></ul><ul><li>Design Tips </li></ul>
  3. 3. Defining Accessibility 1
  4. 4. Universal Design <ul><li>“ If anybody asks me what the Internet means to me, I will tell him without hesitation: To me (a quadriplegic) the Internet occupies the most important part in my life. It is my feet that can take me to any part of the world; it is my hands which help me to accomplish my work; it is my best friend - it gives my life meaning ”. </li></ul><ul><li>Dr. ZhangXu (2001) (http://www.zhangxu.org/) </li></ul>
  5. 5. Universal Design <ul><li>“ The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect ”. </li></ul><ul><li>Tim Berners Lee </li></ul>
  6. 6. Accessibility < Universal Design
  7. 7. What is accessibility? <ul><li>Web accessibility refers to the practice of making Web sites usable by people of all abilities and disabilities. (Wikipedia) </li></ul>
  8. 8. Why does it matter? <ul><li>Disabilities are invisible online. </li></ul><ul><li>More Access to information. </li></ul><ul><li>Equal opportunity (Accused for Discrimination). </li></ul><ul><li>Financial incentives (e.g. widen number of customers, less bandwidth, faster loading pages, etc). </li></ul><ul><li>Competitiveness (a good skill). </li></ul>
  9. 9. Case study: AIB <ul><li>A reduction in file size of 69% </li></ul><ul><li>Reduction in bandwidth of 192 GB per page, per year. </li></ul><ul><li>A reduction in development costs. </li></ul><ul><li>Faster downloads - happier users of AIB sites </li></ul><ul><li>Better search engine placement? </li></ul>Question: is this the best way to promote accessibility?
  10. 10. Again: What is accessibility? <ul><li>Disabilities </li></ul><ul><li>Different devices </li></ul><ul><li>Older & other browsers, operating systems </li></ul><ul><li>Slow connections </li></ul>
  11. 11. Disabilities <ul><li>Vision </li></ul><ul><li>Hearing </li></ul><ul><li>Mobility </li></ul><ul><li>Cognitive </li></ul><ul><li>Temporary injury </li></ul><ul><li>Getting old </li></ul>
  12. 12. Mobility impairment <ul><li>Difficulty using fingers, hands, or arms </li></ul><ul><li>Challenges: </li></ul><ul><ul><li>Unable to use mouse </li></ul></ul><ul><ul><li>Unable to select small buttons or icons </li></ul></ul><ul><ul><li>Unable to participate in real-time text chat </li></ul></ul>
  13. 13. Hearing impairment <ul><li>Deaf or hard of hearing </li></ul><ul><li>Challenges: </li></ul><ul><ul><li>Listening to audio/video clips </li></ul></ul><ul><ul><li>Difficulty participating in real-time audio chats </li></ul></ul>
  14. 14. Learning impairment <ul><li>Effects the learning process involving one or more abilities (e.g, speaking, listening, reading, writing, spelling, reasoning, and organizing) </li></ul><ul><li>Challenges: </li></ul><ul><ul><li>Getting lost in navigation </li></ul></ul><ul><ul><li>Inability to understand cluttered content or worded clearly </li></ul></ul>
  15. 15. Vision impairment <ul><li>Blind low vision, color blindness </li></ul><ul><li>Challenges: </li></ul><ul><ul><li>Inability to view images or videos </li></ul></ul><ul><ul><li>Inability to understand and navigate organization of Web page </li></ul></ul>
  16. 16. How can Disabled people Navigate the Web?
  17. 17. Assistive Technologies <ul><li>Assistive technology (AT) is a generic term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and includes the process used in selecting, locating, and using them. (Wikipedia) </li></ul>
  18. 18. Examples of AT <ul><li>Screen Readers and magnifiers </li></ul><ul><li>Refreshable Braille display. </li></ul><ul><li>Captioning SW </li></ul><ul><li>Voice Recognition SW </li></ul><ul><li>Touch Screens </li></ul><ul><li>Switches and pointer sticks </li></ul><ul><li>etc </li></ul>
  19. 19. Experiencing Web Accessibility http://www.w3.org/WAI/EO/2005/Demo
  20. 20. Accessibility Myths <ul><li>Accessibility Myths: </li></ul><ul><ul><li>Accessibility means ugly websites </li></ul></ul><ul><ul><li>Accessible sites look boring </li></ul></ul><ul><ul><li>“ Text-only” pages are a good way to provide accessibility </li></ul></ul><ul><ul><li>Accessibility adds cost to a web project </li></ul></ul><ul><li>Example of beautiful sites and accessible: accesssites.org , cssliquid.com . www.cssbeauty.com </li></ul>
  21. 21. <ul><li>Introduction to </li></ul><ul><li>Laws & Guidelines </li></ul>2
  22. 22. Laws <ul><li>Barcelona Declaration www.bcn.es/ciutat-disminucio/angles/a_dec02.html </li></ul><ul><li>UK Disability Discrimination Act www.opsi.gov.uk/acts/acts1995/1995050.htm </li></ul><ul><li>U.S. Section 508 www.usdoj.gov/crt/508/ </li></ul><ul><li>Other policies www.w3.org/WAI/Policy/ </li></ul>
  23. 23. Standards ( W3C WAI WCAG 1.0 ) <ul><li>Web Content Accessibility Guidelines 1.0 </li></ul><ul><li>Created by the Web Accessibility Initiative section of the W3C </li></ul><ul><li>2.0 is under review </li></ul>
  24. 24. WCAG 1.0 <ul><li>Published 1999 </li></ul><ul><li>Made up of 14 guidelines </li></ul><ul><li>Checkpoints have 3 Priorities 1,2,3 – A, AA, AAA </li></ul><ul><ul><li>Priority 1 : must satisfy, otherwise one or more groups will find it impossible to access information </li></ul></ul><ul><ul><li>Priority 2 : should satisfy, otherwise one or more groups will find it difficult to access information </li></ul></ul><ul><ul><li>Priority 3 : may address, otherwise one or more groups will find it somewhat difficult to access information </li></ul></ul><ul><li>Provide a basis of an audit </li></ul>
  25. 25. WCAG Guidelines (1-3) <ul><li>Provide equivalent alternatives to auditory and visual content </li></ul><ul><li>Don’t rely on color alone </li></ul><ul><li>Use markup and style sheet and do so properly </li></ul><ul><li>Clarify natural language usage </li></ul><ul><li>Create tables that transform gracefully </li></ul>
  26. 26. WCAG Guidelines (2-3) <ul><li>Ensure that pages featuring new technologies transform gracefully </li></ul><ul><li>Ensure users control of time-sensitive content changes </li></ul><ul><li>Ensure direct accessibility of embedded user interface </li></ul><ul><li>Design for device-independent </li></ul><ul><li>Use interim solutions </li></ul>
  27. 27. WCAG Guidelines (3-3) <ul><li>Use W3C technologies and guidelines </li></ul><ul><li>Provide context and orientation information. </li></ul><ul><li>Provide clear navigation mechanisms </li></ul><ul><li>Ensure that documents are clear and simple. </li></ul>
  28. 28. http://www.w3.org/TR/WCAG10/full-checklist.html
  29. 29. Key message <ul><li>Guidelines are not there to be ticked off – try to understand the potential problems they highlight and ensure you don’t create those problems for your users. </li></ul>
  30. 30. <ul><li>The “audit” </li></ul>3
  31. 31. The audit <ul><li>Automated & manual </li></ul><ul><li>Manual: code-checking </li></ul><ul><li>Internal or independent? </li></ul>
  32. 32. Testing Tools <ul><li>Testing tools include: </li></ul><ul><ul><li>SW used by disabled (e.g. JAWS) </li></ul></ul><ul><ul><li>Emulators (e.g. Fangs) </li></ul></ul><ul><ul><li>Compliance checkers </li></ul></ul><ul><li>Remember that tools are not people </li></ul>
  33. 33. Process for the audit <ul><li>Checklists </li></ul><ul><li>Automated tests </li></ul><ul><li>Toolbars for manual testing (AIS for IE, Web Developer on Firefox) </li></ul><ul><li>User testing </li></ul>
  34. 34. Automated test Tools (1-3) <ul><li>Bobby from Watchfire (IBM): $299 </li></ul><ul><li>Bobby spiders through a website and tests on a page-by-page basis to see if it meets several accessibility requirements, including readability by screen readers, the provision of text equivalents for all images, animated elements, audio and video displays. </li></ul>
  35. 35. Automated test Tools (2-3) <ul><li>The LIFT Machine from UsableNet $999. LIFT Machine is a server-based application that automatically scans internal and external websites for over 140 quality, accessibility, and usability issues. It then generates a variety of web-based reports for both executives and individual content creators. </li></ul>
  36. 36. Automated test Tools (3-3) <ul><li>Cynthia Says http://www.contentquality.com </li></ul><ul><li>Etre Accessibility Check http://www.etre.com/tools/accessibilitycheck/ </li></ul><ul><li>Colorblind web page filter http://colorfilter.wickline.org/ </li></ul>
  37. 37. Toolbars <ul><li>Firefox Accessibility Extension http://firefox.cita.uiuc.edu/ </li></ul><ul><li>Web development Toolbar </li></ul>
  38. 38. User testing <ul><li>You need actual people. </li></ul><ul><li>Experts in Accessibility: </li></ul><ul><ul><li>Accessify forum </li></ul></ul><ul><ul><li>WebAIm </li></ul></ul><ul><ul><li>W3C Accessibility mailing list . </li></ul></ul>
  39. 39. Design Tips 4
  40. 40. General Accessibility principle <ul><li>Consistency </li></ul><ul><ul><li>Patterns help everyone understand information. </li></ul></ul><ul><ul><li>Be consistent in the techniques you apply for your web site. </li></ul></ul><ul><li>Semantic Markup. </li></ul><ul><ul><li>Accessibility very dependent on markup </li></ul></ul><ul><ul><li>Information in markup accessed by AT </li></ul></ul><ul><li>Separation of content, presentation and behavior </li></ul><ul><ul><li>Enables progressive enhancement </li></ul></ul>
  41. 41. Mobility impairment <ul><li>What can you do to help? </li></ul><ul><ul><li>Make buttons and links reasonably large </li></ul></ul><ul><ul><li>Provide keyboard alternatives for anything that requires a mouse </li></ul></ul><ul><ul><li>Provide audio alternatives for text requirements </li></ul></ul>
  42. 42. Hearing impairment <ul><li>What can you do to help? </li></ul><ul><ul><li>Provide transcripts for audio </li></ul></ul><ul><ul><li>Provide captioning for video </li></ul></ul><ul><ul><li>Provide closed captioning or tty access for live chats </li></ul></ul>
  43. 43. Vision impairment <ul><li>What can you do to help? </li></ul><ul><ul><li>Provide alt tags for all images </li></ul></ul><ul><ul><li>Provide headers and descriptions for tables </li></ul></ul><ul><ul><li>Provide audio explanations for complicated diagrams and images </li></ul></ul>
  44. 44. Creating Accessible page Layouts <ul><li>Avoid Tables! </li></ul><ul><li>Use CSS layout techniques: </li></ul><ul><ul><li>Fixed : All containers on the page have their widths defined in pixels or other fixed units. A fixed layout will not move in and out when you resize your browser window. </li></ul></ul><ul><ul><li>Elastic : All containers on the page have their widths defined in ems. They will be scaled according to the users default browser font size. </li></ul></ul><ul><ul><li>Liquid : All containers on the page have their widths defined in percents. A liquid layout will move in and out when you resize your browser window. </li></ul></ul>
  45. 45. Design Tips <ul><li>Layout and Structure </li></ul><ul><ul><li>Use headings in content consistently </li></ul></ul><ul><ul><li>Use the captions, summaries, and row and column headers for tables </li></ul></ul><ul><ul><li>Use appropriate metadata </li></ul></ul>
  46. 46. Design Tips <ul><li>Navigation </li></ul><ul><ul><li>Use clear, descriptive text for hyperlinks </li></ul></ul><ul><ul><li>Set hyperlinks to open in new window </li></ul></ul><ul><ul><li>Use meaningful text for page titles </li></ul></ul><ul><li>Color </li></ul><ul><ul><li>Avoid using color as only indicator </li></ul></ul><ul><ul><li>Avoid using red </li></ul></ul><ul><li>Text </li></ul><ul><ul><li>Use clear, simple language </li></ul></ul><ul><li>Forms and tables </li></ul>
  47. 47. Design Tips <ul><li>Images </li></ul><ul><ul><li>Add meaningful alt text to all images </li></ul></ul><ul><ul><li>For complex images, add a description link </li></ul></ul><ul><ul><li>Avoid flickering images and unnecessary animated images </li></ul></ul><ul><ul><li>Avoid using images of text </li></ul></ul><ul><li>Multimedia </li></ul><ul><ul><li>For audio clips, use a description link </li></ul></ul><ul><ul><li>For video clips, use captioning or use a description link </li></ul></ul><ul><ul><li>For video clips, provide a link to an audio file </li></ul></ul><ul><ul><li>Provide a link to download appropriate audio/video player </li></ul></ul>
  48. 48. Conclusion
  49. 49. This is only the beginning … <ul><li>Many accessibility resources are available on the web. We have only introduced the basic concepts and resources for learning. </li></ul>This course Resources on the Web
  50. 50. Recommended Book <ul><li>Web Accessibility: Web Standards and Regulatory Compliance </li></ul><ul><li>by Jim Thatcher, Michael R. Burks, Christian Heilmann, Shawn Lawton Henry, Andrew Kirkpatrick, Patrick H. Lauke, Bruce Lawson, Bob Regan, Richard Rutter, Mark Urban, and Cynthia Waddell, </li></ul><ul><li>published by Friends of Ed, July, 2006, ISBN: 1590596382. </li></ul>
  51. 51. Articles <ul><li>Evaluating Web Sites for Accessibility with Firefox, http://www.ariadne.ac.uk/issue44/lauke/ </li></ul><ul><li>Testing for Accessibility, http://jimthatcher.com/testing.htm </li></ul>
  52. 52. Other Tools <ul><li>Complete List of Web Accessibility Evaluation Tools, http://www.w3.org/WAI/ER/tools/complete </li></ul><ul><li>Web accessibility toolbar, http://www.visionaustralia.org.au/ais/toolbar/ </li></ul>