integrating accessibility in the web project lifecycle - a11ycampto 2014 (dboudreau)

a11yCamp Toronto 2014

Integrating Accessibility in the Web Project Lifecycle

Denis Boudreau Web Accessibility Avenger Deque Systems, Inc. [email protected] @dboudreau

Why didn’t you know this? Are you not the ******* “expert”?

Unlikely Heroes… (capes and spandex are optional)

Amy Roy Elena

Chris Mike Julie

Role Web Accessibility Specialist

Scenario Amy 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 retrofits that could’ve otherwise been avoided

Role Web Accessibility Coordinator

Scenario Roy 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

Role Quality Assurance Lead

Scenario The 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 to include end users testing in their

process are likely to miss significant issues when assessing content

Role Business Analyst

Scenario Chris 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

Role Front-End Developer Lead

Scenario Mike 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

Role Web Accessibility Champion

Scenario Julie 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

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 Pitfalls Identify, Prevent & Avoid Them!

What do these people have in common?

Amy Roy Elena

Chris Mike Julie


Amy Roy Elena

Chris Mike Julie

• They truly mean to do the right thing.


Amy Roy Elena

Chris Mike Julie

• They truly mean to do the right thing. • They are pretty much left on their own.


Amy Roy Elena

Chris Mike Julie

• They truly mean 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

The Key to Success?

Integrating Accessibility in the Lifecycle Only One Part of the Solution

Organizations can only be successful if every stakeholder chooses to take ownership of accessibility.

Three-Tiered Approach The Secret to Implementing Accessibility


Awareness Training and learning, building the business case, communicating the message, etc.


Awareness

Alignment Internal and external policies, Web accessibility support groups, standards and guidelines, etc.

Training and learning, building the business case, communicating the message, etc.


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 Focus The Secret to Implementing Accessibility

Realization Best practices, design patterns, style guides, tools, testing methodologies, etc.

Amy Meets Her New Team

Web Accessibility


Analysis

Web Accessibility


Information Architecture Analysis

Web Accessibility


Content Strategy Information Architecture Analysis

Web Accessibility


Content Strategy Information Architecture UX Design Analysis

Web Accessibility


Content Strategy Information Architecture UX Design

UI Design

Analysis

Web Accessibility



UI Design SEO

Analysis

Web Accessibility


HTML/CSS Prototyping


UI Design SEO

Analysis

Web Accessibility




UI Design Front-End Development SEO

Analysis

Web Accessibility




UI Design

Front-End Development

Front-End Development SEO

Analysis

Web Accessibility


Back-End Development



UI Design



Analysis

Web Accessibility





QA Testing

UI Design



Analysis

Web Accessibility

Project Manager





QA Testing

UI Design



Analysis

Web Accessibility

Project Manager





QA Testing

UI Design



Team Mascot

SEO

Analysis

Web Accessibility

Web Accessibility Whose 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 Mindset Accessibility and the Web Project Lifecycle


Information Architecture

Content Strategy

UX Design



QA Testing UI Design

Analysis

SEO

The Traditional Mindset Accessibility and the Web Project Lifecycle



Content Strategy

UX Design




Web Accessibility

Analysis

SEO

Changing the Mindset An Accessibility Focused Eco-System



Content Strategy

UX Design

Analysis

SEO HTML/CSS Prototyping



End Users

Share responsibilities. Make everyone accountable.

W3C WAI-Engage Wiki Distributed Responsibilities Model

http://bit.ly/WsdeYh

http://www.w3.org/community/wai-engage/wiki/Accessibility_Responsibility_Breakdown

Every stakeholder involved needs to stay alert and pay attention to accessibility at his or her level

in the web project lifecycle

Different Teams, Different Process Adapting to the Team’s Reality

– UX Designer – UI Designer – Content Strategist – Web Developer – QA Tester

Web Accessibility


– UX Designer – UI Designer – Content Strategist – Web Developer – SEO – QA Tester

Web Accessibility


– 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

Planning the right intervention at the right time by the right people

prevents costly errors & oversights

Distributed Responsibilities Model Accessibility 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 Model Accessibility for Information Architects



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 Model Accessibility for Content Strategists



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 Model Accessibility for UX Designers



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 Model Accessibility for UI Designers



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 Model Accessibility for SEO Specialists



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 Model Accessibility for HTML/CSS Prototype Developers



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 Model Accessibility for Front-End Developers



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 Model Accessibility for Back-End Developers



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 Model Accessibility for QA Testers



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

The largest room in the world is the room for improvement

- Meiji Stewart

Web accessibility is about building a better quality product

Planning for Accessibility Quality 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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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

Awareness

Awareness Alignment

Awareness Alignment Realization

The Choice is Yours.

Merci Beaucoup! Denis Boudreau Deque Systems, Inc. [email protected] @dboudreau

Photo Credits All 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

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

integrating accessibility in the web project lifecycle - a11ycampto 2014 (dboudreau)

Internet