Embed Size (px)
DESCRIPTION
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!
Citation preview
About MeDigital Designer since 2003 (Yes, Over 10 Years)
Stalk me on LinkedIn: http://ca.linkedin.com/in/janisyee/(Or search Janis Yee)
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.
Organizations will always pursue the path of least cost.
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 / Freelancers
We will not be going through the AODA or WCAG 2.0 in detail.
Audit Project
Building a new site vs. Assessing an existing site
Pre-Requisite Skills Tools
ResultsStep by Step
Pre-Requisite SkillsWhat you need to know before you start
Understanding AODA
Minimum Legal Requirements vs. Needs of your Audience
vs
“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.0Web Content Accessibility Guidelines
1. Perceivable
2. Operable
3. Understandable
4. Robust
Guidelines
Level A - BasicsLevel AA - Extra MileLevel AAA - Near Impossible
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
Tools for AuditsTools and Tech
Tools you may need
First StepDetermine the scope
# Element
1.0 Homepage(URL)
1.1 Header
1.1.1 Logo
Remember POUR (Perceivable, Operable, Understandable, Robust)
Examine each element from different lenses
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 tab focus.(Screenshot)
1.1 Header -- --
1.1.1 Logo Guideline 1.1 Text Alternatives(URL)
Image tag does not contain alt text.
Trust your Gut
# 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)
# 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
# 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
ResultsWhat is expected in the end?
Deliverables
1. Full audit report for reference 2. Action list for each team member3. Time-frame for implementation scope
Don’t work in a bubble
Understanding Designers
Designers plan for considerations in...
User Context
MobileContext Feasibility
Designers plan for considerations in...
User Context
MobileContext Feasibility
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.
Understanding Developers
Developers plan for considerations in...
Software Technology Language
Developers plan for considerations in...
Software TechnologyLanguage
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
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
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.
Understanding Content Managers
Understanding Content Managers
Editorial Standards
andVoice
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 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
Personal ChallengesLessons I learned
Challenge #1Lack of Awareness and Empathy
Challenge #2All the rules are technically Guidelines
Challenge #3There are no standards for Assistive Technology
Challenge #4It’s never over with Accessibility
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
