Accessibility Integration in a Global Customer Website - Scotiabank.com - A Success Story 2/2

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 2: SDLC processes, solutions & best practicesPart 2: SDLC processes, solutions & best practices

Enabling Solutions &Support Management

Pina D’IntinoMonica AckermannGeorge Zamfir

#accessconf - The Accessibility Conference - University of Guelph © 2012 Scotiabank

Accessibility Integration in a Global Customer Website – A Success Story

Pina D’Intino PMP, ITIL Certified

Senior Manager

Monica Ackermann P.Eng., MA

Accessibility Project Lead

George Zamfir B.Sc.

Accessibility Technical Analyst

Enabling Solutions & Support Management (ESSM)

Meet Scotiabank’s Accessibility Team. Hi, again!

Wilma Groen

Rajesh Duggal


Meet Scotiabank’s Accessibility Team. Hi from ESSM!


1. Quick Overview of 1st session

2. scotiabank.com Redesign - Let’s Dive Right In

• Visual Walk-Through: Wireframes to Production

• Step-By-Step Accessibility

3. …And The Journey Continues

4. Tools And Resources

5. Q & A

Agenda


• Huge redesign project starting with the Canadian .com

• Complex – all tiers from back-end CMS to HTML

• Lengthy – a 1-year phase 1 (of 3) project

• Many internal clients – all major business lines

• Multiple content owners, creators and editors

• 13 design templates, that’s it!

1. scotiabank.com Redesign – Quick OverviewQuick Overview (cont’d)

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

2. Let’s Dive Right In

High-level phases of the projects that only relate to accessibility

In reality it was a fairly agile environment where the phases overlapped a lot


2. Let’s Dive Right In – Visual Walk-Through (1)

Wireframes – Global ElementsWireframes – Global Elements


Wireframes – Header ElementsWireframes – Header Elements

Design TemplateDesign Template

With all elements With all elements pieced togetherpieced together



Prototype &Prototype &Accessibility TestingAccessibility Testing


ProductionProductionAnd we’re live!


Meet the project owner earlyMeet the project owner early• Understand each other’s operational processes • Identify where the accessibility requirements fit in the project plan

Train all teams on accessibilityTrain all teams on accessibility• Individual team meetings: understand strengths & weaknesses • Early full-day accessibility training to establish a baseline for accessibility

Embed accessibility into the project planEmbed accessibility into the project plan• Avoids accessibility being an “after the fact” process• Makes a statement for the other SDLC teams; “forced” awareness

Start accessibility early and iterate oftenStart accessibility early and iterate often

2. Step-by-Step Accessibility – PlanningPlanning

Accessibility Evaluation MethodologyAccessibility Evaluation Methodology

• Accessible Design & LayoutFocusable elements’ size in relation to the layout; Are important UI elements obvious? Maybe login should be bigger?

• NavigationLots of nav menus, maybe we’ll need skip link(s); code order;

• IntuitivenessEarly but we can still look at symbol-images, visual cues, etc. Are they widely accepted that it makes sense in non-local markets as well?


2. Step-by-Step Accessibility – WireframesWireframes


ProcessProcess• Wireframes built by external vendor

• Initial review with the project owner

• Recommendations to both the owner & vendor

• Iterations: test - retest updated versions

Lessons LearnedLessons Learned• Early phase; not a lot of time spent on it but makes a big difference

• Be very proactive & raise potential issues: code order, colour contrast

• Send warnings in advance, don’t sit on valuable information. Worst-case scenario: the designers thought about it and it’s a non-issue.

• Definitely start accessibility here, nothing is set in stone yet!

2. Step-by-Step Accessibility – WireframesWireframes (cont’d)

2. Step-by-Step Accessibility – Design Templates Design Templates

Batches of design templates

13 templates to accommodate all of Scotia’s content

Very accurate representation of the “actual” site

Framework started emerging – global elements (header, footer & nav) vs page-specific content

Let’s break down the scope of accessibility into smaller pieces

Realized that we’re looking at main content templates



• Revisit feedback & assumptions from the wireframes phase

• Colour ContrastDark grey text on light grey background

• Visual Order (which will translate into tab order) Odd: the H1 is on top of the vertical nav and the main content.

• ReadabilityGreat on the H1, anti-aliased, smooth. Good typeface and large text size.

• Bonus: Structure and InteractionFramework structure emerged, early recommendations could be made on HTML semantic mark-up: headings, lists, navigation;

2. Step-by-Step Accessibility – Design Templates Design Templates (cont’d)

Early challenge: Early challenge: mega-menus keyboard navigation and interaction


ProcessProcess• Break templates down into smaller pieces• Provide feedback & design updates; identify the “show-stoppers” early

Lessons LearnedLessons Learned• Break the design into smaller pieces (helped a lot)

• Clear division of work when doing accessibility testing• Decreased repetition - fixes on the “global elements” are global

• You can see into the future if you look close enoughPotential issues with interactive elements, semantic mark-up, etc. This is a great chance to make code recommendations.

• Early fixes on the first batch translated into more accessible upcoming batches; which in turn eventually translated into a more accessible prototype

2. Step-by-Step Accessibility – Design Templates Design Templates (cont’d)



1. Preliminary Evaluation (manual testing + code inspection) The goal is to identify critical accessibility issues early such that sufficient time is allocated for reporting and / or solutioning. Also, if other teams do the solutioning they’ll appreciate the heads-up.Pro tip: Great approach in crunch times & also good 80/20 (ish) rule. However, effectiveness relies on the evaluator having expert knowledge

