Optimizing the Accessibility Remediation Process in Large Organizations

Optimizing the Accessibility Remediation Process in Large Organizations

Aidan Tierney, atierney@ca.ibm.com

Richard Chen, chenr@us.ibm.com

March 20, 2014

IBM Interactive Experience

© 2014 IBM Corporation

Accessibility remediation in a large organization

WHAT are the accessibility problems and the potential solutions?

Accessibility remediation in a large organization

WHAT are the accessibility problems and the potential solutions?

WHO will contribute to solution in a large organization?

HOW to address some of the issues

Aidan TierneySenior Accessibility Consultant,

IBM Interactive Experience

IBM Interactive Experience

Richard ChenUser Research and Design Senior

Consultant, IBM Interactive Experience

Who’s here?

Who’s here? WHO are you? What’s your name?

WHAT do you do related to accessibility? What

role(s) do you perform?

Developer Designer

Tester Project manager

Policy / compliance Legal

Accessibility Consultant Marketing

WHERE do you do this?

Your organization: federal govt., education,

startup, large company.

Accessibility Program Manager

In a department of one

Experienced in accessibility,

development and design

Recent hire

Let’s meet Julia

Julia works at Colossal Corporation

Online Account Application

is not Accessible

Customer complaints

Senior management decided

application must conform to

WCAG Level A and AA

Julia does accessibility assessment

Syntax checking tool

Manual checks – e.g. Color contrast

Assistive technology – Screen reader

Assess

WHAT are the accessibility problems?WHAT are the potential solutions?

Issue: Incorrect ALT text

<img alt="logo-file-C62" src="logo.png" />

Issue: Insufficient color contrast

Issue: Image of text

Issue: No indication for required fields

Assess

Propose Solutions

Julia identifies

potential solutions

<alt%!>

Solution: ALT text

<img alt="Colossal Corporation"

src="logo.png" />

Cc

Solution: Color contrast

New: #707070

Old: #a0a0a0

Observed: Code comes from SocialMedia iframe

Solution: Image of text

Use HTML text and CSS, with system or web fontfont-family: comic sans ms;

Insufficient contrast in original, new color needed

Solution: Required fields

Required fields are marked with an asterisk (*)

<input aria-required="true" type="text" />

Visual and programmatic indicator

Assess

Propose Solutions

Remediate

If this was a form on her own personal website,

Julia could make these fixes in an afternoon

But it’s not so simple at Colossal Corporation

WHO complicates WHAT

Julia needs to find out WHO can…

Nilesh tells Julia his team

cannot make these changes

WHO will contribute to solutions in a large organization?

Application development team

Code library/core components

Content management (CMS)

Application development team

Code library/core components

Content management (CMS)

Who will make DEVELOPMENT changes?

Who manages relationships with 3RD PARTY code providers

Who from the BUSINESS will approve interface or functionality changes?

Who will decide,

approve and make

DESIGN changes?

Does LEGAL need to sign off?

Does BRANDING need

to be in the loop?

Does the MARKETING team

need to provide content?

Who will TEST?

And who from the

LEADERSHIP team

needs to be informed?

Accessibility project #1

More questions…

Who will decide which

TOOLS to use for testing?

Who will decide which BROWSERS, DEVICES or USER AGENTS to support for accessibility?

Who will TRAIN testers and developers in accessibility tools and techniques?

Who will resolve different interpretations of WCAG?

Who will authorize EXCEPTIONS?

Issues that cannot or will not be fixed?

Who will make DEVELOPMENT changes?

Who manages relationships with 3RD PARTY CODE?

Who from the BUSINESS will approve interface or functionality changes?

Who will decide, approve and make DESIGN changes?

Does LEGAL need to sign off?

Does the MARKETING team need to provide content?

Does BRANDING need to be in the loop?

Who from the business LEADERSHIP team needs to be informed?

Who will TEST?

Who will decide which TOOLS to use for testing?

