1. Accessibility Testing in the Real World Angela M. Hooker @AccessForAll angelahooker.com Accessing Higher Ground – #AHG11 November 2011

2. Real world fact: What is accessibility testing about? 2 Accessibility Testing in the Real World / @AccessForAll

3. Its about the people! Accessibility Testing in the Real World / @AccessForAll 3

4. Its about the people! The goal of every web project is to provide access to information Were testing to uncover issues that would bar people from that information Accessibility Testing in the Real World / @AccessForAll 4

5. Its about the people! Find out the needs of your current audience Learn about the needs of all users to broaden your audience – People who are abled – People with different abilities: Aging: http://www.w3.org/WAI/posts/2009/older-users- onlinehttp://www.w3.org/WAI/posts/2009/older-users- online Cognitive: http://webaim.org/articles/cognitive/http://webaim.org/articles/cognitive/ Auditory: http://webaim.org/articles/auditory/http://webaim.org/articles/auditory/ Motor: http://webaim.org/articles/motor/http://webaim.org/articles/motor/ Visual: http://webaim.org/articles/visual/http://webaim.org/articles/visual/ Accessibility Testing in the Real World / @AccessForAll 5

6. Its about the people! Learn how people with different abilities use the web: http://www.w3.org/WAI/intro/people-use- web/Overview.html http://www.w3.org/WAI/intro/people-use- web/Overview.html Accessibility Testing in the Real World / @AccessForAll 6

7. What is the desired outcome from accessibility testing? 7 Accessibility Testing in the Real World / @AccessForAll

8. Provide equivalent access Make sure that peopleno matter what their abilities arecan use your site/app/project The equivalent functionality should provide your users the same information Accessibility Testing in the Real World / @AccessForAll 8

9. The ideal processyour goal (simplified for this presentation) 9 Accessibility Testing in the Real World / @AccessForAll

10. Your goal: The ideal process Plan/gather requirements with the decision makers, stakeholders, designers, developers, content providers Help determine your users top tasks Review the information architecture Analyze the resulting wireframes Conduct paper prototype (wireframes) user testing Test the color scheme Assess the design mockups Accessibility Testing in the Real World / @AccessForAll 10

11. Your goal: The ideal process Review the final written content Conduct more informal user testing (test the mockups, writing, information architecture) Review the templates (including ARIA); validate/remediate the (semantic) code – Just because your code validates doesnt mean your project is accessiblevalidate anyway! – Just because your site doesnt validate doesnt mean its inaccessiblevalidate anyway! Review the style sheets; validate/remediate the styles Accessibility Testing in the Real World / @AccessForAll 11

12. Your goal: The ideal process Test with automated accessibility tools Review the scripting (JavaScript, AJAX, jQuery, YUI, whatever); add more ARIA, if needed Test again with automated tools Test with assistive technologies Test on mobile devices and e-readers Test with real people, including several people with different disability types Continue to improve and test after the launch Accessibility Testing in the Real World / @AccessForAll 12

13. The real world … 13 Accessibility Testing in the Real World / @AccessForAll

14. (The phone rings, but its drowned out by Angelas sweet snoring. The caller mumbles, I knew it. I got her voice mail.) Hi, Angela! Its Devin. Look, Im sorry to call you so early this morning. I didnt even think Id be up at 6:30 AM, but, uh, thats how I roll. Heh heh heh (awkward silence). Yeah, so, we just wrapped up the banking app last night. Oh, wait; I forgot to tell you that we were working on this app. Well, anyway, I wanted to give you a shout out so you can finish your testing by 11 this morning, and by noon we can fix any of those crazy issues you always find. And that means we can launch the app by about 1 PM, once we give the press office the word. So, uh, gimme a call when youre coherent [yeah, right], and Ill send you the test server log in. Thanks, Angela! Oh, and the sooner you can get that report to me, the better. Ive told Hank [Angelas supervisor] about this, so hes expecting that report, too (fake laugh). Later, Ange! 14

15. Be ready for that scenarioits going to happen. 15 Accessibility Testing in the Real World / @AccessForAll

