SlideShare a Scribd company logo
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

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
Denise Jacobs
 
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)
Oleksii Prohonnyi
 
How to Build an Accessible Presentation
How to Build an Accessible PresentationHow to Build an Accessible Presentation
How to Build an Accessible Presentation
3Play Media
 
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
Henny Swan
 
Accessibility on the Web
Accessibility on the WebAccessibility on the Web
Accessibility on the Web
Jessica Keyes
 
Design Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotDesign Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by Chatbot
Kelli Fleming
 
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

Steps to WCAG 2.0
Steps to WCAG 2.0Steps to WCAG 2.0
Steps to WCAG 2.0
levy aurélien
 
Accessibility Audit
Accessibility AuditAccessibility Audit
Accessibility Audit
Richard Freeman
 
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?
Ted Drake
 
Accessibility for Hybrid Mobile
Accessibility for Hybrid MobileAccessibility for Hybrid Mobile
Accessibility for Hybrid Mobile
Bobby Bristol
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
Nick DeNardis
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplified
ciwstudy
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
Mavention
 
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
Umar Shuaib
 
Audit presentation
Audit presentationAudit presentation
Audit presentation
Metafrique group
 

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

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
Allison Corbett
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility Compliance
Keana Lynch
 
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...
Cyber-Duck
 
Technical Debt.pptx
Technical Debt.pptxTechnical Debt.pptx
Technical Debt.pptx
Atish Narlawar
 
Siteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbookSiteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbook
LiZhu45
 
Improving Accessibility for Higher Education
Improving Accessibility for Higher EducationImproving Accessibility for Higher Education
Improving Accessibility for Higher Education
Acquia
 
Usable Software Design
Usable Software DesignUsable Software Design
Usable Software Design
Alexandru Bolboaca
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User Experience
Mike Kornacki
 
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
Perficient, Inc.
 
Original Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshOriginal Access U 2013 - 508 Refresh
Original Access U 2013 - 508 Refresh
Barry Johnson
 
SIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsSIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker Presentations
Cello Signal
 
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...
Tracy Lee
 
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
Aidan Tierney
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
Matthew Gerrior
 
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
Perficient, Inc.
 
I2t2
I2t2I2t2
I2t2
i2t2
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design Heuristics
Nathanael Boehm
 
Zeus learning
Zeus learningZeus learning
Zeus learning
RohanMistry15
 
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?
Isha Gupta
 
Agile software development
Agile software development Agile software development
Agile software development
saurabh goel
 

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

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 

Recently uploaded (20)

ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 

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