Accessibility questions? Get in contact: george@goodwally.ca. The redesign of scotiabank.com presented an ideal opportunity to truly embed accessibility into the project and management processes. This is presentation 2 of 2. There are two presentations in this series and in both presentations we highlight the most important lessons we learned, best practices that worked and the challenges we faced and how to overcome them. However, they do complement each other: - the 1st presentation speaks to the governance, policies and management process around the project - the 2nd presentation describes the accessibility tasks undertaken at each SDLC phase You'll learn how we gained participation from various stakeholders, shared best practices and built accessibility skills throughout the team. The accessibility team at Scotia was engaged from the very beginning and collaborated with many stakeholders and as a result took the opportunity to build an accessible framework from day 1 by injecting the accessibility requirements and best practices throughout the entire Software Development Lifecycle Cycle (SDLC). -- Objectives The redesign of a large, national website is a complex undertaking. It is also an opportunity to do accessibility right from the beginning. The objective of the session is to share lessons learned and practical tips about how to successfully integrate accessibility into a large project. This included: - the ability to work with multiple teams in parallel or sequentially - working on standards and best practices with the planning team - working on technical solutions with the development team -- Some questions that we answered: - What is the role of the accessibility team in a large project? Does the role need to adapt and how? - What are the accessibility policies & standards that apply? - How do you manage and communicate accessibility standards and technical solutions between the various management, design, development and testing teams? - Do you have to follow WCAG 2 by the letter? What’s the alternative? We will provide insight into policy, planning, technical solutions and best practices that we hope will be of great benefit and use to the accessibility community.

1. Accessibility Integration in a Global Customer Website
– A Success Story
Part 1: Governance, policies & project management
Part 2: SDLC processes, solutions & best practices
Enabling Solutions & Pina D’Intino
Monica Ackermann
Support Management George Zamfir
#accessconf - The Accessibility Conference - University of Guelph
© 2012 Scotiabank

2. Meet Scotiabank’s Accessibility Team. Hi, again!
Enabling Solutions & Support Management (ESSM)
Pina D’Intino PMP, ITIL Certified
Senior Manager
Wilma Groen
Monica Ackermann P.Eng., MA
Accessibility Project Lead
Rajesh Duggal
George Zamfir B.Sc.
Accessibility Technical Analyst
Accessibility Integration in a Global Customer Website – A Success Story

3. Meet Scotiabank’s Accessibility Team. Hi from ESSM!
Accessibility Integration in a Global Customer Website – A Success Story

4. Agenda
• Quick Overview of 1st session
• 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
Accessibility Integration in a Global Customer Website – A Success Story

5. 1. scotiabank.com Redesign – Quick Overview (cont’d)
• 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!
Accessibility Integration in a Global Customer Website – A Success Story

6. 2. Let’s Dive Right In
Project Phase Accessibility 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
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
Accessibility Integration in a Global Customer Website – A Success Story

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

8. 2. Let’s Dive Right In – Visual Walk-Through (2)
Wireframes – Header Elements

9. 2. Let’s Dive Right In – Visual Walk-Through (3)
Design Template
With all elements
pieced together

10. 2. Let’s Dive Right In – Visual Walk-Through (4)
Prototype &
Accessibility Testing

11. 2. Let’s Dive Right In – Visual Walk-Through (5)
Production
And we’re live!

12. 2. Step-by-Step Accessibility – Planning
Meet the project owner early
• Understand each other’s operational processes
• Identify where the accessibility requirements fit in the project plan
Train 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 plan
• Avoids accessibility being an “after the fact” process
• Makes a statement for the other SDLC teams; “forced” awareness
Start accessibility early and iterate often
Accessibility Integration in a Global Customer Website – A Success Story

13. 2. Step-by-Step Accessibility – Wireframes
Accessibility Evaluation Methodology
• Accessible Design & Layout
Focusable elements’ size in relation to the layout;
Are important UI elements obvious? Maybe login should be bigger?
• Navigation
Lots of nav menus, maybe we’ll need skip link(s); code order;
• Intuitiveness
Early 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?
Accessibility Integration in a Global Customer Website – A Success Story