16. The real world … Thats a typical day for many of usdespite the fact that we know, and tell others, that accessibility reviews and testing cant wait Ive also heard: Im not even an accessibility person. They just added this to my job, and I dont know what to do! Accessibility Testing in the Real World / @AccessForAll 16

17. The real world: Why? Last minute requests for testing come because of: – Urgent projects – Politics and power plays – Being constrained by technologies used by your organization – Poor planning by project managers – Not understanding accessibility: Its expensive Its time consuming Accessibility Testing in the Real World / @AccessForAll 17

18. The real world: What to do? When you cant fix everything NOW, repair items that will make the biggest impact – Testing and remediating these few items can make a big impact on accessibility without having to rebuild your site immediately: Structure: … headings Navigable items: the dotted outline appears All non-text elements: alternative text Forms: label tags, fieldsets/legends, error messages Text and graphical elements: color contrast Accessibility Testing in the Real World / @AccessForAll 18

19. The real world: What to do? Determine other manageable tests and fixes – Identify the critical issues that cannot wait – See Dennis Lembrees 25 Ways to Make Your Website Accessible: http://weba.im/25axshttp://weba.im/25axs – See Todd Klootss Easy Fixes to Common Accessibility Problems: http://weba.im/CommonAccessFixeshttp://weba.im/CommonAccessFixes – Prioritize your testing and remediation by – Essential functionality – Your users top tasks – The most used pages – Critical information Accessibility Testing in the Real World / @AccessForAll 19

20. Creating a new reality (fixing the real world process) 20 Accessibility Testing in the Real World / @AccessForAll

21. Building this new process is not going to happen overnight … but it will ensure that your future project testing will go faster 21 Accessibility Testing in the Real World / @AccessForAll

22. Just like youll prioritize the real world fixes, prioritize the steps for your new plan 22 Accessibility Testing in the Real World / @AccessForAll

23. Be empowered Be ruthless, zealous, and thorough in your testing Be ready for backlash – People wont want to hear comments they perceive as critical of their work Your work can protect you and your organization from negative repercussions resulting from accessibility problems Accessibility Testing in the Real World / @AccessForAll 23

24. Dont be an island Get everyone involved – Make everyone responsible for a piece of the accessibility pie – This will change the mindset right awaypeople will realize that implementing and testing for accessibility shouldnt be an afterthought – Accessibility Responsibility Breakdown http://alpha.gcwwwtemplates.tbs- sct.ircan.gc.ca/theme-clf2- nsi2/accessRespBreakdown-eng.html http://alpha.gcwwwtemplates.tbs- sct.ircan.gc.ca/theme-clf2- nsi2/accessRespBreakdown-eng.html Accessibility Testing in the Real World / @AccessForAll 24

25. Influence the man Get your supervisors support Until decision makers see accessibility as a priority, youll always have a battle – Accessibility in a Suit and Tie http://thinkvitamin.com/design/accessibility-in-suit- and-tie/ http://thinkvitamin.com/design/accessibility-in-suit- and-tie/ – Resources for Developing a Web Accessibility Business Case for Your Organization http://www.w3.org/WAI/bcase/resources http://www.w3.org/WAI/bcase/resources – Improve Sensitivity Toward People with Disabilities http://www.slideshare.net/srains/top10- reasons?from=ss_embed#text-version http://www.slideshare.net/srains/top10- reasons?from=ss_embed#text-version Accessibility Testing in the Real World / @AccessForAll 25

26. Help your colleagues … What can you do to bridge the gap between people, departments, and philosophies? – Sometimes an accessibility consultant has to be a counselor, evangelist, educator, and a maverick (among other roles) – Make sure youre not being a nag – Give your colleagues useful information and solutionsnot headaches Accessibility Testing in the Real World / @AccessForAll 26

27. Help your colleagues … – Stand against any existing us versus them vibe – Create a no shame; no blame atmosphere – Make sharing your testing results a time to educatedon't make Devin feel like an idiot Accessibility Testing in the Real World / @AccessForAll 27

28. Develop a policy and process Write an in-house policy (not an accessibility statement that your users see) – Developing Organizational Policies on Web Accessibility http://www.w3.org/WAI/impl/polhttp://www.w3.org/WAI/impl/pol Accessibility Testing in the Real World / @AccessForAll 28

