Empathy-First Design: How To Get Started With Accessible Design

Introduction

As a civilization, we have never been as connected as we are today. The speed with which we share ideas, controversies, and – of course – cute puppy videos has reached unprecedented levels. Every other day a new tool pops up to make our digital lives a little bit better (or so they say). It seems that we cannot go a new day without some company announcing their all-mighty new AI assistant that’s here to knock your socks off.

At first glance, it may seem like a business-as-usual situation, where the market chases its tail to keep up with technology. Still, after seeing how fast companies are running to create the next best thing, we can’t help but take a step back and wonder: can everyone reap the benefits equally? Or are there people being left behind?

At this point, there’s no “better future for everyone” if we are not really thinking of everyone. Disabled users have no choice but to fight silent battles everywhere they go, and you might think that the online world would be the one place where they shouldn’t have to, but that’s not the reality we’re living in. Because of this, it is no longer a question if we should design inclusive digital products. It’s a demand. It’s not just a moral issue but also a legal one, according to the Americans with Disabilities Act (ADA).

With that being said, let’s talk about the importance of designing accessible products, the impact this can have on your design process, and how to take the first few steps, so you can start building a better digital world for everyone and show how much you care about accessibility in your digital products.

What does it mean to build accessible products?

What is an accessible product, you ask? Let’s start there. An accessible product is a product that can be used by as many people as possible, including people with situational, permanent, or temporary disabilities, without them having to make any critical modifications or changes to use it. In terms of digital products, it would be accessible apps, websites, or any other software. Maintaining an all-inclusive mindset will not only help you open new horizons for your creativity, but it also means you’ll design with empathy at heart. Everyone deserves access to the digital products we create. People with disabilities shouldn’t shoulder the burden of adapting to inaccessibility on their own. There’s a lot we can do to help.

Diving into Accessibility Guidelines

If you haven’t heard of them, the Web Content Accessibility Guidelines (WCAG) are the most used guidelines for accessible web design.

They were created by the World Wide Web Consortium (W3C), and they give “web developers, web designers, and everyone involved in the design process the guidelines they need to design accessible web content.

The WCAG guidelines cover a wide range of accessibility issues. According to their main principles, all content available on the web should follow these 4 pillars:

1. Perceivable:

“Information and user interface components must be presentable to users in ways they can perceive.”

This means you’ll need to provide text alternatives for non-text content like images, making sure the background and the information have appropriate contrast, that they can be distinguished from each other, and providing captions and audio descriptions in your videos.

2. Operable:

“User interface components and navigation must be operable.”

This refers to your website navigation, which needs to be operable, as well as the user interface. This includes providing your users keyboard accessibility, allowing them enough time to read and interact with your content, and ensuring that any moving content can be easily paused or stopped.

3. Understandable:

“Information and the operation of the user interface must be understandable.”

Less is more – designers know this very well. This pillar refers to using clear and simple language, providing clear instructions if needed, and ensuring your content is organized logically so that your users can understand it easily.

4. Robust:

“Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”

This criterion entails that your users must be able to access the content even if assistive technologies change and advance. The content, under any circumstance, should remain accessible to everyone.

The way these principles are addressed and included in your designs can be as many as there are AI bots out there, which is why the WCAG developed a list of guidelines to address each principle, including aspects such as formatting, decorative content, content alternatives, and much more. All these guidelines aim to ensure that content is directly accessible to as many people as possible and that it can be adapted or re-presented in different forms to match people’s sensory, physical and cognitive abilities, as well as any assistive technology.

After that information dump, you’re probably wondering how to start including these guidelines in your designs. Don’t worry; don’t click away just yet scrambling to find the list of subprinciples. Here’s the first thing you must do before delivering accessible products for the web.

Inclusive design: a change in perspective

In 2015, Matthew Williams, a Special Olympics World Champion, gave a TED Talk about intellectual disabilities. In his opening speech, Matthew said a sentence that has stuck with me for years.

(… )In too many cases, people with intellectual disabilities are invisible to the wider population.

Matthew Williams, a Special Olympics World Champion

