why didn’t you know this? are you not the ******* “expert”?
DESCRIPTION
Why didn’t you know this? Are you not the ******* “expert”?. a11yCamp Toronto 2014 Integrating Accessibility in the Web Project Lifecycle. Denis Boudreau Web Accessibility Avenger Deque Systems, Inc. [email protected] @dboudreau. Unlikely Heroes… (capes and spandex are optional). Roy. Elena. - PowerPoint PPT PresentationTRANSCRIPT
Why didn’t you know this? Are you not the ******* “expert”?
a11yCamp Toronto 2014
Integrating Accessibility in the Web Project Lifecycle
Denis BoudreauWeb Accessibility AvengerDeque Systems, [email protected]@dboudreau
Unlikely Heroes…(capes and spandex are optional)
Amy Roy Elena
Chris Mike Julie
RoleWeb Accessibility Specialist
ScenarioAmy has recently been tasked with assessing the redesign of a new client’s website for compliance against WCAG 2.0 AA. She quickly discovers that no prior accessibility testing has been conducted on the project. The site launches in less than two weeks.
Meet Amy
Dealing with web accessibility at the end of the project lifecycle
leads to costly retrofitsthat could’ve otherwise been avoided
Lesson no.1
RoleWeb Accessibility Coordinator
ScenarioRoy is leading the accessibility taskforce in his Fortune 100 organization. His role is to make sure they never get sued by people with disabilities advocacy groups. Leadership has yet to provide him with clear top-level support however.
Meet Roy
Without clear top-level support from their leadership, web accessibility
champions are ultimately bound to be ignored by their peers
Lesson no.2
RoleQuality Assurance Lead
ScenarioThe agency Elena works for is under litigation because their website was inaccessible to people who are blind. She has built a checklist that will be used by her Centralized Testing Team, so all pages can be internally tested with a series of tools to comply with accessibility requirements.
Meet Elena
Centralized testing teams who fail toinclude end users testing in their
process are likely to miss significant issues when assessing content
Lesson no.3
RoleBusiness Analyst
ScenarioChris has been tasked with selecting the next platform for their website’s redesign from a short list of three vendors, all of which have VPATs claiming their product is fully compliant with Section 508. Their accessible content will be integrated by an offshore third party vendor.
Meet Chris
Never underestimate the impact of external factors – for they can make or break all efforts
towards web accessibility
Lesson no.4
RoleFront-End Developer Lead
ScenarioMike is a gifted web developer who understands web standards and realized long ago that accessibility was mostly about testing with your keyboard and using native semantic HTML. He introduced his team to various browser toolbars and everyone now feels confident they have accessibility covered.
Meet Mike
Developer toolbars, semantic markup and automated testing tools can only get you about 30% of the way
towards accessibility
Lesson no.5
RoleWeb Accessibility Champion
ScenarioJulie is the acting web accessibility champion at her organization and is very dedicated to digital inclusion. However, there is so much work to do, so many people asking for help and so little time, that she often becomes a bottleneck. As a result, requests sometimes fall through the cracks.
Meet Julie
Accessibility resources who allow themselves to become bottlenecks
give everyone else an excuse to overlook web accessibility
Lesson no.6
What do these stories teach us?
Web accessibility impacts every discipline Accessibility must be included from phase one Don’t just rely on a web accessibility champion Go beyond technical criteria and checklists Accessible results beyond standards compliance Automated tools will only get you so far 3rd party platforms can make or break accessibility
Common PitfallsIdentify, Prevent & Avoid Them!
What do these people have in common?
Amy Roy Elena
Chris Mike Julie
• They truly want to do the right thing.• They are pretty much left on their own.• They are ultimately bound to fail.
Why is web accessibility so hard?
So we asked 100 accessibility men and women…
Top 7 Answers
Top 7 Answers
The Key to Success?
Integrating Accessibility in the LifecycleOnly One Part of the Solution
Organizations can only be successful if every stakeholder chooses to take ownership of accessibility.
Three-Tiered ApproachThe Secret to Implementing Accessibility
Awareness
Alignment
Realization
Internal and external policies, Web accessibility support groups, standards and guidelines, etc.
Best practices, design patterns, style guides, tools, testing methodologies, etc.
Training and learning, building the business case, communicating the message, etc.
Today’s FocusThe Secret to Implementing Accessibility
RealizationBest practices, design patterns, style guides, tools, testing methodologies, etc.
Project Manager
Amy Meets Her New Team
Back-End Development
HTML/CSS Prototyping
Content StrategyInformation Architecture UX Design
QA Testing
UI Design
Front-End Development
Front-End Development
Team Mascot
SEO
Analysis
Web Accessibility
Web AccessibilityWhose Job is it, Anyway?
• Business Analyst• Information Architect• Content Strategist• UX Designer• UI Designer• SEO Specialist• Prototype Developer• Front-End Developer• Back-End Developer• QA Tester
The Traditional MindsetAccessibility and the Web Project Lifecycle
Back-End Development
InformationArchitecture
ContentStrategy
UX Design
HTML/CSSPrototyping
Front-EndDevelopment
QA TestingUI Design
Web Accessibility
Analysis
SEO
Changing the MindsetAn Accessibility Focused Eco-System
Back-End Development
InformationArchitecture
ContentStrategy
UX Design
Analysis
SEOHTML/CSSPrototyping
Front-EndDevelopment
QA TestingUI Design
End Users
Share responsibilities. Make everyone accountable.
W3C WAI-Engage WikiDistributed Responsibilities Model
http://bit.ly/WsdeYh
Every stakeholder involved needs to stay alert and pay attention to accessibility at his or her level
in the web project lifecycle
Lesson no.7
Different Teams, Different ProcessAdapting to the Team’s Reality
– UX Designer– UI Designer– Content Strategist– Web Developer– QA Tester
Web Accessibility
Different Teams, Different ProcessAdapting to the Team’s Reality
– UX Designer– UI Designer– Content Strategist– Web Developer– SEO– QA Tester
Web Accessibility
Different Teams, Different ProcessAdapting to the Team’s Reality
– Business Analyst– UX / UI Designer– Content Strategist / SEO– Front-End Developer– Back-End Developer
Web Accessibility
Make subject matter experts in your lifecycle accountable, so the right questions are asked at the right time by the right people
Lesson no.8
Planning the right intervention at the right time by the right people
prevents costly errors & oversights
Lesson no.9
Distributed Responsibilities ModelAccessibility for Business Analysts
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable -- -- --
Operable -- -- 2.2.3, 2.2.4, 2.2.5
Understanding 3.2.1, 3.3.1 3.3.3, 3.3.4 3.3.5, 3.3.6
Robust -- -- --
Total (9) 2 2 5
Distributed Responsibilities ModelAccessibility for Information Architects
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.3.1 -- --
Operable 2.4.2 2.4.5, 2.4.6 2.4.8, 2.4.10
Understanding -- 3.1.2 3.1.3, 3.1.4
Robust -- -- --
Total (9) 2 3 4
Distributed Responsibilities ModelAccessibility for Content Strategists
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.1.1, 1.2.1, 1.2.2, 1.2.3, 1.3.1, 1.3.3
1.2.5 1.2.7, 1.2.8
Operable 2.1.1, 2.1.2, 2.4.2, 2.4.4 2.4.6 2.4.9
Understanding 3.3.1 3.1.2 3.1.3, 3.1.4, 3.1.5, 3.1.6
Robust -- -- --
Total (21) 11 3 7
Distributed Responsibilities ModelAccessibility for UX Designers
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.3.1, 1.3.3, 1.4.1, 1.4.2 1.4.4 1.4.7, 1.4.8
Operable 2.1.1, 2.1.2, 2.2.1, 2.2.2, 2.3.1, 2.4.4
2.4.5, 2.4.6 2.1.3, 2.2.3, 2.2.4, 2.2.5, 2.3.2, 2.4.8, 2.4.9
Understanding 3.2.1, 3.2.2, 3.3.1, 3.3.2 3.2.3, 3.2.4, 3.3.3, 3.3.4 3.1.3, 3.1.5, 3.2.5, 3.3.5, 3.3.6
Robust 4.1.2 -- --
Total (36) 15 7 14
Distributed Responsibilities ModelAccessibility for UI Designers
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.3.1, 1.3.3, 1.4.1, 1.4.2 1.4.3, 1.4.4, 1.4.5 1.4.6, 1.4.7, 1.4.8, 1.4.9
Operable 2.1.1, 2.1.2, 2.2.2, 2.3.1, 2.4.1 2.4.5, 2.4.6, 2.4.7 2.2.3, 2.2.4, 2.3.2, 2.4.8
Understanding 3.2.1, 3.3.1, 3.3.2 3.2.3, 3.2.4, 3.3.3 3.2.5, 3.3.5, 3.3.6
Robust -- -- --
Total (32) 12 9 11
Distributed Responsibilities ModelAccessibility for SEO Specialists
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.1.1, 1.2.1, 1.2.2, 1.2.3, 1.3.1 1.2.4, 1.2.5, 1.4.5 1.2.6, 1.2.7, 1.2.8, 1.2.9
Operable 2.1.1, 2.1.2, 2.2.1, 2.2.2, 2.4.1, 2.4.2, 2.4.3, 2.4.4
2.4.5, 2.4.6, 2.4.7 2.1.3, 2.2.3, 2.4.8, 2.4.9, 2.4.10
Understanding -- -- --
Robust -- -- --
Total (28) 14 6 9
Distributed Responsibilities ModelAccessibility for HTML/CSS Prototype Developers
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.1.1, 1.3.1, 1.3.2 1.4.3, 1.4.4, 1.4.5 1.4.6
Operable 2.1.1, 2.1.2, 2.4.1, 2.4.2, 2.4.3 2.4.5, 2.4.6, 2.4.7 2.1.3, 2.4.8, 2.4.10
Understanding 3.1.1, 3.3.2 3.2.4 3.1.3, 3.2.5
Robust 4.1.1, 4.1.2 -- --
Total (25) 12 7 6
Distributed Responsibilities ModelAccessibility for Front-End Developers
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.1.1, 1.2.1, 1.2.2, 1.2.3, 1.3.1, 1.3.2, 1.3.3, 1.4.1, 1.4.2
1.2.4, 1.2.5, 1.4.3, 1.4.4, 1.4.5 1.2.6, 1.2.7, 1.2.8, 1.2.9, 1.4.6, 1.4.7, 1.4.8, 1.4.9
Operable 2.1.1, 2.1.2, 2.2.1, 2.2.2, 2.3.1, 2.4.1, 2.4.2, 2.4.3, 2.4.4
2.4.5, 2.4.6, 2.4.7 2.1.3, 2.2.3, 2.2.4, 2.2.5, 2.3.2, 2.4.8, 2.4.9, 2.4.10
Understanding 3.1.1, 3.2.1, 3.2.2, 3.3.1, 3.3.2 3.1.2, 3.2.3, 3.2.4, 3.3.3, 3.3.4 3.1.3, 3.1.4, 3.1.6, 3.2.5, 3.3.5, 3.3.6
Robust 4.1.1, 4.1.2 -- --
Total (60) 25 13 22
Distributed Responsibilities ModelAccessibility for Back-End Developers
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.1.1, 1.3.1, 1.3.2 -- --
Operable 2.1.1, 2.1.2, 2.2.1, 2.2.2, 2.4.3, 2.4.4
2.4.5, 2.4.6, 2.4.7 2.1.3, 2.2.3, 2.2.4, 2.2.5, 2.4.9, 2.4.10
Understanding 3.2.1, 3.2.2, 3.3.1, 3.3.2 3.1.2, 3.2.4, 3.3.3, 3.3.4 3.1.3, 3.1.4, 3.2.5, 3.3.6
Robust 4.1.1, 4.1.2 -- --
Total (32) 15 7 10
Distributed Responsibilities ModelAccessibility for QA Testers
Principles Applicable Success Criteria
Level A Level AA Level AAA
Perceivable 1.1.1, 1.2.1, 1.2.2, 1.2.3, 1.3.1, 1.3.2, 1.3.3, 1.4.1, 1.4.2
1.2.4, 1.2.5, 1.4.3, 1.4.4, 1.4.5 1.2.6, 1.2.7, 1.2.8, 1.2.9, 1.4.6, 1.4.7, 1.4.8, 1.4.9
Operable 2.1.1, 2.1.2, 2.2.1, 2.2.2, 2.3.1, 2.4.1, 2.4.2, 2.4.3, 2.4.4
2.4.5, 2.4.6, 2.4.7 2.1.3, 2.2.3, 2.2.4, 2.2.5, 2.3.2, 2.4.8, 2.4.9, 2.4.10
Understanding 3.1.1, 3.2.1, 3.2.2, 3.3.1, 3.3.2 3.1.2, 3.2.3, 3.2.4, 3.3.3, 3.3.4 3.1.3, 3.1.4, 3.1.5, 3.1.6, 3.2.5, 3.3.5, 3.3.6
Robust 4.1.1, 4.1.2 -- --
Total (61) 25 13 23
Uneducated decisions will yield significant consequences
for accessibility later in the project
Lesson no.10
The largest room in the world is the room for improvement
- Meiji Stewart
Web accessibility is about building a better quality product
Lesson no.11
Planning for AccessibilityQuality is Everyone’s Responsibility
• Prevention is better than cure• Shared responsibilities across disciplines• Building a sense of collective ownership• Preventing costly errors and oversights• Efficiently meeting compliance goals
Murphy’s Law
Three Strikes, You’re Out!Alt Text Treasure Hunting
Scenario:The content strategist neglects to provide alternative text values for the images she selected to support her content.Months later, the front-end developer hits a major accessibility road block.The project manager goes looking for the content strategist, only to find she has moved on to another company a few weeks ago.
Three Strikes, You’re Out!The Case of Missing Visible Focus Indicator
Scenario:The UX designer neglects to plan for visible focus indicators in her mockups. The front-end developer finds no indications in the requirements about any type of focus behavior and therefore, doesn’t create any.In the final QA testing phase, the QA tester notices that it’s impossible to follow progress on the screen when only using the keyboard to navigate.
Three Strikes, You’re Out!How’s That Contrast Working Out For You?
Scenario:The UI designer creates a color palette with light colors. The client approves it and printing material is ordered.The QA tester notices some of the colors do not meet minimal color contrasts ratios.The project manager has to raise the issue with the client, knowing the company already invested in their new brand colors.
Three Strikes, You’re Out!Captchas Galore!
Scenario:The Business Analysts plans for the use of captchas throughout the forms on the site to counter spam issues.The developer chooses to rely on reCaptcha, because it provides two different modalities.The Web Accessibility Expert warns about the shortcomings of Captchas and the team chooses a combination of other options instead.
Three Strikes, You’re Out!Poor Link Text Labels
Scenario:The content strategists does not consider the value of link text and link labels such as “click here” and “read more” end up all over the place.The QA tester raises the issue and requests more meaningful link text.The content strategist must go over her work again, forcing the project manager to go back to the client to approve new, unexpected delays.
And we still wonder why web accessibility is so hard?!
Failing to plan for accessibility implicitly means that you are
planning to fail at accessibility
Lesson no.12
Awareness Alignment Realization
The Choice is Yours.
Merci Beaucoup!Denis BoudreauDeque Systems, [email protected]@dboudreau
Photo CreditsAll rights belong to their respective owners.
• http://www.cabiancamilano.com/cortedelnaviglio/wp-content/uploads/Meeting_Room.jpg• http://www.humansofnewyork.com/• http://www.superbwallpapers.com/photography/barbed-wire-16533/• http://1.bp.blogspot.com/-QnezQQ690zo/TvSHqOUpgBI/AAAAAAAAACA/TWacwmXHGtI/s1600/synapse_color.jpg• http://gamesbreaker.net/wp-content/uploads/2014/08/Family-Feud-2-Cheat.jpg • http://www.britchamexico.com/ckeditorArchivos/images/Key-to-Success1.jpg• https://startanevolution.ubc.ca/wp-content/uploads/2011/04/Pharmacy-589x277.jpg • http://www.invisiblegamer.net/wp-content/uploads/2014/08/pitfall2600Screen.jpg• http://richanson.files.wordpress.com/2013/12/fotolia_32692857_m.jpg • http://nebula.wsimg.com/f0efeee04e1cf696d3b703147600eee4?AccessKeyId=A07FC81ADA889363D300• http://static.netzwertig.com/1397097970/stresstest.jpg • http://www.littleinteriors.co.za/wp-content/uploads/2014/03/empty-Room.jpg• http://i.vimeocdn.com/video/471473478_1280x720.jpg