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, Inc.db@deque.com@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, Inc.db@deque.com@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