While we are being honest, it’s not only people with intellectual disabilities that have had to navigate the world at an unfair disadvantage. People with all kinds of disabilities often feel invisible to the rest of the world.

Matthew continued to talk about the Special Olympics and how they have helped over 4 and half million athletes with intellectual disabilities find a purpose and keep themselves in good health. He mentioned how his basketball team played against the Nigerian team that year, and the night before the game, the Special Olympics healthcare program gave 7 Nigerian players free hearing aids. For the first time in their lives, they could hear clearly:

They were emotional, because for the first time, their coach could communicate vocally with them. They could hear the basketball in the court, the referee’s whistle, and the fans cheering in the stands. All sounds that we take for granted.

Matthew Williams

That last sentence felt like a punch to the gut the first time I heard it, but only because of how true it is. People without disabilities take a lot of things for granted. We expect the world to understand what we put into it simply because we do. Our experiences and capacities condition the thought process behind it. But it’s time we do better. To become better designers and make the best out of the Accessibility Guidelines, we first need to go beyond our habit of considering only our perception of the world. Putting yourself in someone else’s shoes sounds simple, but if you really want to expand your skills as a designer and make accessibility your default practice, here are a few things you should try:

• Have a conversation.

No one is better suited to tell you how it feels to navigate the world (both online and offline) with a disability than someone who lives with one. Conversation is always a good place to start accessibility efforts. Be an open-minded researcher, find someone you can have a heart-to-heart with, and ask them what browsing the web looks like and how it makes them feel. If there are any websites they love or any, they avoid and perceive as inaccessible. Try to see the world through the eyes of people living with a disability for a change.

• Ask yourself the right questions.

You probably have a specific creative process defined in your head as a designer. But to design more accessible products, you will have to add a few items to check off the list. When designing a new product or a website, do you ask yourself how your design would be perceived by someone who doesn’t go through the world the same way as you?

“How would this content sound to someone using an assistive text-to-audio technology?” “How would this website look if I was visually impaired?” “Is this navigation friendly to users with limited mobility?”

The answers to questions regarding accessible product design tend to fly over our heads, resulting in a beautiful design that’s not friendly to a big part of our population.

User-first design, everything else second. Tips for getting started with digital accessibility

In reality, an accessibility-first design process is similar to your regular design strategies. The best way to start designing with accessibility in mind is to prioritize it from the beginning of the design process. Having empathy for people who currently feel invisible and being aware of what a disability encompasses is the best way to get started.

1. Start with the right foundation.

Most accessibility experts (if not all) recommend integrating accessibility into the early phases of the design process. Still, they've found that, in most cases, it’s not done this way. Instead, specific accessibility features become a simple afterthought – something you'll be adding to squeeze in once the design is ready.

That’s not going to cut it anymore. The best advice to avoid this is to make accessibility a strategy, and involve into it product managers and other team members to create accessible interfaces that work for the broadest range of users and that you can reuse in different projects. This is no small task since it can require a workshop for the whole team, extensive usability testing, and even code-base testing.

However, you can cut some corners by finding some existing examples of tested design styles, components, and patterns to include in your design process. The book Inclusive Design Patterns by Heydon Pickering is a great resource for understanding this in greater depth.

2. Identify weak points in the early stages.

Finding an approach with your team that helps you identify possible barriers before they are too hard to fix is the best strategy you can implement.

This could mean involving users with disabilities in the design process to test features and challenge your design. In fact, companies such as Fable, which connects you to people with disabilities for user research and testing, are a fantastic option to help you understand how you can make this process your default method.

At this point, everyone in the project must understand what factors make a design less accessible and why, so you can fix it early on. Being aware of how assistive technologies work and how users with disabilities navigate the web can help you make better decisions and identify the weak points more accurately.

3. Make ‘mobile’ your first language.

In today’s world, our phone is our number one companion. We probably spend more time with it than with our family, which has shaped our habits and customs in almost every aspect of our life. This is no different for people with disabilities. The only thing that can change is how they consume content through their phone. They might need assistive technologies like voice input, screen readers, alternative keyboards, etc.

