SlideShare une entreprise Scribd logo
1  sur  80
Télécharger pour lire hors ligne
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)
Wordcamp 2014   - How to Perform an Accessibility Audit
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.
Wordcamp 2014   - How to Perform an Accessibility Audit
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
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
First Step 
Determine the scope
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
# 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.
Wordcamp 2014   - How to Perform an Accessibility Audit
# 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
Wordcamp 2014   - How to Perform an Accessibility Audit
Wordcamp 2014   - How to Perform an Accessibility Audit
# 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

Contenu connexe

Tendances

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise 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 Presentation3Play 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 tipsHenny Swan
 
Accessibility on the Web
Accessibility on the WebAccessibility on the Web
Accessibility on the WebJessica Keyes
 
Design Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotDesign Document - Readiness Assessment by Chatbot
Design Document - Readiness Assessment by ChatbotKelli Fleming
 
Heuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour WebsiteHeuristic Analysis - PBS Newshour Website
Heuristic Analysis - PBS Newshour Websitefabiolaeinhorn
 

Tendances (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
 

En vedette

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 MobileBobby Bristol
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and AccessibilityNick DeNardis
 
WCAG 2.0, Simplified
WCAG 2.0, SimplifiedWCAG 2.0, Simplified
WCAG 2.0, Simplifiedciwstudy
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilityMavention
 
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 impairedUmar Shuaib
 

En vedette (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
 

Similaire à 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 CollaborationAllison Corbett
 
Managing Accessibility Compliance
Managing Accessibility ComplianceManaging Accessibility Compliance
Managing Accessibility ComplianceKeana 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
 
Siteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbookSiteimprove must have-accessibility-handbook
Siteimprove must have-accessibility-handbookLiZhu45
 
Improving Accessibility for Higher Education
Improving Accessibility for Higher EducationImproving Accessibility for Higher Education
Improving Accessibility for Higher EducationAcquia
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceMike 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 ProjectPerficient, Inc.
 
Original Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshOriginal Access U 2013 - 508 Refresh
Original Access U 2013 - 508 RefreshBarry Johnson
 
SIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsSIGNA11Y - Speaker Presentations
SIGNA11Y - Speaker PresentationsCello 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 designAidan Tierney
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: StylingMatthew 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 2009Perficient, Inc.
 
I2t2
I2t2I2t2
I2t2i2t2
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design HeuristicsNathanael Boehm
 
Agile software development
Agile software development Agile software development
Agile software development saurabh goel
 
E-accessibility and WCAG2.0 presentation
E-accessibility and WCAG2.0 presentationE-accessibility and WCAG2.0 presentation
E-accessibility and WCAG2.0 presentationMonica Seeber
 

Similaire à 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
 
Agile software development
Agile software development Agile software development
Agile software development
 
E-accessibility and WCAG2.0 presentation
E-accessibility and WCAG2.0 presentationE-accessibility and WCAG2.0 presentation
E-accessibility and WCAG2.0 presentation
 

Dernier

如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 

Dernier (20)

如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 

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)
  • 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.
  • 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
  • 32. First Step Determine the scope
  • 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.
  • 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.
  • 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