Accessibility in UX: Designing Sustainability
I gave a talk at Red River College on the topic of accessibility and sustainable design for a lecture series called “Designing Sustainability.”
My audience was made up of design students about to embark on their careers, at a time where sustainability in our design processes, products, and platforms has never been more important.
My goal was to help students become advocates for accessibility in their work, no matter what part of the design process or product development lifecycle they’re involved in, or where their career takes them.
Today I’m going to be talking about accessibility. This is a very personal topic for me, as I have profound hearing loss.
My hearing loss is a bit weird. With the help of hearing aids, I can hear sound — I can hear your voice and listen to music and stuff like that. When multiple people are talking, I can usually tell who’s talking, and I can tell when someone’s asking a question just by the rising inflection of their voice.
However, hearing is more than just volume. There’s a specific part of hearing called clarity: the part that takes the sound, interprets it, and draws out specific words.
My clarity is totally shot. While I can hear your voice just fine, I can’t turn it into distinct words. Because of this, I rely entirely on lip reading for conversation. It also means that I can’t use things like phones, because while I can hear someone talking on the other end, I can’t draw words out of it.
I really believe that I grew up at the perfect time. The internet was growing, instant messaging was just starting to take off, and texting was becoming a thing. Suddenly, I was able to participate in everyday conversations, build relationships, and make plans without having to think twice about my hearing. Today, almost everything at work is done online in some form: I use email, Slack, and even video calls. Technology makes products, services, and interactions more accessible. Because of technology, my hearing loss is just an asterisk in my life.
However, failures in accessibility are frequent, common, and show-stopping frustrations.
Once, I forgot my online banking password and needed to go through the password reset process.
Since this was my online account, it makes sense that I should be able to reset it online, like any other online account.
However, BMO’s process stated that I needed to call them to reset my password. Since I can’t do this myself, my first thought was to have someone else call on my behalf. Unfortunately, they refused to speak with this person, because their process required them to talk only with the account owner.
My next idea was to go to my local branch in person to get help. It turns out that even when you go to the branch in person, you’re required to call the same help line. The bank’s manager, recognizing the issue, decided to make the call on my behalf. Unfortunately, they refused to speak to the bank manager, because their process required them to talk only with the account owner.
Thankfully, the bank manager was persistent and eventually convinced the rep on the line that it was okay for a bank manager to act as an in-between during the phone call.
The whole process of resetting my password was frustrating for me, for the bank manager, and for the rep on the phone.
Here’s another example.
I’m sure many of you have experienced frustration around the rollout of Peggo, the new Winnipeg Transit pass system.
When the system first rolled out, the only form of feedback that the system would provide when you scanned your pass was a high-pitched beep.
I had no idea when my bus pass was accepted. I had to guess whether it was okay to continue onto the bus by judging the bus driver’s body language and generally hoping that I’d waited long enough for it to register.
Obviously, I would get it wrong. This was usually followed by the bus driver shouting at me, which I’d only notice because the entire bus was staring at me. I’d have to backtrack, embarrassed, to try again.
The processes of resetting my password and scanning my bus pass were failures in accessibility that could have been avoided. They were crappy experiences that left me feeling embarrassed and helpless.
As an individual with a disability, I’m not alone.
In 2012, 14% of the Canadian population aged 15 or older — 3.8 million individuals — reported a disability. The challenges of accessibility affects a huge and growing portion of our population.
Sustainability involves “meeting the needs of the present, without compromising the ability of future generations to meet their needs.”*
Making things sustainable means making things accessible.
What’s amazing about accessibility is that, almost without fail, improving the quality of the experience for those with disabilities inherently improves the quality of the experience for everyone.
To be certain: almost nobody is sitting around going, “I know! We’ll make it shitty and inaccessible!”
Most failures in accessibility come down to simple oversight or lack of knowledge, and a lack of responsibility within the team for accessibility as a discipline. The fact is, accessibility isn’t often included in job descriptions. It’s not the responsibility of any one designer, or a developer, or a product manager.
When everyone’s focused on delivering their part of the project, accessibility is easy to forget.
You need to be an advocate for accessibility.
You need to lead the way. Each of us is responsible for being an advocate for accessibility in our work every single day.
Today we’ll look at three major areas that you can influence to create more accessible, sustainable digital products and experiences, and some specific tools you can use.
As designers, your areas of influence include:
- Processes & Flows
- Design
- Implementation
What are those?
Processes & Flows are the specific steps or activities that occur as people move through an experience.
Design is the visual, physical, and interactive elements that work together to deliver an experience.
Implementation is the specific execution and delivery of the experience.
This is meant to be a starting point for becoming an advocate for accessibility.
It’s worth keeping in mind that the work we do isn’t always going to be done in this order; it might not even encompass all of these areas of influence.
Sometimes, the tasks we need to carry out will only focus on the design, or the implementation. And we might not always be able to influence the processes or even the design, but we can make an impact on the implementation.
Let’s take a closer look at each of those three areas of influence to better understand what they are, how accessibility fits in, and tools or methods we can use.
Area of Influence: Processes & Flows
Processes and flows relate to the steps or activities that occur as people move through an experience. Every user activity has a start and end, and we can literally trace their path along the way.
As designers, it’s our job to identify these user goals and activities, determine exactly how that goal will be achieved, and improve what already exists.
A digital product or website is a complex series of these flows working together. It’s hard enough to visualize and hold the flow of a single activity in your mind, let alone the dozens that form a product or website, that users with disabilities aren’t often considered along the way.
As an advocate for accessibility, you need to make sure that the processes and flows are inclusive of everyone. That means visualizing and documenting these complex activities in a way that everyone on the team can follow and understand, so that it’s easy to spot the issues and opportunities that affect everyone.
Thankfully, there’s kickass technique we can use to do this: experience mapping.
Experience mapping is the process of exploring and documenting user flows visually. It’s hands-on, easy to do, and it’s a great way to engage others in the work you’re doing and building consensus within a team. It can be done at the start of a brand-new project, or as a way to identify issues, opportunities, and priorities for an existing project.
Here’s the short version of how it works: you get a big stack of sticky notes and sharpies, identify the user activity you’re going to map out, and write down every single step that happens along the way.
Let’s use the BMO password reset process as an example. That’ll be our “activity.”
We’re going to make some rows for the sticky notes, beginning with our backbone: “steps.” Below that, we can put whatever we think is relevant. Personally, I will usually use “Thinking,” “Feeling,” and “Doing,” along with “Pain Points,” and “Opportunities.”
At the start of this process, I’m on the bank’s website trying to log in. Let’s add that as the first step: “Log in.” At the other end, we can probably put “Log in” again, since that’s the outcome if I successfully reset my password.
Now, if we map out the “ideal flow” through this activity, here’s what we get: they try to log in, they fail to log in, they realize they forgot their password, they hit “reset password,” they’re asked to phone in, they phone in, they verify their identity on the phone, the rep resets their password, they log in again.
Now: where can things go wrong? We know that this perfect scenario isn’t how it unfolded in real life.
Right here, there’s a massive pain point: “Customer can’t use phone.” There’s also another one here: “Customer is having someone else call on their behalf, and rep won’t talk to them.” We also know that right at this moment, the experience got really shitty for the customer.
With our experience map, we’ve created an artifact that can be shared with others on the team and in the organization. Anyone can look at this, and even if they don’t know the background behind everything, they can see exactly how the experience unfolds while highlighting potential accessibility issues.
This same approach to uncovering and documenting processes and flows can be used for almost anything: buying a textbook, getting a mortgage, posting a photo on Instagram, deleting your Facebook, and so on.
Tools
Sticky Notes & Sharpies: I strongly recommend doing experience mapping with real sticky notes and sharpies whenever you can, especially when you’re collaborating with others. There’s simply no substitute for being hands-on.
Mural: When it comes to capturing the outcomes of an experience mapping session, there’s some great tools out there like Mural that will let you create digital sticky notes really quickly.
Mapping Experiences by James Kalbach: If you’d like to learn more about experience mapping, a great resource is the book “Mapping Experiences” by Kalbach.
Area of Influence: Design
While processes & flows relate to the activities and steps that a user moves through as they accomplish a goal, design is the visual, physical, and interactive elements that they’re interacting with as they do it.
For clarity, the term “Design” is both a process and an outcome: an app is “designed,” but its user interface is a design. So, too, is a doorknob, a medicine bottle, and a sidewalk.
As designers, our every decision can advocate for accessibility.
Attractive designs aren’t inherently accessible.
Accessible design doesn’t just happen: it’s the result of a series of decisions about how things look and work with the goal of accommodating as many individual needs as possible.
To help us make these decisions, the Web Content Accessibility Guidelines (WCAG) provide an excellent framework for getting it right. The WCAG is a set of web accessibility guidelines created by the World Wide Web Consortium (W3C), the main international standards organization for the Internet.
It’s based around four principles: websites must be Perceivable, Operable, Understandable, and Robust.
The actual guidelines can be used almost like a checklist to ensure that your design and implementation meets accessibility standards. There’s three “levels of conformance” that you can strive to meet, from A to AAA, with AAA being the strictest.
The complete WCAG guidelines are extensive and detailed, and it’s a great idea to really dig into them. There’s a few specific aspects directly related to design that I’d like to touch on, including:
- Type Size
- Type Readability
- Use of Colour for Meaning
- Hierarchy of Content
- Target Areas
- Motion and Animation
Type Size
The Challenge
74 percent of Canadians require some form of vision correction. Small type is simply harder to read.
The Solution
To make it more accessible, make sure your type is large enough to read by the majority of your users. This may vary depending on who your users are, but generally speaking, 12 point type isn’t going to cut it.
Type Readability
The Challenge
Even when type is large enough to read, its legibility is influenced by the choice of typeface, the colour of the type and background, and even the “noisiness” of the background.
This is an example of my own of an initial design with poor legibility around the menu:
The Solution
WCAG 2.0 AA specifies that text should have a contrast ratio of at least 4.5:1, unless it’s large-scale text, at which point it can be 3:1. This is something you can verify using online tools — we’ll take another look at this in a few minutes.
Use of Colour for Meaning
The Challenge
Individuals with colour blindness can’t rely on colour to convey meaning. When I was in school, I had a teacher who had a colourblind friend. She told us a story one day about how they took a trip to another country where they used red, green, and yellow lights for their traffic signals, but they were mounted horizontally, and he realized while he was approaching an empty intersection that he had no idea whether the light was green or red.
The Solution
Avoid using colour as the only method of conveying meaning. Use a combination of colour, icons, and language to convey information to the user.
Provide other visual formatting for text links. Here’s another reminder about how improving accessibility improves the experience for everyone: if a link is only indicated through a blue colour, it’s totally lost when f.lux or Night Shift is turned on.
Hierarchy of Content
The Challenge
When text hierarchy isn’t clear or when content contains “walls of text,” individuals with dyslexia or other cognitive impairments can struggle to follow the content.
The Solution
Ensure that you have clear visual hierarchy, and that content is broken into concise, effective sections. Avoid walls of text.
Target Areas
The Challenge
Not everyone can move a mouse to a text link, or tap an element on a screen, with precision. Small target areas make it more difficult for users to navigate or use a website or product.
The Solution
WCAG 2.0 AA specifies that the click target should be at least 44 by 22 pixels. Mobile devices have their own guidelines; Apple’s Human Interface Guidelines for iOS devices specify that tap areas should be at least 44 by 44 pixels.
Motion and Animation
The Challenge
Individuals with disabilities such as ADHD can struggle to focus on content that has extraneous animation or movement.
The Solution
Animation and movement should be used sparingly and with purpose. Use animation to make user interactions more clear, predictable, and effective.
All of this focused heavily on digital experiences such as websites and apps. Don’t forget that the same thinking can apply to physical interactions: for example, the Winnipeg Transit Peggo scanning terminal relied solely on a beep sound to confirm someone’s pass, which is the audio equivalent of relying only on colour to convey meaning. An accessible approach to the scanning device design would identify this as an accessibility issue and solve it.
Tools
WCAG 2.0 & Apple’s Human Interface Guidelines: I strongly suggest exploring the WCAG 2.0 guidelines, along with Apple’s Human Interface Guidelines. These are based on years of study around human-computer interaction and will help make your design systems accessible to everyone.
WebAIM Colour Contrast Checker: There’s some wonderful tools you can use during your design work to make sure you’re meeting some of these guidelines. One example is WebAIM’s colour contrast checker, where you can enter colour hex codes and see if they meet WCAG standards.
Software Plugins & Tools: If you use tools like Sketch or Photoshop, there’s plugins or built-in functionality that will help you check if you’re meeting minimums for colour contrast and text size, and preview your design work with colour blindness simulation.
Area of Influence: Implementation
In the world of digital design, your design will usually end up being coded into the actual website, app, or product that people will interact with.
This is where we can use technology to have a tremendous impact on accessibility. Different tools exist to help individuals with disabilities. Things like screen readers help individuals with visual disabilities use websites and apps by reading things out loud. User interface designs can be scaled back to text-only modes that can be modified to suit a reader’s needs. Web videos can display subtitles.
However, screen readers rely on specific HTML helper tags on webpages. Text-only modes rely on clear text and HTML tag hierarchy. Subtitles on web videos need to be written and added to the video.
It’s not hard to do: it just takes a bit of awareness.
While, as designers, we may not be involved in the actual development or implementation of our products or websites, we can still advocate for accessibility. We can push to set the standard for accessibility and get buy-in from our team.
We can get involved in validating and monitoring the implementation and make sure it meets accessibility standards.
We can even pitch in where we can. An excellent example: writing transcriptions for video subtitles.
Again, the WCAG guidelines provide the perfect checklist to make sure you’re creating an accessible experience. Some highlights:
- Text alternatives should always be available for non-text content. This means things like subtitles for videos, captions and alt text for images, and transcripts for audio recordings.
- Content and websites should be navigable without the use of a mouse. There’s lots of cool things that can be done to make it easier for users relying on devices such as screen readers.
- Users should be able to modify the appearance of content to suit their needs.
Tools
WCAG 2.0 Guidelines (again): Again, I strongly suggest exploring the WCAG 2.0 guidelines. As an advocate for accessibility, make sure your team is aware of these guidelines, and come to an agreement what level of conformance you will strive to meet. That way, everyone involved in implementation has something they can refer to to make sure
WAVE Browser Plugin: Along with making sure that your design meets accessibility guidelines before it moves into implementation, you can review and identify potential accessibility issues in the implementation using tools such as browser plugins. WAVE is one example, which flags potential accessibility issues right on the page, and provides concrete solutions that you can pass along to your team.
Usability testing
Outside of the three areas of influence we just discussed, I’d like to talk a little bit about usability testing.
We’re going to miss things.
No matter how well we plan our designs and double-check that we’re meeting all the various accessibility guidelines, we’re going to miss things. They might be small things, like a missing link or misspelt phrase, or they might be systematic things, like a user flow makes perfect sense to us, but leaves real users completely baffled.
As an advocate for accessibility, performing usability testing is a fantastic way to uncover accessibility and usability issues. It can be done as part of design or implementation. You can use usability testing while making wireframes to see if the user flow through the wireframes makes sense to the user. You can use it on existing products or services to identify pain points and prioritize work to be done.
Usability testing can sound intimidating and expensive, but at its core, it’s very simple.
Here’s an outline for “Minimum Viable Usability Testing:”
- Make a prototype.
- Find participants.
- Find a place and watch them use the prototype
- Iterate
1. Making a prototype
There’s lots of software out there specifically for making prototypes, like Invision. You could also use a real app or website, or even paper wireframes. You can even test a competitor’s product or website.
2. Finding participants
Good usability testing involves participants who reflect the actual users of your website or product. People who are like your users are everywhere: you just have to find them.
You generally want about 5 people for a usability test. This is enough to find most of the issues that people will experience. More than 5 will make your tests a bit more rigorous, but there’s diminishing returns. After about 5 participants, it’s a good idea to iterate on your prototype based on what you’ve learned.
3. Find a place and watch them use the prototype
In other words, run the usability test. Here’s how a usability test should generally unfold:
- Introduce the session by telling them what will happen, giving them instructions, and giving them the prototype.
- Watch them use the prototype.
- Listen for questions and comments (don’t answer questions, and write everything down).
- When they are done, ask them what they did and why.
- Thank them.
If possible, it’s a good idea to have someone dedicated to taking notes as an observer, and someone dedicated to facilitating the test. That way, the person doing the facilitating doesn’t have to worry about capturing everything.
4. Iterate
After all the tests are done, take what you’ve learned and iterate on your design.
Usability testing and accessibility testing are similar, but not quite the same. Accessibility testing focuses on making sure that the final product is accessible to people with disabilities, especially as it relates to the accessibility tools that they may be using. However, usability testing can identify pain points that will affect the accessibility of the prototype as early as possible.
Sustainable design is accessible design.
Today is all about sustainability. Remember, sustainable design is accessible design. The more you think about and apply accessibility in your work, the more sustainable your design is going to be, because it’ll be inclusive of everyone.
You need to take ownership of accessibility in your work. Someone needs to lead the way.
Build it into every step of your personal design process.
Follow it through implementation, and hold your team — and yourself — accountable for delivering accessible experiences.
When you improve the quality of the experience for those with disabilities, you improve the quality of the experience for everyone.
Thanks for hitting the 👏 if you enjoyed this article!
Quinn Keast is a UX Designer + Partner at Caribou, a user experience strategy and design consultancy in Winnipeg.
* World Commission on Environment and Development. 1987. Our Common Future. Oxford: Oxford University Press, p.8.
