Accessibility Integration in a Global Customer WebsiteAccessibility Integration in a Global Customer Website– A Success Story– A Success Story

Part 1: Governance, policies & project managementPart 1: Governance, policies & project managementPart 2: SDLC processes, solutions & best practices

Enabling Solutions &Support Management

Pina D’IntinoMonica AckermannGeorge Zamfir

#accessconf - The Accessibility Conference - University of Guelph

Meet Scotiabank’s Accessibility Team. Hi!

Enabling Solutions & Support Management (ESSM)

Pina D’Intino PMP, ITIL Certified

Senior Manager

Monica Ackermann P.Eng., MA

Accessibility Project Lead

George Zamfir B.Sc.

Accessibility Technical Analyst

Wilma Groen

Rajesh Duggal

© 2012 Scotiabank

Agenda

1. ESSM Roles & Responsibilities

2. Scotiabank’s Accessibility Strategy

3. The scotiabank.com Redesign Project

• Why is this particular project successful?

• Important Project Details

• What steps were taken towards accessibility?

• How was accessibility integrated at each phase?

4. Lessons Learned. Challenges. Conclusion

5. Q & A

© 2012 Scotiabank

1. ESSM Roles & Responsibilities – Focus on IT AccessibilityIT Accessibility

© 2012 Scotiabank

2. Scotiabank's Accessibility Strategy – 4-Phase Roadmap4-Phase Roadmap

There are key recommendations for each step. For example, Step 2 includes:

– Adopt existing or define organizational accessibility standards

– Obtain executive commitment

– Establish a network of advocates, champions, and create a Scotiability Council

– Identify a pilot set of applications to assess for compliance assessment and remediation

– Integrate accessibility into the management system, set goals & measurements

– Integrate accessibility into the development and User Acceptance Testing processes

– Develop and roll out awareness & education plans, and reference resources (e.g. portal)

– Update the assistive technologies & support available to employees

© 2012 Scotiabank

2. Scotiabank's Accessibility Strategy – Organizational ApproachOrganizational Approach

1. Executive sponsorship

2. Define an accessibility roadmap

3. Establish a competency centre

4. Consistent application of standards

5. Clear guidelines and conformance criteria

6. Clear exception and deviation protocols

7. Measuring your progress

8. Reporting mechanisms

9. Auditing and reporting processes

10. Repeatable and sustainable processes

11. Sign-offs

© 2012 Scotiabank

2. Scotiabank's Accessibility Strategy – Standards & Regulations – Standards & Regulations

Global trends accelerating market demand for accessibilityGlobal trends accelerating market demand for accessibility

In Marketplace

Increasingly vocal consumers and advocacy hold organizations accountable

Select U.S. legal inquiries and litigation since 2008

Canada

Evolving legislation drives accessibility into private sector and onto the Web

Ontario AODA (2005) with ICT implementation phase beginning in 2012.

Federal CLF 2.0

Quebec and Manitoba standards initiatives

North American market harmonization – air travel, telecom, selling to USA

In North America

Accessibility standards apply to public and private sectors

U.S. Government ‘refreshes’ and expands Americans with Disabilities Act and Section 508 of U.S. Rehabilitation Act (in progress)

U.S. 21st Century Communications and Video Accessibility Act requires captions for video on the Internet (2010)

U.S. Dept. of Transportation – FAA rules will regulate Canadian air carriers accessibility (proposed 2012 regulations) – web and kiosk

Globally

Governments adopt international conventions and technology standards for inclusion

U.N. Convention on the Rights of Persons with Disabilities – First universal framework for ICT accessibility [Signed by 149 countries; Ratified by 103]

Progressive public policies and government mandates for compliance with Worldwide Web Consortium’s Web Content Accessibility Guidelines (WCAG) in Australia, Canada, China, Japan, Netherlands, U.S., U.K., and others

Rapid international standard adoption in other emerging markets (e.g., India)

© 2012 Scotiabank

2. Scotiabank's Accessibility Strategy – In Canada: What is the Law?– In Canada: What is the Law?Federal