29. Develop a policy and process Develop (and iterate) your processone that fits accessibility throughout every projects life cycle – Youll save money from not making costly accessibility fixes later – Having a solid process will fight the accessibility is time consuming myth – Just Ask: Integrating Accessibility Throughout Design http://www.uiaccess.com/accessucd/http://www.uiaccess.com/accessucd/ Accessibility Testing in the Real World / @AccessForAll 29

30. Build a code library Focus on developing reusable solutions for your developers: build it once; use it again; accessibility tweaks will be minimal Use code generators (see the tools at Accessify http://accessify.com/tools-and- wizards/)http://accessify.com/tools-and- wizards/ Accessibility Testing in the Real World / @AccessForAll 30

31. Refer to personas Take advantage of user personas – Aids in remembering all users throughout the process – Personas of Persons with Disabilities http://curbcut.net/accessibility/personas-of-persons- with-disabilities/ http://curbcut.net/accessibility/personas-of-persons- with-disabilities/ – Accessibility in User-Centered Design: Personas http://uiaccess.com/accessucd/personas.html http://uiaccess.com/accessucd/personas.html – Dive into Accessibility: Introduction (see Character Sketches) http://www.buurenvan.nl/helptools/accessweb/Dive %20Into%20Accessibility/introduction.html http://www.buurenvan.nl/helptools/accessweb/Dive %20Into%20Accessibility/introduction.html Accessibility Testing in the Real World / @AccessForAll 31

32. Use a checklist, but … Checklists versus usability and access: – Use a checklist when testing, so you dont forget anything – Remember: You can satisfy every requirement and still have accessibility problems – Dont lose sight of your project being usable and the ability to access your information and complete tasks Accessibility Testing in the Real World / @AccessForAll 32

33. Select the proper tools No one tool can adequately test your projectalso review everything manually – See The Importance of Human Evaluation http://webaim.org/articles/process/human http://webaim.org/articles/process/human Make the most of the free tools Accessibility Testing in the Real World / @AccessForAll 33

34. Select the proper tools Issues to consider when selecting a tool: – How much time do you have to learn the tool? – What type of error reporting do you need (detailed output or a tool that flags errors on screen)? – Do you need a tool that automates repairs? – Do you have large projects with frequently updated pages? Accessibility Testing in the Real World / @AccessForAll 34

35. Select the proper tools Issues to consider when selecting a tool: – Do you have static pages? – How many people will update your content? – Are there demos (online or in-person events) available for the tool? – Can you use an evaluation version before you purchase the tool? – Do you know what functionality you need in the product? Accessibility Testing in the Real World / @AccessForAll 35

36. Select the proper tools An enterprise tool will work well for: – A large organization that has several sites or a large site The free tools will work well for: – An organization that uses a template-based system Accessibility Testing in the Real World / @AccessForAll 36

37. Test with real people, too! Testing with people with disabilities will help you find errors that you may miss Recruit people with different disability types Go to Twitter and other social media outlets Ask your friends and family Accessibility Testing in the Real World / @AccessForAll 37

38. Test with real people, too! Recruiting Participants http://dev.opera.com/articles/view/26- accessibility-testing/#recruitingtesters http://dev.opera.com/articles/view/26- accessibility-testing/#recruitingtesters Screening Participants http://uiaccess.com/accessucd/ut_ppt- screen.html http://uiaccess.com/accessucd/ut_ppt- screen.html Accessibility Testing in the Real World / @AccessForAll 38

39. Dont forget: evaluate written content Oft forgotten part of accessibility testing If youre not well-versed in – Editorial principles – Plain language – Understanding the impact of cognitive disabilities – Low-language proficiency – Low-literacy – Non-native language speakers … then have someone else review your content from these viewpoints Accessibility Testing in the Real World / @AccessForAll 39

40. Document your testing Write testing scenarios, based on the standards – Pre-determine what satisfies conformance Track issues and fixes Use logs Prepare your logs with fine details Keep these logs forever – Depending upon your work setting, they may save you later by proving your due diligence Accessibility Testing in the Real World / @AccessForAll 40

41. Document your testing If you have a vendor perform testing for you, make sure they document their testing and give you raw data as well as detailed reports – Put this in the project contract – Make sure younot the vendorare responsible for determining what testing results satisfies conformance with testing criteria and standards Accessibility Testing in the Real World / @AccessForAll 41

42. Maintain and improve your project Continue testingdont stop because the project ended Consider what testing is appropriate given your projects size, frequency of updates, your workload … Have a hack day event: Pick one of your projects, invite people inside and outside your organization, and work together to fix its top accessibility problems Accessibility Testing in the Real World / @AccessForAll 42

43. Continue to educate … Sponsor brown-bag events to educate your colleagues, including management – Schedule regular lunch time events, and give presentations on accessibility topics – Call on other accessibility consultants to speak at these events Accessibility Testing in the Real World / @AccessForAll 43

44. For the decision makers 44 Accessibility Testing in the Real World / @AccessForAll

45. Decision makers: support your team Give your staff freedom – Trust them to do their jobs Allow the testers, designers, developers, accessibility consultants, and usability specialists to be involved in the project from conception – Dont bring them in at the 11 th houryoull be wasting your companys time and money Provide training for your employees, and respect that people learn differentlysome enjoy self- study; others may need or want a formal class Accessibility Testing in the Real World / @AccessForAll 45

46. Decision makers: support your team Give your accessibility team the authority to make decisions and advise your entire team – Dont create an environment where people are afraid or powerless to make suggestions, or improve the teams projects – Remember, this is for your users and your companys benefit, which will make you shine Accessibility Testing in the Real World / @AccessForAll 46

47. Resources 47 Accessibility Testing in the Real World / @AccessForAll

48. Resources: standards Web Content Accessibility Guidelines (WCAG) 2.0 – The Pickards WCAG 2.0 Lite (a stripped-down, easy to read version of WCAG 2.0) The Pickards WCAG 2.0 Lite W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/ http://www.w3.org/TR/mobile-bp/ Accessibility Testing in the Real World / @AccessForAll 48

49. Resources: checklists WebAIMs WCAG 2.0 Checklist Aaron Cannons Accessibility Checklist 3phas WCAG 2.0 Quick Reference (This tool allows one to choose a level of WCAG 2.0 conformance [A, AA, or AAA], and provides the applicable criteria and an explanation of each guideline.) 3phas WCAG 2.0 Quick ReferenceWCAG 2.0 conformance Accessibility Testing in the Real World / @AccessForAll 49

50. Resources: toolsreviews A Review of Free, Online Accessibility Tools http://webaim.org/articles/freetools/ http://webaim.org/articles/freetools/ iCITA Functional Accessibility Evaluator (review by Joe Dolson) http://www.joedolson.com/articles/2007/11/ an-example-of-automated-accessibility- testing/ http://www.joedolson.com/articles/2007/11/ an-example-of-automated-accessibility- testing/ Accessibility Testing in the Real World / @AccessForAll 50

51. Resources: tools W3C-Web Accessibility Initiative (WAI) – Selecting Web Accessibility Evaluation Tools http://www.w3.org/WAI/eval/selectingtools.html http://www.w3.org/WAI/eval/selectingtools.html – Web Accessibility Evaluation Tools http://www.w3.org/WAI/ER/tools/ http://www.w3.org/WAI/ER/tools/ – Web Design References: Tools http://www.d.umn.edu/itss/training/online/webd esign/tools.html http://www.d.umn.edu/itss/training/online/webd esign/tools.html Accessibility Testing in the Real World / @AccessForAll 51

52. Resources: toolsmy favorite Caveat: These are my favorite, but I use others Favelets for Checking Web Accessibility http://jimthatcher.com/favelets/index.htm http://jimthatcher.com/favelets/index.htm Juicy Studio Accessibility Toolbar (Firefox) reviews ARIA, data tables, and color contrast https://addons.mozilla.org/en- US/firefox/addon/juicy-studio-accessibility- too/ https://addons.mozilla.org/en- US/firefox/addon/juicy-studio-accessibility- too/ Accessibility Testing in the Real World / @AccessForAll 52

53. Resources: toolsmy favorite WebAIM WAVE: Check your page online, by upload, with the WAVE toolbar http://wave.webaim.org/ http://wave.webaim.org/ Web Developer Toolbar (Firefox and Chrome) http://chrispederick.com/work/web- developer/ http://chrispederick.com/work/web- developer/ Deque FireEyes (Firefox) http://www.deque.com/products/worldspace -fireeyes http://www.deque.com/products/worldspace -fireeyes Accessibility Testing in the Real World / @AccessForAll 53

54. Resources: toolsmy favorite WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker http://webaim.org/resources/contrastchecker Accessibility Color Wheel http://gmazzocato.altervista.org/colorwheel/ wheel.php http://gmazzocato.altervista.org/colorwheel/ wheel.php Wickline Color Blind Web Page Filter http://colorfilter.wickline.org/ http://colorfilter.wickline.org/ Accessibility Testing in the Real World / @AccessForAll 54

55. Resources: toolsmy favorite Firebug (if you use FireEyes on the Mac, be sure you have the right version of Firebug) https://addons.mozilla.org/en- US/firefox/addon/firebug/ https://addons.mozilla.org/en- US/firefox/addon/firebug/ Web Accessibility Toolbar (WAT)IE http://www.paciellogroup.com/resources/wat -ie-about.html http://www.paciellogroup.com/resources/wat -ie-about.html Accessibility Testing in the Real World / @AccessForAll 55

56. Resources: toolsmy favorite Trace Photosensitive Epilepsy Analysis Tool (PEAT) –tests flashing content http://trace.wisc.edu/peat/ http://trace.wisc.edu/peat/ My trusty keyboard (yours, too) Accessibility Testing in the Real World / @AccessForAll 56

57. Resources: conducting user testing Rocket Surgery Made Easy, by Steve Krug Fast, Good, and Cheap http://www.useit.com/alertbox/fast- methods.html http://www.useit.com/alertbox/fast- methods.html Paper Prototyping http://www.useit.com/alertbox/20030414.html http://www.useit.com/alertbox/20030414.html Quick and Dirty Remote User Testing http://www.alistapart.com/articles/quick-and- dirty-remote-user-testing/ http://www.alistapart.com/articles/quick-and- dirty-remote-user-testing/ Accessibility Testing in the Real World / @AccessForAll 57

58. Resources: glossaries Web Accessibility and Development Glossary http://www.joedolson.com/glossary.php http://www.joedolson.com/glossary.php Glossary of Commonly Used Accessibility Terms http://www.doit.wisc.edu/accessibility/online- course/glossary.htm http://www.doit.wisc.edu/accessibility/online- course/glossary.htm Accessibility Testing in the Real World / @AccessForAll 58

59. Resources: test plans/preparation Web Accessibility Initiative (WAI), Evaluating Websites for Accessibility http://www.w3.org/WAI/eval/http://www.w3.org/WAI/eval/ Central Office of Information (COI), Delivering Inclusive Websites http://coi.gov.uk/guidance.php?page=134http://coi.gov.uk/guidance.php?page=134 Henny Swan, Establishing a Screen Reader Test Plan http://www.spotlessinteractive.com/articles/accessibili ty/screen-reader-test-plan.php http://www.spotlessinteractive.com/articles/accessibili ty/screen-reader-test-plan.php WebAIM, Web Accessibility Gone Wild http://webaim.org/articles/gonewild/ http://webaim.org/articles/gonewild/ Accessibility Testing in the Real World / @AccessForAll 59

60. Resources: logs/documentation The Pickards Accessibility Testing Log http://www.thepickards.co.uk/index.php/200 909/accessibility-testing-log/ http://www.thepickards.co.uk/index.php/200 909/accessibility-testing-log/ Template for Accessibility Evaluation Reports http://www.w3.org/WAI/eval/template http://www.w3.org/WAI/eval/template Accessibility Testing in the Real World / @AccessForAll 60

61. Thank you! Angela Hooker @AccessForAllAccessForAll ange@angelahooker.com angelahooker.com Accessibility Testing in the Real World / @AccessForAll 61