SlideShare a Scribd company logo
1 of 80
Download to read offline
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/ 
(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
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 
lots of screenshots 
● Basic understanding of HTML 
and CSS
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 
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
# 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
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 scope
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 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 Technology 
Language
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
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/
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 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 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 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

More Related Content

What's hot

Heuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour WebsiteHeuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour Website
fabiolaeinhorn
 

What's hot (7)

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)
 
How to Build an Accessible Presentation
How to Build an Accessible PresentationHow to Build an Accessible Presentation
How to Build an Accessible Presentation
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tips
 
Accessibility on the Web
Accessibility on the WebAccessibility on the Web
Accessibility on the Web
 
Design Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotDesign Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by Chatbot
 
Heuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour WebsiteHeuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour Website
 

Viewers also liked

SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
Mavention
 

Viewers also liked (9)

Steps to WCAG 2.0
Steps to WCAG 2.0Steps to WCAG 2.0
Steps to WCAG 2.0
 
Accessibility Audit
Accessibility AuditAccessibility Audit
Accessibility Audit
 
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
 
Accessibility for Hybrid Mobile
Accessibility for Hybrid MobileAccessibility for Hybrid Mobile
Accessibility for Hybrid Mobile
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
 
Assistive technologies and devices for visually impaired
Assistive technologies and devices for visually impairedAssistive technologies and devices for visually impaired
Assistive technologies and devices for visually impaired
 
Audit presentation
Audit presentationAudit presentation
Audit presentation
 

Similar to Wordcamp 2014 - How to Perform an Accessibility Audit

Siteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbookSiteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbook
LiZhu45
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User Experience
Mike Kornacki
 

Similar to Wordcamp 2014 - How to Perform an Accessibility Audit (20)

Why Can't We All Just Get Along? Improving Designer/Developer Collaboration
Why Can't We All Just Get Along? Improving Designer/Developer CollaborationWhy Can't We All Just Get Along? Improving Designer/Developer Collaboration
Why Can't We All Just Get Along? Improving Designer/Developer Collaboration
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility Compliance
 
Building products people actually can use – why all developers need to unders...
Building products people actually can use – why all developers need to unders...Building products people actually can use – why all developers need to unders...
Building products people actually can use – why all developers need to unders...
 
Technical Debt.pptx
Technical Debt.pptxTechnical Debt.pptx
Technical Debt.pptx
 
Siteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbookSiteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbook
 
Improving Accessibility for Higher Education
Improving Accessibility for Higher EducationImproving Accessibility for Higher Education
Improving Accessibility for Higher Education
 
Usable Software Design
Usable Software DesignUsable Software Design
Usable Software Design
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User Experience
 
12 Things Not to Do on a Portal Project
12 Things Not to Do on a Portal Project12 Things Not to Do on a Portal Project
12 Things Not to Do on a Portal Project
 
Original Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshOriginal Access U 2013 - 508 Refresh
Original Access U 2013 - 508 Refresh
 
SIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsSIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker Presentations
 
ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainab...
ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainab...ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainab...
ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainab...
 
Accessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early designAccessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early design
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
 
Portal Deployment Best Practices | IBM Portal Excellence Conference 2009
Portal Deployment Best Practices | IBM Portal Excellence Conference 2009Portal Deployment Best Practices | IBM Portal Excellence Conference 2009
Portal Deployment Best Practices | IBM Portal Excellence Conference 2009
 
I2t2
I2t2I2t2
I2t2
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design Heuristics
 
Zeus learning
Zeus learningZeus learning
Zeus learning
 
What are a website developer and its scope?
What are a website developer and its scope?What are a website developer and its scope?
What are a website developer and its scope?
 
Agile software development
Agile software development Agile software development
Agile software development
 

Recently uploaded

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
mikehavy0
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
Real Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptxReal Smart Art Infographics by Slidesgo.pptx
Real Smart Art Infographics by Slidesgo.pptx
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptx
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 

Wordcamp 2014 - How to Perform an Accessibility Audit

  • 1. How to Perform an Accessibility Audit Janis Yee User Experience www.pdx.ca
  • 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.
  • 4. Ontario is the FIRST in the world to introduce mandatory Accessibility Standards for Organizations
  • 5. Why are we really here?
  • 6. Because you want to be in front of the pack with this trending knowledge. Accessibility is not a trend
  • 7. 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.
  • 8. Because you couldn’t Google how to do an accessibility audit. Yes, I’ve tried.
  • 9. Because you can’t automate ‘dat! There are tools but it takes a human to assess if the change is necessary.
  • 10.
  • 11. This session is for: ● Project Managers ● UX and Designers ● Front End Developers ● Content managers ● Contractors / Freelancers
  • 12. Audit Project We will not be going through the AODA or WCAG 2.0 in detail.
  • 13. Building a new site vs. Assessing an existing site
  • 14. Pre-Requisite Skills Tools Step by Step Results
  • 15. Pre-Requisite Skills What you need to know before you start
  • 16. Understanding AODA vs Minimum Legal Requirements vs. Needs of your Audience
  • 17. “No one cares how much you know, until they know how much you care” Theodore Roosevelt
  • 19. Everyone is a gradient of ability Current Temporal Evolving
  • 21. Understanding WCAG 2.0 Web Content Accessibility Guidelines
  • 26. Guidelines Level A - Basics Level AA - Extra Mile Level AAA - Near Impossible
  • 27. 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
  • 28. Tools for Audits Tools and Tech
  • 30.
  • 31.
  • 32. First Step Determine the scope
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39. # Element 1.0 Homepage (URL) 1.1 Header 1.1.1 Logo
  • 40. Examine each element from different lenses Remember POUR (Perceivable, Operable, Understandable, Robust)
  • 42. Font Colour Contrast makes it difficult to read.
  • 43.
  • 44. # 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.
  • 46.
  • 47.
  • 48. # 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)
  • 49. # 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
  • 50. # 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
  • 51. Results What is expected in the end?
  • 52. Deliverables 1. Full audit report for reference 2. Action list for each team member 3. Time-frame for implementation scope
  • 53. Don’t work in a bubble
  • 55. Designers plan for considerations in... User Context Mobile Context Feasibility
  • 56. Designers plan for considerations in... User Context Mobile Context Feasibility
  • 57. 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.
  • 59. Developers plan for considerations in... Software Technology Language
  • 60. Developers plan for considerations in... Software Technology Language
  • 61. 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
  • 63. Understanding Project Managers Effort for Impact Limited Resources Stakeholder Needs
  • 64. Understanding Project Managers Effort for Impact Limited Resources Stakeholder Needs
  • 69. 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/
  • 71. Understanding Content Managers Editorial Standards and Voice Reach Multimedia Content
  • 72. Understanding Content Managers Editorial Standards Reach Multimedia Content
  • 73. 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
  • 75. Challenge #1 Lack of Awareness and Empathy
  • 76. Challenge #2 All the rules are technically Guidelines
  • 77. Challenge #3 There are no standards for Assistive Technology
  • 78. Challenge #4 It’s never over with Accessibility
  • 79. Thank You Questions? Janis Yee, User Experience www.pdx.ca
  • 80. 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