– 1982 – Canadian Charter of Rights and Freedoms and Ontario Human Rights Code “Duty to Accommodate”; applies to all;

– 2007 – Canada signs the UN convention for Persons with Disabilities;– 2009 – Canada ratifies the UN convention for Persons with Disabilities “Countries undertake

universal design in the development of standards and guidelines as well as research on and the use of universally designed goods, services, equipment and facilities”; applies to all.

Provincial– 1975 – Ontario Regulation for Advanced Building Code for Disability Rights “Includes ramps, wider

entrances, etc. - amended in 2006”; applies to all;– 2001 – Ontarians with Disabilities Act (ODA) “Provides guidelines and recommendations for the

removal of barriers for Persons with Disabilities”;– 2005 – Accessibility for Ontarians with Disabilities Act (AODA) “Strengthens the ODA - provides

timelines and standards and ensures a barrier free Ontario by 2025”;– 2008 – Customer Services proposed Standards became law - must be fully compliant as of January

1, 2012; applies to customers.Built Environment: applies to all - no current timeline; under government reviewThe Integrated Accessibility Standards harmonize the following 3 standards into a common

compliance framework and became law July 1, 2011:Information and Communication: applies to employees and customers - with a 3 - 10 year

implementation windowEmployment: applies to employees - with a 5 year implementation windowTransportation: applies to all - with a 5 year implementation window

© 2012 Scotiabank

The scotiabank.com Redesign Project

WhyWhy is this particular project very successful?Project ConsiderationsConsiderations & Key DriversDriversWhatWhat steps were taken towards accessibility?HowHow was accessibility integrated at each phase?

3. Why This Particular Project? Considerations Considerations

Project ConsiderationsProject Considerations

• The business team had solid accessibility awareness prior to engaging us All the years of hard work on awareness paid off

• Immediate buy-inEarly in the planning phase the management team embedded the accessibility work effort and resources in the project plan

• Financial backingThe business team had high overall expectations (not just accessibility) and the budget was there to do accessibility early.

• It makes good business sense not to exclude potential customers

Also, it sets a good precedent for a successful accessibility project!Also, it sets a good precedent for a successful accessibility project!

© 2012 Scotiabank

3. scotiabank.com Redesign – Project StakeholdersProject Stakeholders

Teams InvolvedTeams Involved

Digital Marketing owner, project manager

Vendor design, HTML prototype

CMS Team back-end content management

Copy Deck & Translation

ESSMaccessibility, testing

Othersadvisory, management, dev integration, etc.

Internal Clients Internal Clients

All major business lines

Multiple content owners

External ScopeExternal Scope

Improved customer experience

Unified design & branding

Focus on Information Architecture

Goal-based navigation

Internal ScopeInternal Scope

One platform for all editors

Consolidate dispersed micro-sites & content

Reusability of templates, tools and functionality © 2012 Scotiabank

3. scotiabank.com Redesign – What steps were taken? (PDM)What steps were taken? (PDM)

Accessibility in the Project Delivery Methodology (PDM)Accessibility in the Project Delivery Methodology (PDM)

Accessibility is part of the project development methodology (PDM) with checkpoints in the business case, design, development, testing and release processes.

© 2012 Scotiabank

3. scotiabank.com Redesign – What steps were taken? What steps were taken? (cont’d)

Initial planning meeting with the project owner (business line)Initial planning meeting with the project owner (business line)

The goal was two-fold:- for them to understand the accessibility internal standards & requirements- for ESSM to understand their management & development processes

Accessibility training and education with all teams involvedAccessibility training and education with all teams involved-Identified all the teams involved & scheduled individual meetings with each to understand how they worked and what processes they followed.- Also, a full-day training was scheduled early on with all the teams involved in the project to establish a baseline for accessibility.

Process for accessibility was embedded into the project planProcess for accessibility was embedded into the project plan

In order to avoid doing accessibility “after the fact” time was allocated at each Software Development Lifecycle (SDLC) phase for accessibility evaluations, remediation and (re)test.

© 2012 Scotiabank

3. scotiabank.com Redesign – How was accessibility integrated?How was accessibility integrated?

