Developing Empathy: The Importance of Digital Accessibility Workshops
By: Robert Carr
Tags: Web Accessibility, Workplace Culture, Accessibility, A11y, Digital

Imagine this: you’re given a Ziploc bag filled with pieces of coloured paper of different shapes and sizes and 15 minutes to build something. What can you create?

The 8 coloured paper cut outs of different shapes and sizes we gave participants (Patrick Dunphy/ CBC)

This was the question we posed to a group of people at a recent accessibility workshop. What we didn’t tell them was that the pieces were the makings of a paper house. Some groups incorporated objects from the room. One group built a duck using a sock, sponge & coloured paper shapes. Only one of the six groups was able to create something close to what we had in mind.

A duck created from workshop materials including a sock, elastic bands and coloured paper cut out shapes. (Patrick Dunphy/ CBC)

We then showed them the paper house we’d intended them to make, much to their surprise.

One teams version of a house that closely resembled what was wanted. (Patrick Dunphy/ CBC)

The lesson: it’s difficult to understand the meaning of something when what you’re building isn’t clearly stated or defined — a key principle of accessibility. That lack of clarity extends to people that rely on assistive technology (AT) as well — if they don’t know what they’re looking at, they won’t be able to understand it.

Our goal at CBC is to foster a culture of accessibility. Our accessibility team is small but mighty — made up of me (Web Accessibility Analyst), Hernando (QA Analyst), and Patrick (Digital Accessibility Program Manager).

We work with product teams and multiple content areas to enable them to create accessible experiences that meet CBC’s standard for digital accessibility (WCAG 2.0 AA). We have a mission to help teams understand the impact that accessibility has on the way our audience members interact with our digital experiences.

Some people have a theoretical understanding of why accessibility is important but the nitty gritty is not well understood. Here are some accessibility exercises we run through in our workshops that we hope builds empathy and technical knowledge.

POUR: Understanding the empathy building blocks

We begin by explaining the four principles of WCAG — bundled up in the acronym POUR: perceivable, operable, understandable, robust. All elements of accessibility are built from these principles.

These principles are often enough for anyone to get started with accessibility. For example, if you understand POUR, you get that a person with vision impairment can still get content from your website. Or a right-handed person whose right arm is broken can still navigate your product. These types of considerations should be top of mind in order to build an accessible website.

An illustration of 4 characters and how they relate to the 4 Principles. Perceivable = I can perceive it. Operable = I can use it. Understandable = I can grasp it. Robust = I can access it. (Image credit: https://elgl.org/digital-accessibility-is-your-local-government-compliant/)

We also run digital empathy exercises where workshop participants operate user interfaces they are already familiar with; often by having direct involvement with its design or development. The key to these exercises is that they must complete tasks with an artificial barrier in place.

At this time it’s important to acknowledge that disability simulations can have unintended consequences. It’s impossible to replicate a person’s disability or the impact an inaccessible experience has on them. These empathy exercises are not intended to emulate personal experiences and we are explicit in explaining the concept of barriers in the user experience for the purpose of this workshop.

People put on glasses that restrict visibility, use gloves that limit mobility and employ different browser plugins that can change default colour schemes, magnify the user interface and make a user’s mouse behave erratically, among other things. The goal is to demonstrate how difficult operating digital user interfaces is when appropriate accessibility considerations have not been made. Without this type of experience, it can be very difficult to teach and understand the challenges some people face when using our products.

Technical solutions & auditing tools

After demonstrating the challenges some of our users face, we talk about solutions for common accessibility problems.

We start by discussing focus management. This means that it’s critical to ensure that the user can get from the top of the page to the bottom (and vice versa) using only their keyboard. Although this may seem obvious and what the default should be, it’s often overlooked and takes some effort to get right.

Common feedback we often hear is that, for design reasons, people dislike focus indication. This is an indicator that tells you where you are on the page, typically using an outline on the active element. The visual is different for different browsers but the common response is that it’s ugly or ruins a design. What’s not always clear is that once it’s removed, users who rely on a keyboard to navigate can no longer easily see where they are on the page. Without the ability to easily track where they are, they are unable to use basic functionality like buttons and links.

To help drive home the importance of focus indication, as well as the importance of skip links and content tab order, we instruct participants to navigate web pages using only their keyboard. Experience has shown that keyboard functionality is often ignored. While this is often unintentional, it’s ignored because people don’t fully understand the consequences of this action or the difficulties experienced by some users when it’s not properly incorporated.

Accessibility auditing tools are also an important part of these workshops. A core function of the accessibility team is to enable our product teams to test their own work in order to get a sense of their progress towards accessible product development. We teach them how to manually check a page because automated auditing tools will only detect 25 to 30 per cent of potential accessibility issues. We need our teams to understand the issue and know how to approach the problems on their own before they engage our team. Although we’re small and mighty, we won’t always have the capacity and bandwidth to help resolve the issue.

We spend time tackling technical issues that need to be considered, such as semantic html, landmarks, headings, colour contrast, captions or text alternatives for videos and images, in page navigation, descriptive links, and much more. These elements comprise the pieces of the paper house. They are the basic building blocks that are necessary for creating accessible experiences.

Side by side of paper cutout exercise and how it relates to semantics. Each cutout is labelled which it’s function/purpose (ie. door) in correlation to HTML5 elements (ie. nav). (Patrick Dunphy/ CBC)

If the pieces of the house weren’t obvious before, they are now (as shown in this picture). The house has been assembled and labelled with care, with all elements in place — just as you would find with the landmark elements within an html page.

An early attempt to make things accessible will reduce the effort required later. Waiting until the end of a project can mean more work and ultimately a less accessible product. Ensuring our teams have the knowledge and tools where accessibility and empathy are top of mind, is the key to building accessible websites.