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

6,182 views

Published on

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 1 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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,182
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Presentation is in 2 parts: 1 st session: over-arching policies, management processes and the overall environment at Scotia that enabled us to do some really good things on the website 2 nd session: we dig deeper into the solutions, best practices and how it was all managed and communicated between so many teams and internal customers. © 2012 Scotiabank
  • Team introductions, who we are, what we do Pina D’Intino  is Senior Manager, Scotiabank Information Technology and Solutions. She is the founder of Enabling Solutions Support Management at Scotiabank and is currently leading the accessibility strategy roadmap from an IT perspective including standards, policy reviews, awareness and education, and inclusiveness as it relates to business.   At Scotiabank, she is a member of the Scotiabank Employment Relationship Council, the founder of the Scotiabankers for Universal Access Employee Resource Group and was a member of the IT&S advancement of women. Pina is the chair of the Canadian Financial Institution on Assistive Technology; bringing together financial organizations to leverage and share accessibility practices and strategies.  She was a member of the AODA Information and Communication Standards Development Committee.   She has been a guest speaker at various International accessibility roundtables and events. Pina travels with her service dog, Gilligan.  Pina has a PMP Master from Schulich and is certified by the ITIL organization. Monica Ackermann  is the Accessibility Project Lead at Scotiabank’s Enabling Solutions Support Management Group and is responsible for implementing systemic IT accessibility solutions and supporting assistive technology users at Scotiabank. She is an accessibility consultant and owner of Assistive Vocational Technology Associates working alongside people with disabilities and their employers in the financial, government, education and commercial sectors helping them to achieve their equity and inclusion goals.    Monica is Systems Design Engineer and member of the PEO and Vocational Rehabilitation Association. While completing her Masters degree in the York University Critical Disability Studies program she explored the intersection of accommodation and accessible software design through both her research into Accessible Technology Infrastructures and as a Research Associate for the DIS-IT research alliance.She was a member of the AODA Employment Accessibility Standards Development Committee and has been a board member at ARCH Disability Law Centre for the past 5 years. George Zamfir  is a Technical Accessibility consultant with Scotiabank’s accessibility team. His focus and passion is IT accessibility and is thrilled to have improved accessibility on some of the biggest web projects at the bank. He had to wear many (technical) hats on various projects including accessibility testing & planning, web development & prototyping and doing many, many bug fixes.    George has a BSc Computer Science from Ryerson University. He stumbled into the field of accessibility during his university years when he worked first as a programmer then as a research assistant under Dr. Deborah Fels in a great research lab called The Center for Learning Technologies. George did his undergraduate thesis on Deaf culture and the benefits of sign-languages on the web.    In his spare time he likes to meddle into other people’s web projects in order to make them (more) accessible. He’s currently volunteering some of his time to CitizenBridge and his wife’s cooking blog.
  • Quickly run through the agenda.
  • The following are all of ESSM's Roles and Responsibilities. However for the purposes of this presentation we will focus on IT Accessibility All roles & responsibilities: Governance Training Tools AT – IT Solutions Job Accomodation Support IT Accessibilty Education, information, awareness
  • 4-phase roadmap Step 1: Define Scotiabank’s Accessibility Vision Step 2: Deliver an integration roadmap Step 3: Integrate accessibility processes, tools and education Step 4: Review overall effectiveness 4-phase Roadmap - Developed in partnership with IBM
  • As people worldwide began to fully understand the importance of the Internet to societal participation, many have started taking action to ensure that everyone can benefit from it. Today: Increasingly vocal consumers and advocacy organizations are holding public- and private-sector organizations accountable for accessibility and inclusion. Evolving legislation is driving accessibility into private sector and onto the web. And governments are adopting international conventions and technology standards for inclusion [Highlight examples on the chart] ONTARIO – private sector with over 50 employees - that’s about 20,000 companies, or 5.2% of the 380,000 small and medium enterprises in the province .
  • As people worldwide began to fully understand the importance of the Internet to societal participation, many have started taking action to ensure that everyone can benefit from it. Today: Increasingly vocal consumers and advocacy organizations are holding public- and private-sector organizations accountable for accessibility and inclusion. Evolving legislation is driving accessibility into private sector and onto the web. And governments are adopting international conventions and technology standards for inclusion [Highlight examples on the chart] ONTARIO – private sector with over 50 employees - that’s about 20,000 companies, or 5.2% of the 380,000 small and medium enterprises in the province .
  • The scotiabank.com Redesign Project Why is this particular project successful? Project Considerations & Key Drivers What steps did we take? How was accessibility embedded at each phase?
  • Project Considerations: The business team had solid accessibility awareness prior to engaging us : All the years of hard work on awareness paid off Immediate buy-in: Early in the planning phase the management team embedded the accessibility work effort and resources in the project plan Financial backing: The 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!
  • This flowchart shows the 5 phases of the project delivery lifecycle. Phase 1: Project Concept. Phase 2: Project Initiation. Phase 3: Project Planning. Phase 4: Design.  Phase 5: Implementation. The next level of the flow chart shows the process / material available through ESSM: Accessibility Compliance Statement Accessibility Compliance Checklist Test Tools; WebKing, AIS Toolbar, JAWS, CommonLook Test Scripts and processes including HP Mercury test scripts. Level 3 shows the services / processes available that support accessibility Accessibility Consultation / Testing by ESSM staff Educational tools; including accessibility community, Accessibility Portal, training.
  • 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 1. Planning: Accessibility compliance & checklist 2. Wireframes & Design: Visual logic, navigation, readability 3. HTML Prototype: Full-suite accessibility evaluation & solutioning 4. Steady State: Maintenance, content management, remediation
  • Screenshot of one of the design templates showing the main UI elements: header, navigation, main content, footer
  • Early acceptance & good planning: Pina’s relentless work to champion accessibility and make it a requirements got us early acceptance Monica’s good planning gave us enough time at each stage to evaluate accessibility and provide solid technical solutions. Breaking the mountain into small hills – CMS, framework, templates, widgets: Divide and conquer, smaller pieces means people don’t get lost in the breadth of details. We can prioritize smaller pieces: talk about CMS, framework, templates, widgets 1 point of contact – when in doubt the ask us. It has now become standard to run things by us even without a formal service request.
  • We’ll do it in phase 2 – not our words However, it’s a balancing act. Maybe our issue is not that important and can wait. Breaking accessibility at launch-time, oupsy! In order to go live some code was taken out and different component were affected (not just for accessibility). We already had the solutions done so we whether resent the code or we rebuilt some of the fixes right away. Saying “Yes” to everything http://blogs.hbr.org/cs/2012/05/the_biggest_lie_in_corporate_a.html
  • We’ll do it in phase 2 – not our words However, it’s a balancing act. Maybe our issue is not that important and can wait. Breaking accessibility at launch-time, oupsy! In order to go live some code was taken out and different component were affected (not just for accessibility). We already had the solutions done so we whether resent the code or we rebuilt some of the fixes right away. Saying “Yes” to everything http://blogs.hbr.org/cs/2012/05/the_biggest_lie_in_corporate_a.html
  • Possibility - to get in early and truly embed accessibility in the project plan, allocate resources, plan for accessibility testing. It was a possibility to not do accessibility as an after-thought. Opportunity - to educate many internal teams hands-on so that next time we don’t discuss alt text again, we discuss navigation principles. BONUS: this set a precedent both for quality of work and managing the accessibility stages Action - build accessibility from the bottom-up, CMS to rendered HTML, get engaged at every stage, attend those status calls. Even if it takes you 5 minutes to review wireframes everybody needs to know that it has to be done.
  • - Content templates: main content on any given page; it doesn’t include framework elements, like header, footer, nav, etc. - We’re not going to show you all 13 templates
  • Aaaaand we haven’t even shown a page with just plain text content
  • Accessibility Integration in a Global Customer Website - Scotiabank.com - A Success Story 1/2

    1. 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
    2. 2. Meet Scotiabank’s Accessibility Team. Hi! 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 © 2012 Scotiabank
    3. 3. Agenda • ESSM Roles & Responsibilities • Scotiabank’s Accessibility Strategy • 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
    4. 4. 1. ESSM Roles & Responsibilities – Focus on IT Accessibility © 2012 Scotiabank
    5. 5. 2. Scotiabanks Accessibility Strategy – 4-Phase RoadmapThere 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
    6. 6. 2. Scotiabanks Accessibility Strategy – Organizational 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
    7. 7. 2. Scotiabanks Accessibility Strategy – Standards & RegulationsGlobal trends accelerating market demand for accessibility Select U.S. legal inquiries and litigation since 2008 Increasingly vocal consumers and advocacy hold organizationsIn Marketplace accountable  Ontario AODA (2005) with ICT implementation phase beginning in 2012. Evolving legislation  Federal CLF 2.0 drives accessibility into private sector and  Quebec and Manitoba standards initiatives Canada onto the Web  North American market harmonization – air travel, telecom, selling to USA  U.S. Government ‘refreshes’ and expands Americans with Disabilities Act and Section 508 of U.S. Rehabilitation Act (in progress) Accessibility standards  U.S. 21st Century Communications and Video Accessibility Act requires captions apply to public and for video on the Internet (2010) private sectors  U.S. Dept. of Transportation – FAA rules will regulate Canadian air carriersIn North America accessibility (proposed 2012 regulations) – web and kiosk  U.N. Convention on the Rights of Persons with Disabilities – First universal Governments adopt framework for ICT accessibility [Signed by 149 countries; Ratified by 103] international  Progressive public policies and government mandates for compliance with conventions and Worldwide Web Consortium’s Web Content Accessibility Guidelines (WCAG) in technology standards Australia, Canada, China, Japan, Netherlands, U.S., U.K., and others for inclusion  Rapid international standard adoption in other emerging markets (e.g., India) Globally © 2012 Scotiabank
    8. 8. 2. Scotiabanks Accessibility Strategy – 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
    9. 9. The scotiabank.com Redesign ProjectWhy is this particular project very successful?Project Considerations & Key DriversWhat steps were taken towards accessibility?How was accessibility integrated at each phase?
    10. 10. 3. Why This Particular Project? Considerations Project Considerations • The business team had solid accessibility awareness prior to engaging us All the years of hard work on awareness paid off • Immediate buy-in Early in the planning phase the management team embedded the accessibility work effort and resources in the project plan • Financial backing The 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! © 2012 Scotiabank
    11. 11. 3. scotiabank.com Redesign – Project Stakeholders Teams Involved Internal Clients Digital Marketing All major business lines owner, project manager Multiple content owners Vendor External Scope design, HTML prototype Improved customer experience CMS Team back-end content management Unified design & branding Focus on Information Architecture Copy Deck & Translation Goal-based navigation ESSM accessibility, testing Internal Scope Others advisory, management, dev One platform for all editors integration, etc. Consolidate dispersed micro-sites & content Reusability of templates, tools and functionality © 2012 Scotiabank
    12. 12. 3. scotiabank.com Redesign – What steps were taken? (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
    13. 13. 3. scotiabank.com Redesign – What steps were taken? (cont’d) 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 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 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
    14. 14. 3. scotiabank.com Redesign – 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 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 © 2012 Scotiabank
    15. 15. 3. How was accessibility integrated? Phase 1 – Planning 1. 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
    16. 16. 3. How was accessibility integrated? Phase 2 – Design Templates 2. 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
    17. 17. 3. How was accessibility integrated? Template Example Header DesignMain Content Template Vertical Nav Menu “Fat” Footer © 2012 Scotiabank
    18. 18. 3. How was accessibility integrated? Phase 3 – HTML Prototype 3. 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
    19. 19. 3. How was accessibility integrated? Phase 4 – Steady State 4. 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
    20. 20. scotiabank.com Redesign – Lessons Learned 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 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: consistent approach to solutioning. 80 / 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 & solutioning Easy and digestible format and often very custom to the team’s expertise (code vs design)
    21. 21. scotiabank.com Redesign – Technical Challenges Ongoing 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” Sometimes we will, sometimes we won’t, either way, it gets complicated. Maintaining 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
    22. 22. scotiabank.com Redesign – Resource Challenges Saying “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 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 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
    23. 23. Possibility, Opportunity, Action! Possibility… ... to get in early and truly embed accessibility in the project plan Opportunity… … to educate many internal teams hands-on. Bonus: set a precedent 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
    24. 24. scotiabank.com Redesign – Q & A THANK YOU! Time for Q & A !
    25. 25. scotiabank.com Redesign – Summary of Part 2 NEXT Part 2: SDLC processes, solutions & best practices BUT FIRST We take a break!
    26. 26. scotiabank.com Redesign – Appendix Appendix
    27. 27. Appendix / Resources Useful Website Stats – Monthly Unique Visitors ~ 3.7 million
    28. 28. Appendix / Resources Useful 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%
    29. 29. Appendix / Resources Useful 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%
    30. 30. 4. Integrating Accessibility – Scope – Templates (1) A Few Page Templates – to rule them all (pages)
    31. 31. 4. Integrating Accessibility – Scope – Templates (2) A Few Page Templates – to rule them all (pages)
    32. 32. 4. Integrating Accessibility – Scope – Templates (3) A Few Page Templates – to rule them all (pages)
    33. 33. 4. Integrating Accessibility – Scope – Templates (4) A Few Page Templates – to rule them all (pages)
    34. 34. 4. Integrating Accessibility – Scope – Dynamic UI Dynamic UI Elements – used throughout the site Repository: 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-UpsAccessibility Integration in a Global Customer Website – A Success Story
    35. 35. 4. Integrating Accessibility – Scope – 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 templatesAccessibility Integration in a Global Customer Website – A Success Story

    ×