14. 2. Step-by-Step Accessibility – Wireframes (cont’d)
Process
• Wireframes built by external vendor
• Initial review with the project owner
• Recommendations to both the owner & vendor
• Iterations: test - retest updated versions
Lessons 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!
Accessibility Integration in a Global Customer Website – A Success Story

15. 2. Step-by-Step Accessibility – 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

16. 2. Step-by-Step Accessibility – Design Templates (cont’d)
Accessibility Evaluation Methodology
• Revisit feedback & assumptions from the wireframes phase
• Colour Contrast
Dark 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.
• Readability
Great on the H1, anti-aliased, smooth. Good typeface and large text
size.
• Bonus: Structure and Interaction
Framework structure emerged, early recommendations could be made
on HTML semantic mark-up: headings, lists, navigation;
Early challenge: mega-menus keyboard navigation and interaction
Accessibility Integration in a Global Customer Website – A Success Story

17. 2. Step-by-Step Accessibility – Design Templates (cont’d)
Process
• Break templates down into smaller pieces
• Provide feedback & design updates; identify the “show-stoppers” early
Lessons 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 enough
Potential 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
Accessibility Integration in a Global Customer Website – A Success Story

18. 2. Step-by-Step Accessibility – HTML Prototype
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 Methodology
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 + FireEyes
Provided a quick overview of the initial accessibility level
Accessibility Integration in a Global Customer Website – A Success Story

19. 2. Step-by-Step Accessibility – HTML Prototype (cont’d)
Accessibility 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 Inspection
Extensive testing phase; solutions are being built here
5. Full Suite of AT Testing with JAWS / NVDA, ZoomText, Dragon
Ideally test with actual AT users or ensure the tester has solid knowledge
Accessibility Integration in a Global Customer Website – A Success Story

20. 2. Step-by-Step Accessibility – HTML Prototype
Process
• 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 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;
Accessibility Integration in a Global Customer Website – A Success Story

21. 2. Step-by-Step Accessibility – HTML Prototype
Best 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.
More challenges: dynamic, non-standard UI elements
Accessibility Integration in a Global Customer Website – A Success Story

22. 2. Step-by-Step Accessibility – Steady State
Accessibility 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.
Process
• 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.
Accessibility Integration in a Global Customer Website – A Success Story

23. 2. Step-by-Step Accessibility – Steady State
Challenges
• Regular content updates have the potential to dilute accessibility. Start
with creating baseline guidelines for content accessibility.
Lessons 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 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;
Accessibility Integration in a Global Customer Website – A Success Story

24. …And The Journey Continues
scotiabank.com – umbrella term for future redesign projects
Careers 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.
iTrade
Very similar process; noticeable time-savings in testing as a result of using
the same proven process and working with more knowledgeable teams.
Accessibility Integration in a Global Customer Website – A Success Story

25. Tools
• JAWS 11, NVDA 2011.1.1
• ZoomText 9.1
• Dragon Naturally Speaking 11
Automated Testing Tools
• Worldspace & FireEyes*
• SOAtest
Browser Plugins
• Firebug
• AIS Toolbar
• Web Developer
• ColorChecker
• WebAim WAVE
Accessibility Integration in a Global Customer Website – A Success Story

26. Resources
Expert solutions, use cases and accessibility resources:
webaim.org
paciellogroup.com/blog
simplyaccessible.com
accessibleculture.org
alistapart.com/topics/userscience/accessibility
Technology Support
caniuse.com/wai-aria
html5accessibility.com
Other Resources
stackoverflow.com
twitter.com/#!/search/a11y
Accessibility Integration in a Global Customer Website – A Success Story

27. scotiabank.com Redesign – Q & A
THANK YOU!
Time for Q & A !
Accessibility Integration in a Global Customer Website – A Success Story
© 2012 Scotiabank