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.

Wordcamp 2014 - How to Perform an Accessibility Audit

1,371 views

Published on

As Accessibility becomes of increasing importance on the web - also a legal requirement in Ontario, Canada - so too is the rising need to be aware of how to look at sites with a critical eye. This presentation is about the process of How to Perform an Accessibility Audit. I developed this process in early 2014 while working at Metroland Digital.

This marks my very first deck on Slideshare!

Published in: Design
  • Be the first to comment

  • Be the first to like this

Wordcamp 2014 - How to Perform an Accessibility Audit

  1. 1. How to Perform an Accessibility Audit Janis Yee User Experience www.pdx.ca
  2. 2. About Me Digital Designer since 2003 (Yes, Over 10 Years) Stalk me on LinkedIn: http://ca.linkedin. com/in/janisyee/ (Or search Janis Yee)
  3. 3. Ontario is the FIRST in the world to introduce mandatory Accessibility Standards for Organizations
  4. 4. Why are we really here?
  5. 5. Because you want to be in front of the pack with this trending knowledge. Accessibility is not a trend
  6. 6. Because the law made it a priority for your organization and you were put in the forefront of it due to limited budgets. Organizations will always pursue the path of least cost.
  7. 7. Because you couldn’t Google how to do an accessibility audit. Yes, I’ve tried.
  8. 8. Because you can’t automate ‘dat! There are tools but it takes a human to assess if the change is necessary.
  9. 9. This session is for: ● Project Managers ● UX and Designers ● Front End Developers ● Content managers ● Contractors / Freelancers
  10. 10. Audit Project We will not be going through the AODA or WCAG 2.0 in detail.
  11. 11. Building a new site vs. Assessing an existing site
  12. 12. Pre-Requisite Skills Tools Step by Step Results
  13. 13. Pre-Requisite Skills What you need to know before you start
  14. 14. Understanding AODA vs Minimum Legal Requirements vs. Needs of your Audience
  15. 15. “No one cares how much you know, until they know how much you care” Theodore Roosevelt
  16. 16. http://www.youtube.com/watch?v=c0nvdiRdehw
  17. 17. Everyone is a gradient of ability Current Temporal Evolving
  18. 18. Understanding WCAG 2.0
  19. 19. Understanding WCAG 2.0 Web Content Accessibility Guidelines
  20. 20. 1. Perceivable
  21. 21. 2. Operable
  22. 22. 3. Understandable
  23. 23. 4. Robust
  24. 24. Guidelines Level A - Basics Level AA - Extra Mile Level AAA - Near Impossible
  25. 25. Other Prerequisites ● Intermediate technical skills to install and use browser plugins or computer tools, and to take lots of screenshots ● Basic understanding of HTML and CSS
  26. 26. Tools for Audits Tools and Tech
  27. 27. Tools you may need
  28. 28. First Step Determine the scope
  29. 29. # Element 1.0 Homepage (URL) 1.1 Header 1.1.1 Logo
  30. 30. Examine each element from different lenses Remember POUR (Perceivable, Operable, Understandable, Robust)
  31. 31. Missing alt attribute!
  32. 32. Font Colour Contrast makes it difficult to read.
  33. 33. # Element WCAG Reference Issue Details 1.0 Homepage (URL) Guideline 2.1 Keyboard Accessible (URL) Can’t see the tab focus. (Screenshot) 1.1 Header -- -- 1.1.1 Logo Guideline 1.1 Text Alternatives (URL) Image tag does not contain alt text.
  34. 34. Trust your Gut
  35. 35. # Element WCAG Reference Issue Details Proposed Solution 1.0 Homepage (URL) Guideline 2.1 Keyboard Accessible (URL) Can’t see the tab focus. G90: Providing keyboard-triggered event handlers (URL) 1.1 Header -- PASS 1.1.1 Logo Guideline 1.1 Text Alternatives (URL) Image tag does not contain alt text. G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content (URL)
  36. 36. # Element WCAG Reference Issue Details Proposed Solution Responsible Provide alternate colour HEX#. Designer Change of scope. Refactor required. Project Manager Write alternative text for images. Content Manager Adding alt attribute to <img>. Developer
  37. 37. # Eleme nt WCAG Referenc e Issue Details Proposed Solution Responsible Time Provide alternate colour HEX#. Designer 15 Minutes Change of scope. Refactor required. Project Manager 3 Weeks Write alternative text for images. Content Manager 1 Hour Adding alt attribute to <img>. Developer 15 Minutes
  38. 38. Results What is expected in the end?
  39. 39. Deliverables 1. Full audit report for reference 2. Action list for each team member 3. Time-frame for implementation scope
  40. 40. Don’t work in a bubble
  41. 41. Understanding Designers
  42. 42. Designers plan for considerations in... User Context Mobile Context Feasibility
  43. 43. Designers plan for considerations in... User Context Mobile Context Feasibility
  44. 44. Tips for Designers ● Planning with an understanding of accessibility early on will help diminish the fear of lack of creativity. ● Understand that if users can’t access your site, your beautiful handiwork is moot.
  45. 45. Understanding Developers
  46. 46. Developers plan for considerations in... Software Technology Language
  47. 47. Developers plan for considerations in... Software Technology Language
  48. 48. Talking to Developers ● Assistive technology isn’t perfect and there are no standards ● Coding practices recommended by WCAG are deprecated. ● Provide clear understanding of the problem and they will usually have a better solution for you
  49. 49. Understanding Project Managers
  50. 50. Understanding Project Managers Effort for Impact Limited Resources Stakeholder Needs
  51. 51. Understanding Project Managers Effort for Impact Limited Resources Stakeholder Needs
  52. 52. Accessibility Impact Resolution Feasibility
  53. 53. Hard to Read
  54. 54. Impossible to Read
  55. 55. Easier to Read
  56. 56. Last year, 1 in 12 men, and about 1 in 200 women – or about 4.5% of the world’s population – experience color blindness in some form. Source: http://blog.eyequant.com/2013/07/02/108-million-web-users-are-color-blind-how-do-they-see-your-website/
  57. 57. Understanding Content Managers
  58. 58. Understanding Content Managers Editorial Standards and Voice Reach Multimedia Content
  59. 59. Understanding Content Managers Editorial Standards Reach Multimedia Content
  60. 60. Talking to Content Managers ● Responsible for writing copy for alternate text ● Provide clear direction regarding accessible content practices ● Training on how to update the site with accessibility in mind for example: ○ How to add alternative text to images ○ Transcriptions for video content
  61. 61. Personal Challenges Lessons I learned
  62. 62. Challenge #1 Lack of Awareness and Empathy
  63. 63. Challenge #2 All the rules are technically Guidelines
  64. 64. Challenge #3 There are no standards for Assistive Technology
  65. 65. Challenge #4 It’s never over with Accessibility
  66. 66. Thank You Questions? Janis Yee, User Experience www.pdx.ca
  67. 67. Image Credits ● Slide 3: http://javesca.com/what-does-it-mean-to-make-a-difference ● Slide 10: Nazcarpine.com ● Slide 12: http://www.newhorizons.com/localweb/bg/sofia/project-management-courses.aspx ● Slide 13: http://project-management.com/3-tips-for-how-to-cope-with-project-overload/ ● Slide 14: http://victoriasfoodsecrets.com/2013/04/cooking-skills-classes-taught-by-chef-curtis-webb/ ● http://www.picklee.com/2013/12/19/diy-recipe-book-10-minute-transformation/ ● Slide 19: http://carnyus.com/category/steering-wheel ● Slide 22,23,24: morguefile.com ● Slide 25: http://ajr.org/2014/10/28/radically-different-future-news/ ● Slide 26: http://outsideperception.wordpress.com/2013/04/03/where-oh-where-have-my-carrot-tops-gone/ ● Slide 27: http://www.computertutorinc.net/computer-maintenance-safety-tips/ ● Slide 31: https://twitter.com/NicKatniss/status/505001845249835008 ● Slide 52: http://www.smbceo.com/2013/05/02/championship-team-document-management/ ● Slide 53: http://www.teapartynation.com/profiles/blogs/watch-out-florida-here-comes-america-s-bubble-government ● Slide 54: http://www.aspirantsg.com/top-11-practical-second-skills-to-make-a-living-in-singapore/ ● Slide 58: http://zeroturnaround.com/rebellabs/devoxx-hackfest-in-action-attracts-developers/ ● Slide 62: http://www.aspirantsg.com/top-11-practical-second-skills-to-make-a-living-in-singapore/ ● Slide 70: http://theoatmeal.com/comics/making_things

×