The case for designing for accessibility, and how to actually practice it

Rachelle Jin
UX Collective
Published in
10 min readDec 10, 2020

--

Illustration depicting people hanging out in a public space.

Hey! đŸ‘‹đŸŒ My name is Rachelle and I’m a current junior at the University of Southern California. As a budding designer, I’m exploring different facets of product design as a way to understand the realm as a whole.

With the current ongoing COVID-19 situation, I wanted to spend my time learning more about accessible design – through my self-initiated learning, I was able to compile a general understanding of the importance of accessible design. Within this hodgepodge of notes, I’ll be walking readers through what it is, why it’s important, and how to implement it in your work.

What is Accessible Design?

“If you do not intentionally, deliberately and proactive include, you will unintentionally exclude.” — Joe Gerstandt

To put it simply: designing for accessibility means being inclusive and aware of the needs of your users. At first glance, it’s obvious this includes your target users, but it’s also necessary to include users outside of your target group — such as often-underrepresented demographics like users with disabilities and users from cultures and countries different from yours. Understanding these various needs is crucial to crafting more accessible, inclusive products for everyone across the board.

Digital accessibility is especially important in regards to a plethora of demographics – POC users, users with disabilities, senior-aged users – because these groups and their specific needs are often overlooked in the technology realm. It becomes more nuanced when individuals belong in multiple intersectional identities: take, for example, a 70-year-old Black woman with motor disabilities.

Venn diagram image of different identity dimensions.
The term ‘intersectionality’ was first coined by KimberlĂ© Crenshaw in 1989 to describe how race, class, gender, and other individual characteristics “intersect” with one another and overlap.

The tech sector is fairly new, yet the products that have spawned from the industry have greatly changed the ways we live our lives. When Silicon Valley was starting off, “disruptive innovation” sought to rapidly break, innovate, and move on to the next big thing. Yet today, more and more individuals within the technology sector are looking to slow down and look inwards to the new challenges that have also presented themselves to designers, engineers, managers, and marketers – one of the most prominent challenges being accessibility within design.

Why is it important?

Inaccessible and unethical design can harm people 😣

Digital experiences that overlook the needs across different demographics, including disabled consumers, can unintentionally exclude and even harm users. User harm comes in various forms. In the context of inaccessible design, demographics can feel societal harm in the form of exclusion, reinforced stereotypes, unequal opportunities, and discrimination.

Imagine a scenario where Marc, a colorblind man, tries to book a doctor's appointment through an app. The app isn’t optimized for colorblind users, so Marc has a hard time reading specific call-to-action buttons and crucial information sections – leaving Marc feeling frustrated and stuck.

Illustration depicts what a scheduling feature may look like to a non-colorblind user vs. what it may look like to a user with vision impairments.
Colorblind individuals like Marc may have a difficult time differentiating between colors like red and green within a digital scheduling calendar.

You’re probably thinking, “I would never want to harm any of my users!” Of course, you wouldn’t intentionally seek to exclude or harm users with your work. Though exclusive design is hardly ever intentional, design decisions will always impose consequences on all types of users – those that are intended to use your product, and those who aren’t in your targeted scope.

Lu Han from Spotify.Design puts it beautifully: “These unethical decisions aren’t usually the result of bad intentions. Rather, it’s a systematic issue that stems from our focus on short-term business goals, like engagement and revenue, often at the expense of user trust and wellbeing.”

Accessible design breaks into huge untapped markets 🔹

It’s a common misconception that spending time to build websites and apps for users with specific needs is too expensive or time-costly since these underrepresented demographics don’t constitute a majority of mainstream technology users.

As the Head of Product Inclusion at Google Annie Jean-Baptiste says, “Their voices may not be those traditionally heard and listened to in the product design process, but theirs are the voices that will define the future of your products, making them richer and better overall.”