2. Automated Testing Deque Worldspace + FireEyesProvided a quick overview of the initial accessibility level

2. Step-by-Step Accessibility – HTML PrototypeHTML PrototypeHopefully that hard work from previous phases is paying off by now…Hopefully that hard work from previous phases is paying off by now…

…as the accessibility improvements should be noticeable in the prototype: page structure, informational vs decorative images, etc., even enhancements.


Accessibility Evaluation MethodologyAccessibility Evaluation Methodology (cont’d)

3. Thorough Keyboard Testing Two big concepts for keyboard:- Website is fully functional with regular keyboard strokes- All focusable elements have generous keyboard focus

Note: A shift from following WCAG 2 where focus is AA requirement

4. Manual Testing + Code InspectionExtensive testing phase; solutions are being built here

5. Full Suite of AT Testing with JAWS / NVDA, ZoomText, DragonIdeally test with actual AT users or ensure the tester has solid knowledge

2. Step-by-Step Accessibility – HTML PrototypeHTML Prototype (cont’d)


ProcessProcess• Confirm the previous updates were transitioned in the prototype• Collaborative solutioning with the vendor & dev integrators• Agile iterative process: templates were created in batches and updates

were done continuously until the steady state phase

Lessons LearnedLessons Learned• Automated testing tools can only get your so far.• For the sake of the dev / test teams be consistent in your solutions; but

don’t be shy to propose new/better solutions.• Testing with AT users is very valuable:

– revealed both a common denominator but also different styles– traditional accessibility solutions may not hold true with ever emerging browsers, AT and even specs – see internal links in Chrome

• Careful with some AT: JAWS will guess where accessibility is lacking;

2. Step-by-Step Accessibility – HTML PrototypeHTML Prototype


Best PracticesBest Practices• Keyboard testing bugs usually mask bigger underlying issues.

• Dynamic elements with show / hide or expand / collapse functionality:

• Indicate element state both visually and non-visually• Hard link to the respective area

<a href="#tab-rates-fees" class=“active”> Fees & Options <span class=“hidden”> Active tab</span> </a>

• Progressive enhancement for interoperability: HTML-CSS-JS-ARIA

• ARIA is part of the HTML5 spec but you can use it now in HTML4. However, don’t start your fixes with ARIA when there is a solution lower in the stack in HTML, CSS or JS. Users with browser / AT combinations that don’t support ARIA will be left out.

2. Step-by-Step Accessibility – HTML PrototypeHTML Prototype

More challenges:More challenges: dynamic, non-standard UI elements


Accessibility Evaluation MethodologyAccessibility Evaluation Methodology• Repeat the test procedures from the prototype phase

Emphasis on integration issues, look mark-up deviations in HTML• Test at least a few pages per template but run automated testing tools

The challenge with large websites is that there are many thousands of pages, manually testing each of them is not realistic. However, testing the most important pages per design template is doable.

ProcessProcess• In this phase the prototype is accessible and approved. And the

templates are implemented in the Content Management System (CMS).• Worked with internal dev integration teams in a support capacity.• The website was released in batches and accessibility testing was done

after each batch release; the goal was to catch potential issues early.

2. Step-by-Step Accessibility – Steady StateSteady State


ChallengesChallenges• Regular content updates have the potential to dilute accessibility. Start

with creating baseline guidelines for content accessibility.

Lessons LearnedLessons Learned• Expect the unexpected and have a remediation process in place after

launch; website launched with some “strange” bugs due to server issues with some of them affecting accessibility.

• Not having the capability to detect production bugs quickly increases the risk of compounding issues

Ongoing GoalsOngoing Goals• New content updates: engage the CMS team to enforce some

accessibility rules right into CMS back-end• Measure accessibility level over time: regular full website automated

testing and reporting on existing content but also on the new content;

2. Step-by-Step Accessibility – Steady StateSteady State


scotiabank.com – umbrella term for future redesign projects

Careers CentreCareers Centre It integrates in the .com framework (same header, footer, navigation). Decision on .com to tackle the framework early paid off in testing cycles on this project and any future projects.

iTradeiTradeVery similar process; noticeable time-savings in testing as a result of using the same proven process and working with more knowledgeable teams.

……And The Journey ContinuesAnd The Journey Continues


• JAWS 11, NVDA 2011.1.1• ZoomText 9.1• Dragon Naturally Speaking 11

Automated Testing ToolsAutomated Testing Tools• Worldspace & FireEyes*• SOAtest

Browser PluginsBrowser Plugins• Firebug • AIS Toolbar• Web Developer• ColorChecker• WebAim WAVE

ToolsTools


Expert solutions, use cases and accessibility resources:Expert solutions, use cases and accessibility resources:webaim.orgpaciellogroup.com/blogsimplyaccessible.comaccessibleculture.orgalistapart.com/topics/userscience/accessibility

Technology Support Technology Support caniuse.com/wai-ariahtml5accessibility.com

Other ResourcesOther Resourcesstackoverflow.comtwitter.com/#!/search/a11y

ResourcesResources

Accessibility Integration in a Global Customer Website - Scotiabank.com - A Success Story 2/2

Design

Transcript of Accessibility Integration in a Global Customer Website - Scotiabank.com - A Success Story 2/2