Beat the Tsunami with a WAVE. Web Accessibility Testing 101 #PSUWeb

  • Published on
    22-Dec-2014

  • View
    662

  • Download
    6

DESCRIPTION

Presented at Penn State's 2014 Web Conference: The Future Friendly Web An introduction to web accessibility. Discusses what it is, & who is affected as well as tools and techniques for addressing accessibility issues

Transcript

  • 1. BEAT THE TSUNAMI WITH A WAVE @PatrickDunphy

2. Who am I? 3. I work here I co-lead here 4. I live here 5. The Real Beginning The Beginning My AccessibilityJourney The Present 6. Some Things You dont expect to learn 7. Not Taught Education & Awareness Necessary 8. Change Necessary Everyone is Responsible 9. Accessibility Its Good For You 10. Technology Constant Change 11. Accessibility... 12. Core Concept of Accessibility 13. Its About People Always think about users needs 14. DIFFERENT USERS DIFFERENTNEEDS Limited Mobility Cognitive Challenges Colour Blind Seizure Disorders Deaf / Hearing Impaired Visually Impaired Total Blindness Voice Interaction Clear Defined Goals Colour Contrast Clean Animation Closed Captions Screen Magnification Screen Readers 15. Accessibility Standards 16. The Wrong Question Not about if, its about when 17. The Silver Tsunami Fastest growing user group 19% of USA by 2030 4x likely to have disability Experience = Expectations 18. Todays Goal Introduce free tools that are easy to use and can be leveraged today. 19. AGENDA 1. Identify Issues 2. Discover Test Tools 3. Sample Test Plan 4. Testing Techniques 20. 1. Accessibility Issues 21. General Issues Keyboard support Sensory cues Consistent navigation No Context Dynamic content Controlling the UX 22. Image Problems Misuse of alt text Missing alt attributes Charts and graphs CSS images Title attributes Pictures of text 23. Content Issues Poor structure Inappropriate markup Source order Absolute font sizes Poor contrast Inappropriate link text Language undefined 24. 2. Testing Tools 25. Tools *assist* with evaluation Identify *Potential* issues Will not verify 100% accessible 26. Sample Accessibility Testing Toolkit WAVE FireEyes Web Developer Toolbar Functional Accessibility Evaluator Juicy Studio Plugin Firebug / Code Inspector Fangs Web Accessibility Toolbar (IE) Colour Contrast Analyzer Aviewer 27. My Personal Favourite - WAVE Wave Features: Results Summary CSS Toggle Contrast Summary Document Outline Target / Documentation Code Inspector 28. USA Today.com | 34 Errors 29. ESPN.com | 36 Errors 30. NY Times.com | 61 Errors 31. CNN.com | 69 Errors 32. WEB Version toolbarApi 33. Tools catch < 30% errors Keyboard Functionality High Contrast Mode Form Labels / Errors Code Inspection Accessibility Requires Manual Testing 34. 3. Sample Test Plan 35. 10 Step Test Plan 1. Compile UI 2. Sanity Test 3. Validate Code 4. Apply Tools 5. Test Subjectivity 6. Use Keyboard 7. Use Screenreader 8. Verify Target 9. User Testing 10. Rinse & Repeat 36. Compile UI 1. Modules, containers, templates, pages 2. Prioritize frequency & prominence 3. Include typically challenging elements for PWDs 37. Sanity Test No CSS & No Images Does it still make sense? 38. Validate Code Validate HTML & CSS Catches errors bad for Assistive Technology 39. Apply Tools At least 2 Compare results Eliminate false positives 40. Test Subjectivity Judgement calls Improve w/Experience 41. Use Keyboard Most Important Test! Gateway to Accessibility Hardware & Software 42. Keyboard test everything! Links & Buttons are only way to interact with a page* * by default 43. Use Screenreader ... R E A D E R 44. Use Screenreader IE 8+ and latest JAWS Firefox and NVDA Chrome & ChromeVox VoiceOver and iOS/OSX Talkback on Android 45. Verify Target Measure against predefined standard i.e. WCAG 2.0 AA 46. User Testing Involve Real People with Real Disabilities PWD using AT will reveal undiscovered issues Include seniors 47. Rinse & Repeat All Additions & Updates Avoid Accessiblity Atrophy 48. 4. Testing Techniques 49. 1. Keyboard 2. Headings 3. Images 4. Links 5. Forms 6. Colour 7. CSS 8. JavaScript 9. Multimedia Testable Items 50. KEYBOARD 51. Possible Tools: 1. Keyboard 2. Keyboard 3. Keyboard Keyboard Issues: Logical Order Focus Indicators Consistent Behaviour Bypass Blocks The Pointerless Web http://weba.im/pointerlessweb 52. HEADINGS 53. Possible Tools: FAE (functional accessibility evaluator) Juicy Studio WAVE FANGS Heading Issues: Site Structure Visual Indication Follow Hierarchy Used by AT The HTML5 Document Outline http://weba.im/headerfiction 54. IMAGES 55. Possible Tools: WAVE High Contrast Mode Web Dev Toolbar Favlets Image Issues: Alt Attributes Context + Function Make sense w/o Images of Text Text Alternative Decision Tree http://weba.im/alternativetree 56. LINKS 57. Possible Tools: FAE (functional accessibility evaluator) Fangs Juicy Studio Link Issues: Improper Markup Ambiguous Link Text Consistency Cognitive Load Links & Hypertext http://weba.im/linktext 58. FORMS 59. Possible Tools : Keyboard Web Dev Toolbar Wave Form Issues : Required Fields Logical Order Grouped Items Label : Input User Feedback Improving the Accessibility of Forms http://weba.im/canadaforms 60. COLOUR 61. Possible Tools : 1. Colour Contrast Analyser 2. Juicy Studio 3. WAVE Colour Issues : Insufficient Contrast Sole means of info Gradients Images / background Colour Accessibility http://weba.im/24color 62. CSS 63. Possible Tools : Web Dev Toolbar WAVE WAT (IE) CSS Issues : Logical Order Focus Indicators CSS Content Sprites The Content CSS Property and Accessibility http://weba.im/styleoversubstance 64. JavaScript 65. Possible Tools : WAVE Toolbar FireEyes Manual Inspection JavaScript Issues : Dynamic Content Inappropriate Use Modals / Menus Controlling the user Accessible JavaScript http://webaim.org/techniques/javascript/ 66. Multimedia 67. Tools to use: Keyboard Speakers Visuals Multimedia Issues : Autoplay Captioning Transcripts Keyboard Access BBC Multimedia Standards http://weba.im/bbcmedia 68. Vast Majority of Issues Keyboard or Visual Focus 69. Final Words YOU are the best test tool Offer PRAGMATIC solutions ASK Questions Avoid FUD (fear, uncertainty, doubt) Be a SPONGE SHARE your knowledge 70. Final Words YOU are the best test tool Offer PRAGMATIC solutions ASK Questions Avoid FUD (fear, uncertainty, doubt) Be a SPONGE SHARE your knowledge 71. Final Words YOU are the best test tool Offer PRAGMATIC solutions ASK Questions (#a11y is your friend) Avoid FUD (fear, uncertainty, doubt) Be a SPONGE SHARE your knowledge 72. Final Words YOU are the best test tool Offer PRAGMATIC solutions ASK Questions Avoid FUD (fear, uncertainty, doubt) Be a SPONGE SHARE your knowledge 73. Final Words YOU are the best test tool Offer PRAGMATIC solutions ASK Questions Avoid FUD (fear, uncertainty, doubt) Be a SPONGE SHARE your knowledge 74. Final Words YOU are the best test tool Offer PRAGMATIC solutions ASK Questions Avoid FUD (fear, uncertainty, doubt) Be a SPONGE SHARE your knowledge 75. THANK YOU! @PatrickDunphy http://weba.im/psuweb14a11ytest 76. http://www.fundingexchange.org/news/0s-and-1s-the-tsunami-wave-of-change/ http://webconference.psu.edu/ http://sites.psu.edu/willamesbury/2013/09/13/beaver-stadium/ http://www.yourleaf.org/blog/samantha-oneill/2013-04-22/dirty-hands-clean-planet http://www.articlesweb.org/culture/neapolitan-ice-cream-origin-and-recipe-sources http://agilemarketing.com.au/website-accessibility-and-usability-the-basics/ http://www.lifeplus.com/us-en/product-category/vitamins-minerals http://chrisqueen.net/2011/04/19/from-newsreal-blog-bad-medicine/ http://www.thatcutesite.com/kitten-doing-morning-exercises.html http://sciencefiction`.com/2013/12/31/bens-top-5-sciencefiction-com-movies-2013/ http://motorburn.com/2014/03/icar-apple-makes-biggest-in-vehicle-play-yet-with-carplay/ http://mackaycartoons.net/2013/08/20/tuesday-august-20-2013/ http://www.archdaily.com/364518/the-architect-and-the-accessible-city-the-prize-winning-essay/ http://www.relacoesinstitucionais.gov.br/ http://magrabi.org/causes/magazine-for-the-blind/ http://cheezburger.com/6788853248 http://clickheretech.davegreenbaum.com/ http://www.you-are-the-movement.com/?p=84 http://hdfons.com/elmer-fudd/ http://www.thatsyogarbage.com/metal-gear-rising-revengarbage/care-bears-caring-and-sharing-sm/ http://www.picgifs.com/clip-art/spongebob/ http://blog.kevineikenberry.com/influence/intention/improve-your-tomorrows-by-asking-one-question-today/ Photo Credits