Your organization will prosper if diversity, equity, and inclusion are pursued and properly implemented across your products, teams, and business decisions. Though everyone has different needs, people generally want to feel seen and heard through technology. People are naturally more likely to consume products that resonate with their unique backgrounds and fulfill their individual needs. Representation within products may be more elusive than representation in entities like media, yet the most successful products are products that people can personally resonate and interact intuitively with. Product development has a ton of untapped markets:

Graphic depicting untapped global markets and their untapped values in USD.
Product development has a ton of untapped markets — demographics including those who are 65 and older, LGBTQ+, and/or disabled.

One of the reasons why brands like Nike and Coca-Cola are globally-recognized is that these companies focus on rolling out inclusive marketing campaigns. Just take a look at Fenty Beauty. Rihanna’s cosmetic brand launched in 2018 with 40 different foundation colors to accommodate individuals of different complexions – as a result, consumers eagerly purchased her products, deeming her foundation launch a commercial success.

As a marketer, designer, or manager, you have the ability to include and unify your users and customers in a way that makes everyone feel like they belong. Practicing accessible, inclusive design makes people feel heard and accounted for – in return, you miss fewer opportunities as you expand your target audience.

Building accessible products benefits more people than you’d expect đŸ™‡đŸ»â€â™€ïž

Have you ever taken a moment to appreciate the dips in an elevated curbside? These curb cuts were originally designed to make streets more accessible to wheelchair users. Yet, the people who use and benefit from curb cuts extend beyond wheelchair users – stroller-pushers, skateboarders, luggage-carriers can all appreciate the cut in the sidewalk. It’s the same thing for closed captioning, wheelchair ramps, and text-to-speech technology.

Behold, the curb cut — a ramp cut into a street curb to provide access between a sidewalk and the street.
Behold, the curb cut — a ramp cut into a street curb to provide access between a sidewalk and the street.

This phenomenon is called the curb-cut effect. Technology that is designed for disabled people can help everybody – not just the intended user group. In the larger picture, universal design can be utilized to target systemic issues and inequalities. The curb-cut effect is based on the notion of equity, not to be mixed up with equality.

“Equality gives everyone the right to ride on the bus. Equity ensures that there are curb cuts so people in wheelchairs can get to the bus stop and lifts so they can get on the bus, and ensures that there are bus lines where people need them so they can get to wherever they need to go.” – Angela Glover Blackwell

To integrate design accessibility practices in the very products we use every day is to push for equitable opportunities for users of all needs to prosper and reach their full potential. As the technology industry knocks down the walls of exclusion in their products and services, society as a whole can build accessible pathways to success. In the end, everybody gains.

Animated orange gif of differently-aged and abled users.
Pushing for accessibility within your designs will support a more equitable user base and — in the larger picture — society as a whole.

How can I practice accessible design?

At this point, you may be curious as to what specific principles you can apply to your work to support a more inclusive, accessible user experience for your users. As a budding designer, I’ve been able to begin to refine my own work by focusing on specific facets of accessible design. Here I’ll be sharing three broad aspects of design that you should always take into consideration when crafting your designs.

Understand the role of color for different people đŸ‘©đŸŸâ€đŸŽš

Color is one of the most powerful aspects of design. Color evokes feelings, emotions, and ideas, and can wholly shape a brand’s voice and perception. So it’s clear why a designer or marketer would want their work to be seen as intended by their consumers.

There are multiple dimensions to how color can be perceived differently by people around the world. 1 in 12 men and 1 in 200 women experience color blindness, 1 in 30 people are impacted by low vision, and 1 in 188 people are blind. Additionally, it’s important to note that certain colors hold unique meanings in different cultures. For example, in Western societies, purple is associated with magic and royalty. Yet in some European and South Asian cultures, purple is the color of death and mourning.

Color psychology explains the moods that colors can evoke in people — knowing what colors mean to people can shape the meaning of everything from your brand’s voice to your design assets. This image depicts Western interpretations of colors.
Color psychology explains the moods that colors can evoke in people — knowing what colors mean to people can shape the meaning of everything from your brand’s voice to your design assets. This image depicts Western interpretations of colors.