Who will decide which BROWSERS, DEVICES or USER AGENTS to support for accessibility?

Who will TRAIN testers and developers in accessibility tools and techniques?

Who will resolve different INTERPRETATIONS OF WCAG?

Who will authorize EXCEPTIONS?

And remember:

If this was her own website,

Julia could make these fixes in an afternoon!

Does this sound familiar to anyone?Have you run into these issues?

Got any more to add?

Believe it or not: real world examples

<alt%!>

Effort: ALT text

4 months duration (one image)

100+ person hours

Meetings & discussions involving 30+ resources

Cc

Effort: Color contrast

5 months duration

100+ person hours

Meetings & discussions involving 30+ resources

Effort: Image of text

6 months duration

100+ person hours

Meetings & discussions involving 20+ resources

Not implemented

Effort: Required fields

4 months duration

200+ person hours

Meetings & discussions involving 40+ resources

Alternate solution used - legal objected to asterisk

HOW to manage the issues

Originates with

Approved by

Implemented by

Consider the solution workflow

Best to do consider this as early as possible

Originates with

• Design guidelines

Approved by

• Legal

• Business

Implemented by

• Code library

• Application development

Example workflow: required field solution

Can do this for any of the proposed fixes

Teams and stakeholders

Designers

Design Guidelines

Legal

Marketing

Branding

Code library

CMS

Application dev.

Business approvals

Testing

Senior leadership

3rd party code

Exception process

Tools

Training

Budgets

Factors of complexity

List roadblocks to remediation

Brainstorm!

Based on previous experiences

Circles of influence

Outside Leadership

Legal

Branding

Influence Vendors

Testing

Tools

Training

Other development

teams

Design guidelines

ControlDevelopment

Design

WCAG interpretation

and fix

User Agent and devices

Factors to think aboutFactors to think about

Communication

Understanding of accessibility

Decision making

Budget

Technology versions

A method to

bring order... Weighting

Assign weights to each factor

Percentages summing to 100%

Issues by complexity

Factor Weight

Vendors 5%

Testing 20%

Tools 10%

Training 5%

Other Dev’s 2%

Design guides 3%

Factor Weight

Development 10%

Design 15%

WCAG 2%

User Agent 3%

Factor Weight

Leadership 5%

Legal 15%

Branding 5%

Introspection

Use weights to identify opportunities to

improve efficiency

Minimize barriers to design,

development, and remediation

Values

Assign values, e.g. 1 (low) to 3 (high)

Two values to plot – X = severity

Y = complexity

Weights can fluctuate

Applying weighting

to Colossal Corp.

Required Fields

Factor Weight Value Weighted

Development 10% 2 0.2

Design 15% 1 0.15

WCAG 2% 2 0.04

User Agent 3% 1 0.03

Vendors 5% 0 0

Testing 20% 3 0.6

Tools 10% 0 0

Training 5% 1 0.05

Other Dev’s 2% 1 0.02

Design guides 3% 3 0.09

Leadership 5% 1 0.05

Legal 15% 3 0.45

Branding 5% 0 0

Total 100% 1.68

Many pages affected

Aria-required vs. asterisk

In-house update, no impact

Harder with aria-required

High quantity

High impact design changes

Wording for directions

Asterisk used as another symbol

Required Fields

Factor Weight Value Weighted

Development 10% 2 0.2

Design 15% 1 0.15

WCAG 2% 2 0.04

User Agent 3% 1 0.03

Vendors 5% 0 0

Testing 20% 3 0.6

Tools 10% 0 0

Training 5% 1 0.05

Other Dev’s 2% 1 0.02

Design guides 3% 3 0.09

Leadership 5% 1 0.05

Legal 15% 3 0.45

Branding 5% 0 0

Total 100% 1.68

Contrast

Development 10% 1 0.1

Design 15% 2 0.3

WCAG 2% 3 0.06

User Agent 3% 1 0

