Taking a holistic approach to Web Accessibility Paul Jackson, Web Project Officer Treasury Board of Canada Secretariat Government of Canada

For many, Web accessibility can be difficult to understand Find it too technical or difficult to relate to –WCAG 2.0 and guidance is 750+ pages long! –Each failure’s impact varies from user to user Choose wisely: The approach you take will have a major impact on your proposals –Many stop listening when something is too difficult to understand or relate to –Use terms, concepts and benefits that work well for the target audience 2

Web accessibility is not an island unto itself Not the only key to positive user experiences –What if users can’t find the right page? –What if an interface is non-intuitive? Some overlap exists with best practices from other disciplines –Usability / User Experience –Mobile design –Search Engine Optimization (SEO) –Open data and APIs 3

Taking a holistic approach Focus on Web accessibility in combination with other disciplines Build multidisciplinary teams –Helps to avoid “us” versus “them” scenarios common to discipline silos –Address each other’s perspectives early on by working together as a team 4

Show how other disciplines can benefit How can your proposal for improving Web accessibility help other disciplines? “Situational disabilities” help others to relate Video captions example –Kiosks or computers without speakers (communications) –Mobile devices in noisy or noise-free areas (communications, mobile design) –Video search (search engine optimization) 5

Taking an enterprise-level holistic approach Standardize Web pages, Web publishing and Web development Collaborate with other organizations Benefits for each discipline –Makes it easier to ensure requirements and best practices are being met –Drives down research and development costs –Avoids duplication of effort –Produces better quality results 6

Standardize Web pages: Web Standards (Government of Canada) Standard on Web Accessibility Standard on Web Usability Standard on Web Interoperability Standard on Optimizing Websites and Applications for Mobile DevicesStandard on Optimizing Websites and Applications for Mobile Devices Technical Specifications for the Web and Mobile PresenceTechnical Specifications for the Web and Mobile Presence 7

Standardize Web publishing: Web Renewal (Government of Canada) Consolidating 1500 websites into Canada.ca –Single layout and design –Single information architecture and navigation structure Establishing a Principal publisher –Manages publishing to Canada.ca Procuring a managed Web service –Cloud-based service replacing departmental publishing systems and analytics software 8

Standardize Web development: Web Experience Toolkit (1 of 2) Front-end framework for building accessible, usable and mobile-friendly websites –Reusable templates, plugins and widgets Accessibility –WCAG 2.0 level AA –WAI-ARIA to further enhance accessibility Usability –Iterative design and usability testing approach 9

Standardize Web development: Web Experience Toolkit (2 of 2) Mobile-friendly responsive design –Adapts to device screen size and capabilities –Touchscreen support and optimized for performance Multilingual (supports 33 languages) Widely used on Government of Canada sites –Used on other sites including a11yQC and the City of Ottawa –Free to use by anyone (MIT license) 10

Collaborate with other organizations: Web Experience Toolkit (1 of 3) Open source project managed on GitHub –Open collaboration with private, academic and public sectors and anyone who is interested –Contributors from various disciplines Improvements through collaboration –Crowdsourced the usability heuristic reviews for toolkit components (3 per component) –Translations for 33 supported languages were crowdsourced from missions around the world 11

Collaborate with other organizations: Web Experience Toolkit (2 of 3) Weekly open codesprints –In-person collaboration with laptops and wi-fi –Impromptu training sessions –Open to anyone who is interested in attending Web Experience Toolkit CodeFest –Free community-driven event aimed at developers, designers and communicators –3rd annual event is August 14 and 15, 20143rd annual event 12

Collaborate with other organizations: Web Experience Toolkit (3 of 3) 13 Video summary of CodeFest 2013

Collaborate with other organizations: 3rd party plugins and frameworks Widely used to reduce development and maintenance effort Accessibility may need improving –Often not a major focus –Limited access to expertise and testing Many open source plugins and frameworks are collaborative by nature –Rely heavily on community support 14

Improving the accessibility of 3rd party plugins and frameworks 1.Change the original –Large area of effect (all sites that update to the new plugin or framework version) –No extra maintenance effort –May be challenging to get changes accepted 2.Configure, enhance or override a copy –Small area of effect (only sites using the configured, enhanced or overridden copy) –Extra maintenance effort 15

Web Experience Toolkit (WET) approach to Bootstrap CSS framework integrated into WET v4.x –Responsive grid system and components –Not using any of the JavaScript components Worked with Bootstrap to fix as many issues in the original as possible Fixed remaining issues by configuring and overriding the Sass version of Bootstrap 16

Web Experience Toolkit (WET) approach to jQuery Validation Error handling plugin for forms integrated into WET v3.x and v4.x Major WET project member now also a jQuery Validation project maintainer Fixed several issues in the original Fixed remaining issues by configuring and overriding the plugin 17

Taking a holistic approach to Web Accessibility Focus on Web accessibility in combination with other disciplines –Build multidisciplinary teams to address each discipline’s perspective early on –Show how other disciplines can benefit Take an enterprise-level holistic approach –Standardize Web pages, Web publishing and Web development –Collaborate with other organizations 18