Since colors and their meanings can be misinterpreted due to vision impairments or cultural differences, you should prioritize using non-color identifiers, such as text descriptions or icons. These identifiers can help clarify the intended meaning of your chosen colors.

It’s also good practice to run your hex codes through a color contrast checker. The WebAIM tool is one of my personal favorites – it’ll give you a contrast ratio score and indicate if your hex codes pass the recommended W3C standard for color contrast. Using tools like this will ensure that you’re designing for users who may have difficulties perceiving your colors as you intend.

Be thoughtful with information architecture đŸ—ș

Structural layout is a crucial aspect of design that shapes the way your users view, digest, and interpret information. It’s directly related to the semantics of your design and will ultimately form meaning throughout your work.

As a designer, you may not write the code that builds the layout of your designs. However, you can still contemplate how your design and its information will be structured for the most efficient, accessible digestion. Otherwise, your designs could create inaccessible experiences for readers all across the board.

To design for accessibility, it’s important to recognize information architecture’s role within different screens and digital features. For example, the trend of using placeholder text as labels for forms can be hard to read for many users due to the low color contrast. It can be easy for users to forget what they’re typing, and it’s hard to remember what the fields are asking you to fill out once the label disappears.

Graphic detailing placeholder text practices in forms.
Placeholder text in forms is a common trend in digital design, but as it disappears with text input, it can confuse users as to what the form was asking for.

A more familiar form of information architecture is typography. Heading sizes (h1 to h6) should be utilized appropriately to enable your user to scan the page and get a high-level overview. For large bodies of text, you’d want to use fonts that are friendly to the eyes and easy to read. And lists are a great way to group related items together and allow users to jump from section to section.

Graphic detailing different header sizes and how to utilize them throughout designs.
Utilizing the best typography practices can structure your work well and make your content easily readable.

You should always frame your designs with the necessary structural standards required for an optimal reading experience. Focusing on the overall hierarchy of your designs will ensure that your readers are able to interpret the intended meaning of your content. If you’re not familiar with appropriate layout, it’s great to read up about more best typography and structural layout practices.

Include alternative text for your images and non-text content ✍

Alternative text helps to describe the image for the reader to understand what the image is about. Oftentimes, it’s something that is overlooked by designers and developers, especially on the web. Users with low vision often lean on assistive technology to have content read aloud to them. Tools like screen readers convert text to speech so that people can hear the text within an application or website.

Gif detailing a user reading a caption of an image of a cat.
Alternative text will enable more users to understand your content without necessarily seeing the image or non-text content.

You can present alternative text through two main methods:

  • Through the <alt> attribute of the image element in your code
  • Through the information architecture — usually the surrounding area of the image

Crafting quality, descriptive alt text may not be as easy as it initially seems. Sure, you could settle for a quick one-liner like “Dog in a park” or “Family eating dinner”, but those don’t quite capture the entire picture. On the other hand, it’s very possible to overdo alt text with too much descriptive text. In the end, it’s all about finding that balance between being amply descriptive and concise.

To write good alternative text, you should strive to describe what exactly is happening in the image and how it relates to the story of your brand, website, or article. Context is everything, so it’s important to craft succinct alternative text that can paint a clear mental picture of what your image is conveying.

Tl;dr – Designing for accessibility is a constant learning process 🧠

Design, like many other practices, calls for continuous learning throughout an individual’s career or passion trajectory. Accessible design is something that was pushed to the limelight recently in the design realm, and it’s worth noting that more and more designers are learning about its importance and role.

To become a designer for the people, it’s crucial that we continue to push for accessible design. Not only will you be able to tap into huge untapped markets, but you’ll be able to craft products, campaigns, and content that resonates with people from diverse backgrounds and needs. And when you’re able to do that, you ultimately begin to bridge the gaps that exclude people within everyday products and services.

The UX Collective donates US$1 for each article published on our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

--

--