Vendors 5% 3 0.15

Testing 20% 3 0.6

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 1 0.02

Design guides 3% 3 0.09

Leadership 5% 1 0.05

Legal 15% 0 0

Branding 5% 2 0.1

Total 1.72

Alt Text from vendor

Development 10% 1 0.1

Design 15% 0 0

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 3 0.15

Testing 20% 1 0.2

Tools 10% 1 0.1

Training 5% 2 0.1

Other Dev’s 2% 1 0.02

Design guides 3% 0 0

Leadership 5% 0 0

Legal 15% 2 0.3

Branding 5% 1 0.05

Total 1.07

Image of Text

Development 10% 3 0.3

Design 15% 2 0.3

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 2 0.1

Testing 20% 2 0.4

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 2 0.04

Design guides 3% 3 0.09

Leadership 5% 2 0.1

Legal 15% 3 0.45

Branding 5% 2 0.1

Total 2.18

Contrast Weighted Values in detailImage of Test

Development 10% 3 0.3

Design 15% 2 0.3

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 2 0.1

Testing 20% 2 0.4

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 2 0.04

Design guides 3% 3 0.09

Leadership 5% 2 0.1

Legal 15% 3 0.45

Branding 5% 2 0.1

Total 2.18

Alt Text from vendor

Development 10% 1 0.1

Design 15% 0 0

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 3 0.15

Testing 20% 1 0.2

Tools 10% 1 0.1

Training 5% 2 0.1

Other Dev’s 2% 1 0.02

Design guides 3% 0 0

Leadership 5% 0 0

Legal 15% 2 0.3

Branding 5% 1 0.05

Total 1.07Colors could be off-brand

Defined ratio, but many affects many

areas with different interpretation

Logos, images branding, and text from vendors

Negotiation, communication, updates

Affects many design elements

Easy fix to CSS filesContrast

Development 10% 1 0.1

Design 15% 2 0.3

WCAG 2% 3 0.06

User Agent 3% 1 0

Vendors 5% 3 0.15

Testing 20% 3 0.6

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 1 0.02

Design guides 3% 3 0.09

Leadership 5% 1 0.05

Legal 15% 0 0

Branding 5% 2 0.1

Total 1.72

Image of Test

Development 10% 3 0.3

Design 15% 2 0.3

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 2 0.1

Testing 20% 2 0.4

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 2 0.04

Design guides 3% 3 0.09

Leadership 5% 2 0.1

Legal 15% 3 0.45

Branding 5% 2 0.1

Total 2.18

Contrast

Development 10% 1 0.1

Design 15% 2 0.3

WCAG 2% 3 0.06

User Agent 3% 1 0

Vendors 5% 3 0.15

Testing 20% 3 0.6

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 1 0.02

Design guides 3% 3 0.09

Leadership 5% 1 0.05

Legal 15% 0 0

Branding 5% 2 0.1

Total 1.72

Requires legal’s

approval

Training on

meaningful alt text

No design restraints

need to sync code,

should be easy

Alt Text from vendor

Development 10% 1 0.1

Design 15% 0 0

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 2 0.1

Testing 20% 1 0.2

Tools 10% 1 0.1

Training 5% 2 0.1

Other Dev’s 2% 1 0.02

Design guides 3% 0 0

Leadership 5% 0 0

Legal 15% 2 0.3

Branding 5% 1 0.05

Total 1

Alt Text from vendor

Development 10% 1 0.1

Design 15% 0 0

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 3 0.15

Testing 20% 1 0.2

Tools 10% 1 0.1

Training 5% 2 0.1

Other Dev’s 2% 1 0.02

Design guides 3% 0 0

Leadership 5% 0 0

Legal 15% 2 0.3

Branding 5% 1 0.05

Total 1.07

Contrast

Development 10% 1 0.1

Design 15% 2 0.3

WCAG 2% 3 0.06

User Agent 3% 1 0

Vendors 5% 3 0.15

