Table of Contents

Back to blog

4 Inspiring Inclusive Design Examples for the Web

Posted March 18, 2024

AudioEye

Posted March 18, 2024

A blue accessibility symbol made out of different shapes, next to a stylized image of an e-commerce website with products for sale.
A blue accessibility symbol made out of different shapes, next to a stylized image of an e-commerce website with products for sale.

Learn about the best practices of inclusive design and get inspired by real-life examples of inclusivity in action.

In 2017, singer Rihanna launched Fenty Beauty with a simple mission: offer makeup for every skin tone, and lean into inclusivity marketing to help every customer feel welcome and valued.

Long story short, it worked. After just 15 months, the makeup brand reported over $570 million in sales — and today is valued at $2.8 billion.

Fenty Beauty’s success is a testament to the importance of inclusive design, online and offline. By prioritizing the needs of as many people as possible, you can create more opportunities to expand your audience and build customer loyalty.

Unfortunately, accessibility and inclusion on the internet is a work in progress. In 2023,  AudioEye scanned more than 2 million web pages across 40,000 enterprise websites to measure the accessibility of the world’s largest brands. Then we worked with members of the disability community to test key pages on the top sites in industries like retail, finance, and travel.

Overall, we found that every page we scanned had at least one accessibility issue — and the average page had 37 elements that failed one of the success criteria for the Web Content Accessibility Guidelines (WCAG), the de facto international standard for digital accessibility.

So, how can organizations deliver accessible, inclusive, compliant experiences for every user? In this guide, we’ll examine the fundamentals of inclusive design, highlight real-life examples of inclusivity on the internet, and share best practices for designing digital experiences that are truly inclusive.

What Is Inclusive Design?

Inclusive design is the practice of creating products and digital experiences that are accessible to as many people as possible, including (but not limited to) the disability community. It requires organizations to consider the diverse needs and experiences of different demographics, including:

  • Women
  • People of color
  • People with non-binary identities
  • People who do not speak English natively
  • People with restricted mobility
  • People with visual impairments
  • People with different cognitive abilities

Unlike universal design, which opts for a one-size-fits-all answer to design, accessible design is all about delivering operable digital products and experiences to a diverse user base.

A common example of inclusive design is Apple’s evolving Emoji library. In 2008, the only hand emojis were representative of white males. In 2015, Apple started to add options for a more diverse population — and has continued adding inclusive options for different physical capabilities, relationships, flags, and more.

What Are Inclusive Design Principles?

According to Microsoft’s Inclusive Design methodology, there are three principles of inclusive design: Recognize exclusion; Learn from diversity, Solve for one, extend to many.

Each of these principles is rooted in the best practices of accessible UX design, which are rooted in flexibility, usability, and equal access.

  1. Recognize Exclusion: We may not realize it, but we all have implicit biases. If we design solutions without recognizing these biases, we run the risk of excluding certain groups of people. One of the most effective ways to reduce the impact of bias (whether you’re trying to hire a diverse team or design accessible user experiences) is by attending unconscious bias training.
  2. Learn from Diversity: Inclusive design is all about solving problems for people of all backgrounds and abilities. Therefore, you should look to solicit insights and feedback from as many people as possible. Try to include people from different age groups, cultures, ability levels, socioeconomic backgrounds, and education levels in your design and development process whenever possible. For example, at AudioEye we work with members of the AudioEye A11iance (a group of people with disabilities) to test customer websites.
  3. Solve for One, Extend to Many: One of the overarching principles of accessible design is that accessibility is good for everyone. For example: When you add captions to a video, you don’t just improve understanding and engagement for people who are Deaf or hard of hearing; you also support non-native speakers or people who are trying to watch that video in a noisy, public environment.

Why Inclusive Design Matters

Hopefully it’s clear by now why inclusive web design is a worthy investment. It’s not just the right thing to do, but an excellent way to expand your audience and ensure that every customer interaction is a positive one.

However, there’s another reason to prioritize inclusion and accessibility. Between 2018 and 2022, the number of web accessibility lawsuits filed in federal court increased between 12 and 14% annually — peaking at a record 3,255 suites in 2022.

4 Inclusive Design Examples

Now that you understand what inclusive design is and why it matters, let’s examine a few examples of inclusive products and digital experiences in action.

