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.

Building in Accessibility Throughout Your Project Lifecycle

998 views

Published on

  • Be the first to comment

Building in Accessibility Throughout Your Project Lifecycle

  1. 1. Know Your Role: Buildingin AccessibilityThroughout YourProjects LifecycleAngela M. Hooker#RoleBasedA11y @AccessForAll#PSUweb2013 angelahooker.com
  2. 2. Hello!Angela Hooker@AccessForAll#RoleBasedA11ySlideShareange@angelahooker.comangelahooker.com#RoleBasedA11y | @AccessForAll | #PSUweb2013 2
  3. 3. What part of a project phase isthe mostchallenging, accessibility-wise, for you?#RoleBasedA11y | @AccessForAll | #PSUweb2013 3
  4. 4. I work with a great web team!#RoleBasedA11y | @AccessForAll | #PSUweb2013 4
  5. 5. These are the back enddevelopers.#RoleBasedA11y | @AccessForAll | #PSUweb2013 5
  6. 6. This is our front enddeveloper.#RoleBasedA11y | @AccessForAll | #PSUweb2013 6
  7. 7. This is our designer.#RoleBasedA11y | @AccessForAll | #PSUweb2013 7
  8. 8. This is our usability specialist.#RoleBasedA11y | @AccessForAll | #PSUweb2013 8
  9. 9. This is our content lead.#RoleBasedA11y | @AccessForAll | #PSUweb2013 9
  10. 10. This is our project manager.#RoleBasedA11y | @AccessForAll | #PSUweb2013 10
  11. 11. This is our seniormanager/director.#RoleBasedA11y | @AccessForAll | #PSUweb2013 11
  12. 12. And this is me …#RoleBasedA11y | @AccessForAll | #PSUweb2013 12
  13. 13. My job began as an open-endedposition#RoleBasedA11y | @AccessForAll | #PSUweb2013 13
  14. 14. My job• Ensure we’re following the best practicesin our design, development, and content.• Ensure we’re following all laws andrequirements.• Teach best practices.• Scope is for our main websites and allother new media products and projects.#RoleBasedA11y | @AccessForAll | #PSUweb2013 14
  15. 15. I am our team’s shepherd onthe web.#RoleBasedA11y | @AccessForAll | #PSUweb2013 15
  16. 16. I had to create a process.#RoleBasedA11y | @AccessForAll | #PSUweb2013 16
  17. 17. Success!#RoleBasedA11y | @AccessForAll | #PSUweb2013 17
  18. 18. … but we grew too much, toofast, which meant compromises.#RoleBasedA11y | @AccessForAll | #PSUweb2013 18
  19. 19. We ended up with products thatwere inaccessible.#RoleBasedA11y | @AccessForAll | #PSUweb2013 19
  20. 20. Despite our best intentions, wenever went back to fix things.#RoleBasedA11y | @AccessForAll | #PSUweb2013 20
  21. 21. Wait a minute!#RoleBasedA11y | @AccessForAll | #PSUweb2013 21
  22. 22. Then one day, the unthinkablehappened …#RoleBasedA11y | @AccessForAll | #PSUweb2013 22
  23. 23. [The phone rings, but it’s drowned out by Angela’s sweet snoring.]“Hi, Angela! It’s Jayne. Look, I’m sorry to call you so early this morning. I didn’teven think I’d be up at 6 AM, but, uh, that’s how I roll. Heh heh heh [awkwardsilence].“Yeah, so, we just wrapped up the banking apps last night. Oh, wait; I forgot totell you that we were working on these apps. Well, anyway, I wanted to giveyou a shout out so you can finish your testing by 11 this morning, and by noonwe can fix any of those crazy issues you always find. And that means we canlaunch the apps by about 1 PM, once we give the press office the word.“So, uh, gimme a call when you’re coherent [yeah, right], and I’ll send you thetest server log in. Thanks, Angela! Oh, and the sooner you can get that reportto me, the better. I’ve told Mal [Angela’s supervisor] about this, so he’sexpecting that report, too [fake laugh]. Later, Angie!”#RoleBasedA11y | @AccessForAll | #PSUweb2013 23
  24. 24. That gorram …!#RoleBasedA11y | @AccessForAll | #PSUweb2013 24
  25. 25. We survived!#RoleBasedA11y | @AccessForAll | #PSUweb2013 25
  26. 26. Mo’ projects, mo’ problems …• Last minute requests came in because of:• Urgent projects• Poor planning by project managers• Politics and power plays• Being constrained by technologies we used• Not understanding accessibility• Or just not caring about accessibility, despitebeing bound by law (Section 508)#RoleBasedA11y | @AccessForAll | #PSUweb2013 26
  27. 27. We needed another perspectiveand approach …#RoleBasedA11y | @AccessForAll | #PSUweb2013 27
  28. 28. We needed another perspectiveand approach … create anaccessibility team from people wealready have on staff.#RoleBasedA11y | @AccessForAll | #PSUweb2013 28
  29. 29. I had to talk with management.(See Carol Smith’s Negotiate for the User.)#RoleBasedA11y | @AccessForAll | #PSUweb2013 29
  30. 30. I had needs• Managements overall support• Freedom to do my job• Managements commitment to accessibilityand their ability to see accessibility as apriority• Managements realization that there cant beone accessibility champion who doeseverything related to accessibility#RoleBasedA11y | @AccessForAll | #PSUweb2013 30
  31. 31. I had needs• Managements trust that Im not wasting timeor money• Managements faith in my abilities so that Icould train the team• Management to give me the authority tomake decisions and advise the entire team• Management to create an environment wherepeople are not afraid or powerless to makesuggestions, or improve the team’s projects#RoleBasedA11y | @AccessForAll | #PSUweb2013 31
  32. 32. Share the work based on rolesinstead of correcting their work.#RoleBasedA11y | @AccessForAll | #PSUweb2013 32
  33. 33. “Your code sucks [okay, so I wasntthat rude]; heres whats wrong. Fixit!”#RoleBasedA11y | @AccessForAll | #PSUweb2013 33
  34. 34. “That platform you chose isn’taccessible. Choose another!”#RoleBasedA11y | @AccessForAll | #PSUweb2013 34
  35. 35. “You know those colors you nevershowed me? Well, they dont havesufficient contrast. Change them!”#RoleBasedA11y | @AccessForAll | #PSUweb2013 35
  36. 36. “This isnt clear.” Or, “This iswritten in passive voice anddoesnt engage visitors. Rewrite it!”#RoleBasedA11y | @AccessForAll | #PSUweb2013 36
  37. 37. “Your test results areinaccurate. Test again!”#RoleBasedA11y | @AccessForAll | #PSUweb2013 37
  38. 38. The entire team would becomeresponsible and accountable.#RoleBasedA11y | @AccessForAll | #PSUweb2013 38
  39. 39. The entire team would becomeresponsible and accountable.#RoleBasedA11y | @AccessForAll | #PSUweb2013 39
  40. 40. 4 steps to building in accessibility• Understanding• Training• Standards• Tools#RoleBasedA11y | @AccessForAll | #PSUweb2013 40
  41. 41. Understanding disabilities#RoleBasedA11y | @AccessForAll | #PSUweb2013 41
  42. 42. I trained them according toeach of their roles.#RoleBasedA11y | @AccessForAll | #PSUweb2013 42
  43. 43. What I taught them …• … that we need to test and plan foraccessibility throughout each projectslifecycle.• ... how to choose technology thats accessible.• ... the importance of accessible platforms.• ... to not just do what the cool kids are doingfor the sake of doing it.• … development principles(good, clean, accessible code).#RoleBasedA11y | @AccessForAll | #PSUweb2013 43
  44. 44. What I taught them …• ... accessible design principles.• ... how people who have low-Englishproficiency, dyslexia, cognitive impairments, etc.need plain language and other principles.• … that we need to conduct usability testing withpeople with disabilities.• … how people with disabilities use their assistivetechnologies—and that successfully using oneassistive technology on a project doesnt meanblanket accessibility.#RoleBasedA11y | @AccessForAll | #PSUweb2013 44
  45. 45. We divided up the standards(this was years before Web ContentAccessibility Guidelines (WCAG 2.0) becamethe standard).#RoleBasedA11y | @AccessForAll | #PSUweb2013 45
  46. 46. I gave them tools.#RoleBasedA11y | @AccessForAll | #PSUweb2013 46
  47. 47. The roles overlap.#RoleBasedA11y | @AccessForAll | #PSUweb2013 47
  48. 48. Canada’s accessibility resources• AccessibilityResponsibilityBreakdown• Canadian Government• Based on WCAG 2.0• CoopérativeAccessibilitéWeb#RoleBasedA11y | @AccessForAll | #PSUweb2013 48
  49. 49. It didn’t all happen overnight.#RoleBasedA11y | @AccessForAll | #PSUweb2013 49
  50. 50. What didn’t work• Putting the work before relationships• Disinterest from upper management• Thinking our process won’t evolve• Allowing the accessibility program to bepersonality driven—it must outlive me#RoleBasedA11y | @AccessForAll | #PSUweb2013 50
  51. 51. What we gained• We saved money from not making costlyaccessibility fixes later.• Having a solid process fights the“accessibility is time consuming andexpensive” issues.• We have a real, working process.#RoleBasedA11y | @AccessForAll | #PSUweb2013 51
  52. 52. We just finished our secondresponsive design project.#RoleBasedA11y | @AccessForAll | #PSUweb2013 52
  53. 53. My role is …#RoleBasedA11y | @AccessForAll | #PSUweb2013 53
  54. 54. Now, back to you …#RoleBasedA11y | @AccessForAll | #PSUweb2013 54
  55. 55. Don’t panic• If you dont have experience in an area ofaccessibility, someone is always willing to talkwith your group and teach them. Arrange abrown bag or a webinar.• Host a hackathon: Invite people from insideand outside your organization to worktogether to fix your top accessibility barriers.• Organize a campus/local accessibility group.#RoleBasedA11y | @AccessForAll | #PSUweb2013 55
  56. 56. Bridge the gap betweenpeople, departments, andphilosophies.#RoleBasedA11y | @AccessForAll | #PSUweb2013 56
  57. 57. Final thoughts• Start small.• One person may have many roles.• Adapt this to your organization and itsculture—keep it evolving.• Build rapport within and among teams—talk.• Negotiate—don’t get intimidated.• It’s about what’s best for people (youraudience).#RoleBasedA11y | @AccessForAll | #PSUweb2013 57
  58. 58. (Remember, Jayne wasn’tannoying because he didn’tunderstand accessibility.)#RoleBasedA11y | @AccessForAll | #PSUweb2013 58
  59. 59. Resources#RoleBasedA11y | @AccessForAll | #PSUweb2013 59
  60. 60. Sample processTailor this to your needs and to each project.1. Document this entire process.2. Choose who should work on the project, andassign tasks/roles to everyone according totheir skills and strengths.3. Plan/gather requirements with the decisionmakers, stakeholders, designers, developers,content providers, etc.#RoleBasedA11y | @AccessForAll | #PSUweb2013 60
  61. 61. Sample process4. Determine which standards and guidelinesare appropriate for your project (WCAG2.0, Mobile Best Practices, ATAG, CVAA, iOSAccessibility Standards, etc.).5. Put accessibility requirements in any vendorrequests for proposals and/or contracts.6. Determine your users’ top tasks.#RoleBasedA11y | @AccessForAll | #PSUweb2013 61
  62. 62. Sample process7. Review the information architecture.8. Analyze the resulting wireframes.9. Conduct usability testing with paperprototypes (wireframes).10.Choose and test the color scheme.11.Assess the design mockups.12.Review the final written content.#RoleBasedA11y | @AccessForAll | #PSUweb2013 62
  63. 63. Sample process13.Conduct more informal user testing (test themockups, writing, information architecture).14.Review the templates (including ARIA);validate/remediate the (semantic) code.a. Just because your code validates doesn’t meanyour project is accessible—validate anyway!b. Just because your site doesn’t validate doesn’tmean it’s inaccessible—validate anyway!#RoleBasedA11y | @AccessForAll | #PSUweb2013 63
  64. 64. Sample process15.Review the style sheets; validate/remediatethe styles.16.Test with automated accessibility tools.17.Review the scripting(JavaScript, AJAX, jQuery, YUI, whatever); addmore ARIA, if needed.18.Test again with automated tools.#RoleBasedA11y | @AccessForAll | #PSUweb2013 64
  65. 65. Sample process19.Test with assistive technologies.20.Test on mobile devices and e-readers.21.Test with real people, including severalpeople with different disability types—don’tforget to test the written content, too.22.Continue to improve and test after thelaunch (since browsers and software change).#RoleBasedA11y | @AccessForAll | #PSUweb2013 65
  66. 66. WCAG 2.0 and general *a11y• Government of Canada Web Experience Toolkit(WET)—above all else, see the AccessibilityResponsibilities Breakdown; it will help youcreate your process and define roles.• Constructing a POUR Website, WebAIM• BBC’s Future Media Standards and Guidelines• A11y Buzz* accessibility#RoleBasedA11y | @AccessForAll | #PSUweb2013 66
  67. 67. Disabilities• Disability types/issues– Visual, cognitive, motor, and hearing impairments;neurological/seizure disorders; elderly and aging• What Is Assistive Technology? – ATIA• Videos of people using assistivetechnologies, from AssistiveWare• How Assistive Technology Works(demonstrations), University of Dundee#RoleBasedA11y | @AccessForAll | #PSUweb2013 67
  68. 68. Project management• Integrating Accessibility in the Organization’sWeb Development Life Cycle, Denis Boudreau• Accessibility for Project Managers, HennySwan• Managing Accessibility Compliance in theEnterprise, Karl Groves• Plan for Accessibility, Option Keys#RoleBasedA11y | @AccessForAll | #PSUweb2013 68
  69. 69. Project management• Planning Accessibility, Government of Canada• Just Ask: Integrating Accessibility ThroughoutDesign, Shawn Lawton Henry#RoleBasedA11y | @AccessForAll | #PSUweb2013 69
  70. 70. Writing content• Accessibility for Web Writers, by 4 Syllables• Content and Usability: Web Writing, WebCredible• Make it Plain: Accessibility and UsabilityThrough Plain Language, Angela Hooker (hey!)• Plain Language: Accessibility forInformation, Whitney Quesenbery• Plain Language Checklist, PlainLanguage.gov#RoleBasedA11y | @AccessForAll | #PSUweb2013 70
  71. 71. Design• Web Accessibility for Designers, WebAIM• Just Ask: Integrating Accessibility ThroughoutDesign, Shawn Lawton Henry• Design Considerations, WebAIM• Color Contrast Checker, WebAIM• Accessibility Color Wheel• Trace Photosensitive Epilepsy Analysis Tool(PEAT) – tests flashing content#RoleBasedA11y | @AccessForAll | #PSUweb2013 71
  72. 72. Development• Web Accessibility for Developers (videos), BBC• Build a code library!• Use code generators (see Accessify’s tools).• Web Developer Toolbar, Chris Pederick• Firebug, Mozilla• WCAG 2.0 Checklist, WebAIM• Web Accessibility Gone Wild, WebAIM#RoleBasedA11y | @AccessForAll | #PSUweb2013 72
  73. 73. Development• W3C Mobile Web Best Practices• Juicy Studio Accessibility Toolbar —forARIA, data tables, color contrast• aChecker, Inclusive Design Institute at OCADUniversity• WAVE Toolbar, WebAIM• Favelets for Checking Web Accessibility, JimThatcher#RoleBasedA11y | @AccessForAll | #PSUweb2013 73
  74. 74. Quality assurance• Template for Accessibility EvaluationReports, W3C-WAI• Accessibility Evaluation Resources, W3C-WebAccessibility Initiative• Evaluation, Testing, and Tools, WebAIM• WCAG 2.0 Checklist, WebAIM• Wickline Color Blind Web Page Filter• Web Developer Toolbar, Chris Pederick#RoleBasedA11y | @AccessForAll | #PSUweb2013 74
  75. 75. Quality assurance• Firebug, Mozilla• Favelets for Checking Web Accessibility, JimThatcher• Trace Photosensitive Epilepsy Analysis Tool(PEAT) – tests flashing content• Web Accessibility Initiative (WAI), EvaluatingWebsites for Accessibility#RoleBasedA11y | @AccessForAll | #PSUweb2013 75
  76. 76. Quality assurance• Central Office of Information (COI), DeliveringInclusive Websites• Establishing a Screen Reader Test Plan, HennySwan• How to Use NVDA and Firefox to Test forAccessibility, Marco Zehe• Web Accessibility Gone Wild, WebAIM#RoleBasedA11y | @AccessForAll | #PSUweb2013 76
  77. 77. Usability• Usability Testing and Conducting UsabilityTesting, Just Ask: Integrating AccessibilityThroughout Design, Shawn Lawton-Henry• Usability Testing for People withDisabilities, Kathy Wahlbin and Mary HunterUtt• Steve Krug, Rocket Surgery Made Easy#RoleBasedA11y | @AccessForAll | #PSUweb2013 77
  78. 78. Thank you!Angela Hooker@AccessForAllange@angelahooker.comangelahooker.com#RoleBasedA11y | @AccessForAll | #PSUweb2013 78

×