Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
How to Perform an 
Accessibility Audit 
Janis Yee 
User Experience www.pdx.ca
About Me 
Digital Designer since 2003 
(Yes, Over 10 Years) 
Stalk me on LinkedIn: http://ca.linkedin. 
com/in/janisyee/ 
...
Ontario is the FIRST in the 
world to introduce 
mandatory Accessibility 
Standards for Organizations
Why are we really here?
Because you want to be in front of the 
pack with this trending knowledge. 
Accessibility is not a trend
Because the law made it a priority for 
your organization and you were put in 
the forefront of it due to limited budgets....
Because you couldn’t Google how to 
do an accessibility audit. 
Yes, I’ve tried.
Because you can’t automate ‘dat! 
There are tools but it takes a human to assess if the change is necessary.
This session is for: 
● Project Managers 
● UX and Designers 
● Front End Developers 
● Content managers 
● Contractors / ...
Audit Project 
We will not be going through the AODA or WCAG 2.0 in detail.
Building a new site vs. Assessing an existing site
Pre-Requisite Skills Tools 
Step by Step Results
Pre-Requisite Skills 
What you need to know before you start
Understanding AODA 
vs 
Minimum Legal Requirements vs. Needs of your Audience
“No one cares how much you 
know, until they know how 
much you care” 
Theodore Roosevelt
http://www.youtube.com/watch?v=c0nvdiRdehw
Everyone is a gradient of ability 
Current Temporal Evolving
Understanding WCAG 2.0
Understanding WCAG 2.0 
Web Content Accessibility Guidelines
1. Perceivable
2. Operable
3. Understandable
4. Robust
Guidelines 
Level A - Basics 
Level AA - Extra Mile 
Level AAA - Near Impossible
Other Prerequisites 
● Intermediate technical skills to 
install and use browser plugins 
or computer tools, and to take 
...
Tools for Audits 
Tools and Tech
Tools you may need
First Step 
Determine the scope
# Element 
1.0 Homepage 
(URL) 
1.1 Header 
1.1.1 Logo
Examine each element from different lenses 
Remember POUR (Perceivable, Operable, Understandable, Robust)
Missing alt attribute!
Font Colour Contrast makes it difficult to read.
# Element WCAG 
Reference 
Issue Details 
1.0 Homepage 
(URL) 
Guideline 2.1 
Keyboard 
Accessible 
(URL) 
Can’t see the 
...
Trust 
your Gut
# Element WCAG Reference Issue Details Proposed Solution 
1.0 Homepage 
(URL) 
Guideline 2.1 
Keyboard Accessible 
(URL) 
...
# Element WCAG 
Reference 
Issue 
Details 
Proposed Solution Responsible 
Provide alternate colour 
HEX#. 
Designer 
Chang...
# Eleme 
nt 
WCAG 
Referenc 
e 
Issue 
Details 
Proposed 
Solution 
Responsible Time 
Provide alternate 
colour HEX#. 
Des...
Results 
What is expected in the end?
Deliverables 
1. Full audit report for reference 
2. Action list for each team member 
3. Time-frame for implementation sc...
Don’t work 
in a bubble
Understanding Designers
Designers plan for considerations in... 
User 
Context 
Mobile 
Context Feasibility
Designers plan for considerations in... 
User 
Context 
Mobile 
Context Feasibility
Tips for Designers 
● Planning with an understanding of 
accessibility early on will help diminish the 
fear of lack of cr...
Understanding Developers
Developers plan for considerations in... 
Software Technology Language
Developers plan for considerations in... 
Software Technology 
Language
Talking to Developers 
● Assistive technology isn’t perfect and there 
are no standards 
● Coding practices recommended by...
Understanding Project Managers
Understanding Project Managers 
Effort for 
Impact 
Limited 
Resources 
Stakeholder 
Needs
Understanding Project Managers 
Effort for 
Impact 
Limited 
Resources Stakeholder 
Needs
Accessibility 
Impact 
Resolution 
Feasibility
Hard to Read
Impossible to Read
Easier to Read
Last year, 
1 in 12 men, and about 1 in 200 women 
– or about 4.5% of the world’s population 
– experience color blindness...
Understanding Content Managers
Understanding Content Managers 
Editorial 
Standards 
and 
Voice 
Reach Multimedia 
Content
Understanding Content Managers 
Editorial 
Standards Reach Multimedia 
Content
Talking to Content Managers 
● Responsible for writing copy for alternate 
text 
● Provide clear direction regarding acces...
Personal Challenges 
Lessons I learned
Challenge #1 
Lack of Awareness and Empathy
Challenge #2 
All the rules are technically Guidelines
Challenge #3 
There are no standards for Assistive 
Technology
Challenge #4 
It’s never over with Accessibility
Thank You 
Questions? 
Janis Yee, User Experience www.pdx.ca
Image Credits 
● Slide 3: http://javesca.com/what-does-it-mean-to-make-a-difference 
● Slide 10: Nazcarpine.com 
● Slide 1...
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
Prochain SlideShare
Chargement dans…5
×

Wordcamp 2014 - How to Perform an Accessibility Audit

1 353 vues

Publié le

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!

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×