From the beginning we identified that we have to embed accessibility early and look at all the phases that impact content, design, navigation and user interaction

Project PhaseProject Phase Accessibility ActionAccessibility Action

1. Planning Accessibility compliance & checklist

2. Wireframes & Design Visual logic, navigation, readability

3. HTML Prototype Testing Full-suite accessibility evaluation & solutioning

4. Steady State Maintenance, content management, remediation

© 2012 Scotiabank

3. How was accessibility integrated? Phase 1 – PlanningPhase 1 – Planning

1. Planning1. Planning

• Accessibility compliance requirements

• Accessibility standards and internal & external checklists

• Identify and plan for any technology or business constrains

• Estimate accessibility work effort and include it to the project’s overall timeline and the project plan.

• Start accessibility early (with wireframes) and iterate often; fairly more agile process with some phases overlapping.

© 2012 Scotiabank

3. How was accessibility integrated? Phase 2 – Design TemplatesPhase 2 – Design Templates

2. Wireframes & Design Templates2. Wireframes & Design Templates

• Accessible design: color contrast, UI elements positioning• Visual order: does the elements order make sense?• Intuitive navigation: a lot of navigation menus; consistent behavior• Readability: evaluate minimum font size, typeface, headings, etc.• Structure: semantic structure emerged from evaluation

• Patterns and common UI elements emerged from the templates; decision was made to break testing and evaluations into global UI elements and content.

Tip: accessibility evaluations at this stage are not very time-consuming or extensive however they’re very important in identifying potential issue down the road.

© 2012 Scotiabank

3. How was accessibility integrated? Template ExampleTemplate Example

Design Design TemplateTemplate

Header

VerticalNav Menu

Main Content

“Fat” Footer

© 2012 Scotiabank

3. How was accessibility integrated? Phase 3 – HTML PrototypePhase 3 – HTML Prototype

3. HTML Prototype3. HTML Prototype

• By this stage the work done on previous stages should pay off at least on a basic level: alt text, semantic structure, etc;

• Confirm that all accessibility updates from the wireframes and design phases were implemented and there’s no regression.

• Manual testing for critical issues that are to be addressed first

• Full suite of evaluations:

– Keyboard Testing for functionality and keyboard focus– Automated Testing: Deque Worldspace & FireEyes– Manual Testing & Code Inspection: various plugins, FireBug– AT Testing with actual users; JAWS, ZoomText, Dragon

Tip: Not all accessibility issues are the same, prioritize by impact to user. © 2012 Scotiabank

3. How was accessibility integrated? Phase 4 – Steady StatePhase 4 – Steady State

4. Steady State4. Steady State

• Testing on the live website, spot-checked pages that spanned across all design templates.

• Challenges around the accessibility of new content – centralized CMS in place but many teams make many updates;

• Work with the Digital Marketing team to have better controls over the content that gets posted and / or work with the CMS team to enforce some accessibility rules right into CMS back-end

• Future goal – measure accessibility level over time: regular full website automated testing and reporting on existing content but also on the new content;

© 2012 Scotiabank

scotiabank.com Redesign – Lessons LearnedLessons Learned

Early acceptance & good planning Early acceptance & good planning

Relentless work to champion accessibility and raise awareness translated into early acceptance. Good planning ensured there’s time for complete accessibility evaluations;

Breaking the mountain into small hillsBreaking the mountain into small hills

Divide and conquer – small, manageable pieces, don’t get lost in the breadth of details. Prioritization – “yes, let’s start with the framework issues first before we fix widgets”

ESSM - single point of contact:ESSM - single point of contact: consistent approach to solutioning.

80 / 20 rule80 / 20 rule Aimed for high accessibility level in most cases but not for perfect; learned to compromise and sometimes mitigate where resulted in less stress on the other teams.

Early feedback & solutioningEarly feedback & solutioningEasy and digestible format and often very custom to the team’s expertise (code vs design)

scotiabank.com Redesign – Technical ChallengesTechnical Challenges

Ongoing technology changesOngoing technology changes

Users access and will access the web with an ever-increasing number of devices. Web standards seem to be in a continuous flux.

