Wordcamp 2014 - How to Perform an Accessibility Audit
description
Transcript of Wordcamp 2014 - How to Perform an Accessibility Audit
![Page 2: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/2.jpg)
About MeDigital Designer since 2003 (Yes, Over 10 Years)
Stalk me on LinkedIn: http://ca.linkedin.com/in/janisyee/(Or search Janis Yee)
![Page 3: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/3.jpg)
![Page 4: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/4.jpg)
Ontario is the FIRST in the world to introduce mandatory Accessibility Standards for Organizations
![Page 5: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/5.jpg)
Why are we really here?
![Page 6: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/6.jpg)
Because you want to be in front of the pack with this trending knowledge.
Accessibility is not a trend
![Page 7: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/7.jpg)
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.
![Page 8: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/8.jpg)
Because you couldn’t Google how to do an accessibility audit.
Yes, I’ve tried.
![Page 9: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/9.jpg)
Because you can’t automate ‘dat!
There are tools but it takes a human to assess if the change is necessary.
![Page 10: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/10.jpg)
![Page 11: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/11.jpg)
This session is for:● Project Managers● UX and Designers● Front End Developers● Content managers● Contractors / Freelancers
![Page 12: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/12.jpg)
We will not be going through the AODA or WCAG 2.0 in detail.
Audit Project
![Page 13: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/13.jpg)
Building a new site vs. Assessing an existing site
![Page 14: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/14.jpg)
Pre-Requisite Skills Tools
ResultsStep by Step
![Page 15: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/15.jpg)
Pre-Requisite SkillsWhat you need to know before you start
![Page 16: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/16.jpg)
Understanding AODA
Minimum Legal Requirements vs. Needs of your Audience
vs
![Page 17: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/17.jpg)
“No one cares how much you know, until they know how much you care”
Theodore Roosevelt
![Page 18: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/18.jpg)
http://www.youtube.com/watch?v=c0nvdiRdehw
![Page 19: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/19.jpg)
Everyone is a gradient of ability
Current Temporal Evolving
![Page 20: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/20.jpg)
Understanding WCAG 2.0
![Page 21: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/21.jpg)
Understanding WCAG 2.0Web Content Accessibility Guidelines
![Page 22: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/22.jpg)
1. Perceivable
![Page 23: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/23.jpg)
2. Operable
![Page 24: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/24.jpg)
3. Understandable
![Page 25: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/25.jpg)
4. Robust
![Page 26: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/26.jpg)
Guidelines
Level A - BasicsLevel AA - Extra MileLevel AAA - Near Impossible
![Page 27: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/27.jpg)
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
![Page 28: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/28.jpg)
Tools for AuditsTools and Tech
![Page 29: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/29.jpg)
Tools you may need
![Page 30: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/30.jpg)
![Page 31: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/31.jpg)
![Page 32: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/32.jpg)
First StepDetermine the scope
![Page 33: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/33.jpg)
![Page 34: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/34.jpg)
![Page 35: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/35.jpg)
![Page 36: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/36.jpg)
![Page 37: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/37.jpg)
![Page 38: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/38.jpg)
![Page 39: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/39.jpg)
# Element
1.0 Homepage(URL)
1.1 Header
1.1.1 Logo
![Page 40: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/40.jpg)
Remember POUR (Perceivable, Operable, Understandable, Robust)
Examine each element from different lenses
![Page 41: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/41.jpg)
Missing alt attribute!
![Page 42: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/42.jpg)
Font Colour Contrast makes it difficult to read.
![Page 43: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/43.jpg)
![Page 44: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/44.jpg)
# 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.
![Page 45: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/45.jpg)
Trust your Gut
![Page 46: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/46.jpg)
![Page 47: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/47.jpg)
![Page 48: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/48.jpg)
# 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)
![Page 49: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/49.jpg)
# 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
![Page 50: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/50.jpg)
# Element
WCAG Reference
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
![Page 51: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/51.jpg)
ResultsWhat is expected in the end?
![Page 52: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/52.jpg)
Deliverables
1. Full audit report for reference 2. Action list for each team member3. Time-frame for implementation scope
![Page 53: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/53.jpg)
Don’t work in a bubble
![Page 54: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/54.jpg)
Understanding Designers
![Page 55: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/55.jpg)
Designers plan for considerations in...
User Context
MobileContext Feasibility
![Page 56: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/56.jpg)
Designers plan for considerations in...
User Context
MobileContext Feasibility
![Page 57: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/57.jpg)
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.
![Page 58: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/58.jpg)
Understanding Developers
![Page 59: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/59.jpg)
Developers plan for considerations in...
Software Technology Language
![Page 60: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/60.jpg)
Developers plan for considerations in...
Software TechnologyLanguage
![Page 61: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/61.jpg)
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
![Page 62: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/62.jpg)
Understanding Project Managers
![Page 63: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/63.jpg)
Understanding Project Managers
Effort for Impact
Limited Resources
Stakeholder Needs
![Page 64: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/64.jpg)
Understanding Project Managers
Effort for Impact
Limited Resources Stakeholder
Needs
![Page 65: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/65.jpg)
Accessibility Impact
Resolution Feasibility
![Page 66: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/66.jpg)
Hard to Read
![Page 67: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/67.jpg)
Impossible to Read
![Page 68: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/68.jpg)
Easier to Read
![Page 69: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/69.jpg)
Source: http://blog.eyequant.com/2013/07/02/108-million-web-users-are-color-blind-how-do-they-see-your-website/
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.
![Page 70: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/70.jpg)
Understanding Content Managers
![Page 71: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/71.jpg)
Understanding Content Managers
Editorial Standards
andVoice
Reach Multimedia Content
![Page 72: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/72.jpg)
Understanding Content Managers
Editorial Standards Reach Multimedia
Content
![Page 73: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/73.jpg)
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
![Page 74: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/74.jpg)
Personal ChallengesLessons I learned
![Page 75: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/75.jpg)
Challenge #1Lack of Awareness and Empathy
![Page 76: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/76.jpg)
Challenge #2All the rules are technically Guidelines
![Page 77: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/77.jpg)
Challenge #3There are no standards for Assistive Technology
![Page 78: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/78.jpg)
Challenge #4It’s never over with Accessibility
![Page 80: Wordcamp 2014 - How to Perform an Accessibility Audit](https://reader031.fdocuments.net/reader031/viewer/2022020307/559b97411a28ab97798b45f9/html5/thumbnails/80.jpg)
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