Design That Benefits Everyone: Top 5 Inclusive Design Examples

Natalia Borysko

Have you ever thought how many people left your website or app just because they couldn’t use it? Probably, they were unable to read the small-sized text, got puzzled with a complex site structure, or didn’t notice a low-contrast CTA button. The fact is something frustrated your potential customers so that they decided to go elsewhere, taking your future revenue with them.

The World Health Organization states that about 15% of the world’s population lives with some form of disability. Designing for accessibility and inclusion, you give more people chances to interact with your product and get a positive experience.

In this article, I want to not only show you the design examples so that you can make something similar. My purpose is to give you a holistic idea of the inclusive design concept and why it can create win-win business-customer relationships.

Inclusive design vs. accessibility

The inclusive design aims to satisfy the needs of the broad audience. It considers human diversity and focuses on creating multiple ways for each and every person to have a feeling of belonging. The inclusive design goes further than accessibility that cares of people with permanent or temporary disabilities.

Microsoft, supporting the global inclusivity trend, states on a corporate website: “Inclusive Design is a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.”

I believe you've also heard about universal design. So are the universal and inclusive design the same?

Comparing universal design vs. inclusive design, there will be a distinct difference in their key purpose. Whereas the universal design aims to create one way as many people as possible can use, the inclusive design develops various solutions suitable for those being usually excluded. An example of the inclusive design would be accessibility widgets on websites or custom responses on gender-related questions in typical data collection forms.

Why is inclusive design important?

If we omit the global value of inclusivity and consider it from a business perspective, the answer is pretty straightforward. The more people you reach, the more you increase your market share and pool of potential customers.

The inclusive design serves as a strong base for beneficial business-customer relationships and adds one more point to your company’s social responsibility score. Also, being down to earth, making your website accessible can merely protect you against lawsuits. If many people can’t access your product, they can blame you for discrimination—this problem you likely want to avoid.

While the inclusive design is a mindset, accessibility remains its core objective. It’s never too late to make your website and products more accessible to ensure better business results.

What does it mean for a website to be “accessible”?

As I mentioned above, accessibility is one of the main goals of inclusive design. Every page on your website should be easy to understand, use, and navigate for all users, including those with permanent or temporary disabilities, either physical or mental. Disabilities that complicate or make it impossible using the web include visual, auditory, cognitive, neurological, and speech impairments. 

However, improved accessibility also benefits people with age-related disabilities who have poor sight and weak memory or those with situational limitations like a broken leg, lost glasses, too bright sunlight, etc.

Web accessibility is regulated by guidelines that cover recommendations for making digital products more usable for people with special needs.

ADA compliance and WCAG guidelines

ADA stands for Americans with Disabilities Act and communicates a prohibition of discrimination on a disability basis. The ADA principles underlie Web Content Accessibility Guidelines (WCAG).

The Web Content Accessibility Guidelines require a website to be:

Perceivable: if a person can’t see, they can read written content by a screen reader. Audio content has captions for those who can’t hear

Operable: if a user is unable to use a mouse or touchpad, they can navigate by keyboard or voice commands

Understandable: if people click on a navigation menu or a form, it behaves in an expected way

Robust: the website or product is compatible with current assistive technology and has the capacity to extend to its future versions

And now we’re getting closer to the design itself.

Inclusive design principles and how brands adhere them

If to translate accessibility guidelines into the design language, they would be saying the following:

  • Use distinct colors and good contrast
  • Write in simple language and use bullet points
  • Create the logical, easy-to-follow layout
  • Break content with images and videos
  • Design large buttons and make them distinctive
  • Use readable font size and ensure text magnification
  • Describe links comprehensibly
  • Enable keyboard navigation
  • Provide subtitles for video and transcripts for audio
  • Add descriptive alt tags to images

This list doesn’t pretend to be extensive, including all the requirements of inclusive graphic design. I outlined those that would be great to focus on when working on your website accessibility improvement.

Let’s see how big and not that big brands build the inclusive UX design and learn what we can implement on our end.

Intercom Messenger

intercome messanger page design

Intercom Messenger is accessible and fully complies with WCAG 2.0 guidelines.

The features that make the Messenger accessible are:

  • Screen reader support
  • Keyboard navigation
  • Color contrast

Also, Intercom Messenger provides a possibility to include descriptions of images and captions of videos you share.

The company’s website has a clear and easy-to-follow structure. Text blocks alternate with images and make it easy to percept the information.

Zendesk

zendesk help page design

Though Zendesk is not fully WCAG compliant yet, they follow WCAG 2.0 guidelines to provide their customers the best possible experience.

Zendesk products include these accessibility features:

  • Clear navigation, page titles, and headings
  • Keyboard shortcuts
  • Image tagging and text alternatives
  • Comprehensive links
  • Color recognition

Here you can find the full features list for your reference.

Salesforce

salesforce main page design

Salesforce products meet WCAG 2.1 guidelines. They are accessible to all people, including those working with assistive devices such as speech recognition software and screen readers.

Depending on the product, the design features include but not limited to:

  • Meaningful page titles
  • Logical page layout
  • Text magnification up to 150%
  • Captions for videos
  • Screen readers
  • Keyboard navigation
  • Images alternative text
  • Color contrast

Userway

userway main page design

Userway is the world-leading provider of an automated website accessibility solution that can work on different platforms. Userway’s accessibility widget can easily activate multiple features that make the website design inclusivity-friendly.

The widget switches on:

  • Keyboard navigation
  • Screen reader
  • Text magnification
  • Special dyslexia font
  • Dark and light modes
  • Invert colors
  • Color desaturation

Also, it can show the page structure, highlight links, and pause animations.

Headspace

headspace main page design

Headspace's website also has a customizable widget, giving a possibility to activate necessary features upon a particular user’s needs.

The widget provides this kind of adjustments:

  • Navigation – screen and text reader, keyboard navigation, voice commands
  • Color – background change, dark and bright high-contrasts, monochrome
  • Content – text magnifier, image descriptions, readable fonts

Apart from the widget, the Headspace website design has a clear layout, good color contrast, large buttons, and self-explanatory links.

A final word

The importance of inclusivity and web accessibility continues to grow. 

Based on inclusive design principles, your digital products will provide a seamless user experience to all users, no matter whether they have a temporary or permanent disability.

Also, inclusive design implementation will make your website usable to a broader audience and attract more potential customers to your business.

Contact us at Eleken if you want to develop an inclusive design for your product. We specialize in creating a user-centered design for SaaS and always ready for new challenging projects.


Read more about SaaS design