““We’ll do it in phase 2”We’ll do it in phase 2”

Sometimes we will, sometimes we won’t, either way, it gets complicated.

Maintaining accessibility after launchMaintaining accessibility after launch

1. Due to timelines and priorities code fixes (including accessibility ones) may be taken out to address any release issues. A remediation process should be in place.

2. Content updates can dilute accessibility on otherwise perfectly accessible pages. Content management is critical in a distributed environment with several authors / editors

scotiabank.com Redesign – Resource ChallengesResource Challenges

Saying “Yes” to everythingSaying “Yes” to everything

“There’s a new template that needs to be evaluated for accessibility BY TOMORROW”. It’s not that simple, we have to test, evaluate, solution, re-test, sign-off.

Resource turnover and ongoing education Resource turnover and ongoing education

With new techniques and updated or emerging standards (e.g. HTML5, mobile, touch interfaces, etc.) ongoing education is a challenge that is exacerbated with staff turnovers.

The perfect solution that we want VS the solution that is possibleThe perfect solution that we want VS the solution that is possible

Or in other words making compromises. We strive for the perfect solution but getting to the negotiation table and making some compromises is part of the long-term solution that stretches beyond the project at hand.

© 2012 Scotiabank

Possibility, Opportunity, Action!Possibility, Opportunity, Action!

Possibility…Possibility…... to get in early and truly embed accessibility in the project plan

Opportunity…Opportunity…… to educate many internal teams hands-on. Bonus: set a precedent

Action…Action…Get acceptance early. Engage ALL teams. Ongoing education. Break the mountain into small hills. Help and guide teams over the first (few) hills.

© 2012 Scotiabank

scotiabank.com Redesign – Q & A

THANK YOU!!

Time for Q & A !

scotiabank.com Redesign – Summary of Part 2

NEXTNEXT

Part 2: SDLC processes, solutions & best practices

BUT FIRSTBUT FIRST

We take a break!

scotiabank.com Redesign – Appendix

Appendix

Appendix / ResourcesUseful Website Stats – Monthly Unique VisitorsUseful Website Stats – Monthly Unique Visitors

~ 3.7 million~ 3.7 million

Appendix / ResourcesUseful Website Stats – Browsers DistributionUseful Website Stats – Browsers Distribution

1. Internet Explorer 8 - 27.6%2. Internet Explorer 9 - 19.9%3. Internet Explorer 7.0 - 10.9%4. Safari (unknown v.) - 5.2%5. Chrome 16.0 - 3.8%

Appendix / ResourcesUseful Website Stats – Screen ResolutionUseful Website Stats – Screen Resolution

1. 1280 x 768 – 19.8%

2. 1024 x 768 – 17.6%

3. 1280 x 800 – 14.8%

4. 1280 x 1024 – 8.6%

5. 1400 x 864 – 7.3%

4. Integrating Accessibility – Scope – TemplatesScope – Templates (1)A Few Page Templates – to rule them all (pages)

4. Integrating Accessibility – Scope – Templates Scope – Templates (2)A Few Page Templates – to rule them all (pages)

4. Integrating Accessibility – Scope – Templates Scope – Templates (3)A Few Page Templates – to rule them all (pages)

4. Integrating Accessibility – Scope – TemplatesScope – Templates (4)A Few Page Templates – to rule them all (pages)

Accessibility Integration in a Global Customer Website – A Success Story

4. Integrating Accessibility – Scope – Dynamic UIScope – Dynamic UIDynamic UI Elements – used throughout the siteRepository: any department can use them in their content

We had to deal with them early and at a template level rather than later and handle every small variation

Selectors, Flip tiles, Calculators, Info Pop-Ups

Accessibility Integration in a Global Customer Website – A Success Story

4. Integrating Accessibility – Scope – Main ContentScope – Main ContentMain Content

• Lots of content!To move the content into the new design each department submitted a list of the pages they owned – there were thousands.

• Lots of it was not in scope!We decided early that we can’t evaluate all of it – it would be a project on its own with each respective department

• However, we did evaluate important flows, pages that have dynamic UI elements and most used templates