Testing 20% 3 0.6

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 1 0.02

Design guides 3% 3 0.09

Leadership 5% 1 0.05

Legal 15% 0 0

Branding 5% 2 0.1

Total 1.72

Possibly complicated interpretation

Discuss with and update other teams

Identify images to test and procedure

Regression testing

Clear for Level AA

Design decisions on live fonts

and interaction

Create live fonts

Possible impact on responsive

Image of Text

Development 10% 3 0.3

Design 15% 2 0.3

WCAG 2% 1 0.02

User Agent 3% 1 0.03

Vendors 5% 2 0.1

Testing 20% 2 0.4

Tools 10% 1 0.1

Training 5% 3 0.15

Other Dev’s 2% 2 0.04

Design guides 3% 3 0.09

Leadership 5% 2 0.1

Legal 15% 3 0.45

Branding 5% 2 0.1

Total 2.18

More complexLess Complex

More severe

Less severe

Image of text (2.4, 3)

Contrast (1.72, 2.5)

Asterisk (1.68, 2.2)

Vendor Alt text (1, 1)

Prioritizing Issues

More accurate estimation More objective choices

More accurate project plan and timeline

Julia’s at ease

What’s Next? …. RemediationHow much is enough?

Techniques: WCAG Level A vs. AA, 80-20, Agile, Cost

impact, Traffic

Julia’s a Hero!

WHAT? WHO? HOW?

In conclusion …

HOW? WHO? WHAT?

In conclusion …

HOW? WHO? WHAT?

In conclusion …

HOW? WHO? WHAT?

In conclusion …

Questions and Discussion

Aidan Tierneyatierney@ca.ibm.com

IBM Interactive Experience

Richard Chen

chenr@us.ibm.com

Contact us!

www.ibm.com/able

Thank you!

Time Topic – IBM Papers/Presentations/Panels Speaker/s

Wednesday March 19th

9:20-10:20 Practical Mobile Accessibility in the Enterprise Tom Babinszki

10:40-11:40 Costing Accessibility Remediation for Acquisitions Becky Gibson

1:50-2:50 Implementing Accessibility in a Graphing Utility Fred Esch

Thursday March 20th

9:20-10:20Implementing Accessibility in an Enterprise Mobile Web User Interface Toolkit

Tom Babinszki

10:40-11:40Toward a Common Enterprise Accessibility Operational Model

Bill Curtis-Davidson

1:50-2:50Optimizing the Accessibility Remediation Process in Large Organizations

Richard Chen, Aidan Tierney

3:10-4:10Media Captioner, Translator and Editor – A Complete Collaborative Approach

Kaoru Shinkawa

Friday March 21st

9:20-10:20Progress Report on the Global Public Inclusive Infrastructure (GPII)

Denis Anson, Rich Schwerdtfeger, Jim Tobias, Gregg Vanderheiden

10:40-11:40 Accessible Design ThinkingMary Jo Mueller, Matt King

1:50-2:50 W3C Cognitive Accessibility Task Force Panel

Judy Brewer, Rich Schwerdtfeger, Susann Keohane, Lisa Seeman, Clayton Lewis, Suzanne Taylor

IBM at CSUN 2014 – you’re invited

Join IBM in Harbor Ballroom A to learn

about the latest in accessible user

interface design, mobile accessibility,

accessibility risk and compliance

management, and much more.

© 2014 IBM Corporation

Image attributions

creativecommons.org/

Chris Blakeley: A portrait of the artist as a CubePhil Whitehouse: New Office Dell #Inspire HouseDell. Elevating women and girlsGokyo Ri: Western side of Mount EverestHerval: Cubicle LifeJason Scragzs: Bored Paco Olvera Monterd: OfficeAlex E. Proimos: Caïn venant de tuer son frère Abel, by Henry Vidal in Tuileries GardenNick Holland: Arm wrestling

social media icons

manicxminer : concentric circles shirt