Taking a holistic approach to Web

AccessibilityPaul Jackson, Web Project Officer

Treasury Board of Canada SecretariatGovernment 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 notan 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 Devices

• Technical 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, 2014

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

frameworks1. 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 organizations18