According to a survey, 90% of people who use screen readers use them on mobile devices. This number has only increased over the last 12 years, and we have strong reasons to believe it will continue to do so.

Thinking about mobile responsiveness nowadays is a necessity for all kinds of designs, and accessible products aren't an exception. You might need to be especially thorough regarding the mobile experience of your accessible designs. If you wish to create more accessible products, keep the mobile experience at the top of your priorities.

4. Test, test, test.

I'm starting to feel like a broken record, but here's the thing: our minds can only go so far in some aspects. There's no better way to learn, reinvent, build processes, and break down habits than talking to the people with different disabilities you are designing for. Testing your design with all sorts of users is the only way to ensure you are going the right way.

When it comes to accessibility, you can't just check accessibility documentation and checklists and call it a day. You will need a solid plan to test your design and be ready to make the appropriate changes during the software development.

Depending on the software you use to design, you can use many automated testing tools and plugins to help you maximize your chances for success. For example, Figma's Stark plugin includes integrated accessibility tools to help you stay on the right track.

However, make the time in the design process to test your interfaces, features, and content with multiple users before it's too late in the design process to turn things back around. Testing is significant for mobile formats. Many assistive technologies are out there, and your design must be compatible with them to ensure a pleasant user experience.

Finally, don't forget to create appropriate documentation in the design system, which can help you stay consistent with the accessibility strategy during the next releases and product redesign.

Best practices for integrating accessibility into digital products

Building and designing inclusive and accessible products and websites is not something you do once. It’s an ongoing transformation that moves as fast as emerging technologies, so it’s best to keep up. We, as innovators, need to embrace accessibility-first design thinking as our autopilot mode. However, making the change of gear is the hardest part. To help you take your first baby steps into this one-way journey, here are five things you can implement today to make your products more accessible:

• Use clear and simple language: Let's face it – we all get bored reading long blocks of text, and we always end up scanning them. Let's keep things real between us. This is why writing in plain language makes content easier to understand for everyone, not just people with disabilities. Avoid using technical jargon or complicated sentence structures. Keep things simple and clear.
• Use meaningful and descriptive link text: If you invite the reader to jump onto another page right in the middle of your text, provide a clear and concise description of the destination page. Avoid using generic link text such as "click here." Instead, tell the reader where you're taking them. For example, 'read this article about how web design is changing in 2023.'
• Create clear navigation: One tip to help you clearly structure your content and site is to picture a thread that runs through the web page. Mentally follow this thread from top to bottom to ensure you guide the user in a way that makes sense and is easy to follow. Headings help users navigate through content and understand the hierarchy of information (we are scanners, remember?). Use headings to break up content into sections and ensure they are organized consistently. Use clear call-to-actions and ensure your user knows where to go next.
• Provide text alternatives for non-text content: Visual content, like images and videos, should have text alternatives that describe the content and its purpose. This helps users with visual impairments understand the content better.
• Use color contrast: Ensure the contrast between text and background colors is sufficient to ensure readability for users with low vision or color blindness.
• Consider input modalities: Keep different input modalities in mind when testing the product. Apart from a keyboard, modalities can include touchscreens, voice input, eye tracking, motion or accelerometer, and more.
• Test with assistive technologies: Testing your designs and products with users that operate assistive technologies will help you visualize a whole new aspect of your design. It can help you understand the design, content, and structure-related faults. Assistive Technology testing is an excellent practice that will put your design process in a new light.

Final thoughts

Building an accessibility-first approach is about considering a more inclusive design process and embedding a plan to ensure your designs remain accessible over time. It's about creating a culture around empathy and inclusivity that signifies a big part of the conversation in every new project instead of being a simple afterthought.

In today's world, accessibility should be taught in schools, discussed in companies, and practiced in regular daily tasks.

By following accessibility guidelines, opening new interesting conversations with your team, and involving the right users in your testing, you can take the first steps to make the digital world a better place for people who deserve to be included. When products are designed for accessibility, they benefit not only your users with disabilities. Your additional motivation can also be that they positively impact your organization's image and improve your product's overall UX.

If you need help to make your websites accessible or use your products to create a positive change, contact Dodonut digital agency.