1. Slack (Offering a Real Worldview of Their Customers)

Slack is one of the world’s most popular workforce productivity apps. And with an estimated 32.3 million daily active users, it’s important for Slack’s branding to feature people of different ages, ethnicities, and abilities.

In Slack’s externally available brand guidelines, the company notes that “illustrations of people of all ages, shapes and sizes add an element of humanity and show collaboration and teamwork” while also offering a “real worldview of our customers.”

A series of four stylized illustrations depicting different people: the first is a young black woman and an older white man, the second is two people sitting in front of a computer, the third is four people on a video call, and the fourth is a hand holding an envelope with a card showing a web link. Credit to Slack.

2. Fenty (Foundation for All)

As noted above, Fenty Beauty became one of the world’s most successful makeup brands by embracing inclusivity in its product design. In an interview with TIME, founder Rihanna said it was important that “every woman felt included in this brand.”

The company started by offering 40 different shades of foundation and, after conducting user research, added another 10 shades to capture more skin tones.

A line of nine makeup tubes, starting with a dark brown shade on the left and getting progressively lighter until the final tube, which is a light beige. Credit to Fenty.

3. Microsoft (Investing In Accessible Tech)

In 2022, Microsoft announced a new and expanded Inclusive Tech Lab as part of the 12th annual Microsoft Ability Summit. As part of the announcement, the software and hardware giant revealed a new line of adaptive computer accessories designed to give people with physical impairments greater access to technology.

A top-down view of different Microsoft inclusive tech accessories laid on a table, with two people using the different peripherals. Credit to Microsoft.

4. Netflix (Scary Good Captions)

In 2022, Netflix earned rave reviews for the closed captions in season 4 of Stranger Things.

Instead of simply transcribing the dialogue, the show helped set the mood for people with hearing impairments by providing detail into the ambient sounds and background music. For example:

[eerie, unsettling music playing]

[grandiose opera music playing faintly]

[bully 1 scoffs cruelly]

[gate pulsates wetly]

[wet squelch]

If these examples don’t make sense out of context, suffice to say that they helped set the mood — and showed how a little extra effort can go a long way toward creating immersive experiences for all abilities.

A screenshot from Season 4 of Stranger Things, with five of the characters standing inside a house looking past the camera. Credit to Netflix.

Best Practices of Inclusive Design

Ready to start prioritizing accessibility? Here are a few best practices to help you transform your design process:

  1. Hire for Diversity: Accessible design often starts with building an inclusive team. If you hire a diverse group of people — and encourage each person to share their needs, perspectives, and experiences — you’re more likely to design products and digital experiences that work for everyone.
  2. Prioritize Accessibility: Inclusive design isn’t just about accessibility, but it’s a great place to start. Many of the best practices of accessible design overlap with inclusive design — and nondiscrimination laws like the Americans with Disabilities Act (ADA) make it easy to identify issues and track progress.
  3. Design for Flexibility: One of the easiest ways to create inclusive digital experiences is by giving people the tools to adapt websites to their individual user needs. For example: AudioEye’s Visual Toolkit lets users adjust the visual presentation of a website to suit their preferences, with one-click tools to increase font size, adjust contrast, choose dyslexic-friendly fonts, and more.
  4. Test and Iterate: Regularly testing your designs can help you identify any barriers to access — especially if you involve people with diverse abilities and backgrounds. Use their feedback to continually improve the accessibility and inclusivity of your website and/or digital experiences. At AudioEye, we offer a number of solutions to help you, from automated accessibility monitoring to Expert Audits from screen reader users.

AudioEye’s Role in Fostering Inclusive Design

At AudioEye, we offer a number of accessibility features to help you assess and enhance the accessibility of your website, mobile app, and digital documents. Here’s a quick overview of some of the solutions available to you:

Inclusive design is a cornerstone of creating accessible websites that cater to the diverse needs of all users. By following accessibility best practices and embracing a user-centered approach, designers can create digital experiences that are inclusive, equitable, and empowering for everyone.

Want to learn how AudioEye can help you improve the accessibility of your website and digital experiences? Check out our Ultimate Guide to Accessible Design or schedule a demo with one of our accessibility experts.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading