How to: An accessible product for all user groups

X in American Sign Language
X in American Sign Language by Xurxe Toivo García on Dribbble

Hello, designer! In the modern digital world, inclusive UX design is becoming increasingly important. Its value lies in the fact that it ensures the accessibility of your product for various categories of users, including those with limited capabilities. In this article, we will explore the principles, techniques, and tools that will help you create such a design. Ready to take on this challenge? ;)

The Significance of Inclusive UX Design

Inclusive UX design is crucial in creating products that will be accessible to all users, regardless of their physical or cognitive abilities. Let's delve deeper into why inclusive UX design is so important, and look at examples of companies that are successfully implementing its principles.

Accessibility for all users

Such a design ensures the accessibility of your product to various categories of users, including those with physical limitations: the blind or visually impaired, those with hearing impairments or cognitive disabilities.

For example, Apple focuses on creating accessible products that have built-in features for people with limited capabilities. Their VoiceOver allows blind and visually impaired users to access content on Apple devices via audio playback.

Expanding the audience and enhancing competitiveness

Inclusive UX design enables you to attract more users to your product, including those who were previously excluded due to limited abilities. This opens up new opportunities for your business growth.

For instance, Airbnb provides accessibility filters that allow users to find accommodation that fits their needs, considering special features for individuals with enhanced needs.

Improved user experience

It enhances the overall user experience by providing a comfortable and enjoyable interaction with the product for all users.

For example, Google Maps offers the ability to customize routes considering additional features for users with visual or physical limitations. This allows them to conveniently navigate and receive necessary directions.

Inclusivity in the design of apps and other interfaces matters both for users and for business. It ensures the product's accessibility for everyone, broadens the audience, and improves the overall user impression. By joining this movement, we can make the world a bit better. Remember, design changes the world ;)


Key Principles of Inclusive UX Design

These principles will help you create a product that is accessible and useful to all users regardless of their abilities. Let's examine these principles in more detail, and also look at the tools that can be used to check compliance with these principles, including with WCAG (Web Content Accessibility Guidelines).

Perceptibility

Perceptibility refers to the way users perceive and understand information. To create a perceptibly accessible design, use the following principles:

  • Color contrast: At a minimum, there should be sufficient contrast between text and background to ensure readability for people with impaired vision. You can use tools like Contrast Checker to check the contrast of your design.
  • Alternative text: Add alternative text to images so that people with visual impairments can get information about the image. Use the alt attribute in HTML for this purpose.
  • Sound signals (and similarly tactile): Use audio signals or notifications to provide important information to those who cannot read or see. Ensure the ability to control the volume of sound elements.

Operability

Operability refers to the ways users interact with the product. To create accessible control, use the following principles:

  • Keyboard navigation: Ensure the ability to navigate and interact with the product using the keyboard. This allows people with physical limitations, who cannot use a mouse, to comfortably use the product.
  • Time constraints: Do not set overly short time frames for task completion, as this may be a problem for people with limited abilities.

Understandability

Understandability pertains to the clarity and simplicity, the unambiguity of the information users receive. To create an "understandable" design, use the following principles:

  • Language and communication: Use simple and clear language in the interface, avoid complex terms or phrases. Develop understandable instructions and messages for users.
  • Structure and organization: Organize content and information logically and clearly. Use headings, lists, and other elements to structure information. This should also provide a certain contrast.

These principles of inclusive UX design are the foundation for creating an accessible and user-friendly product. However, alongside the basic principles, there are tools that can be used to check compliance with these principles, including with Web Content Accessibility Guidelines.

  1. Lighthouse: This is a tool that is included in the Google Chrome web browser. It provides automatic accessibility checking of your web page and gives recommendations for fixing issues.
  2. Axe: This is a browser extension that helps detect and fix accessibility issues on web pages. It provides a detailed report with recommendations for fixing issues.
  3. VoiceOver (for macOS) and NVDA (NonVisual Desktop Access): These tools simulate the situation for people with visual impairments. They allow you to check how your product will look and function for blind or visually impaired users.
  4. Accessibility Insights: This is a set of tools that helps detect and fix accessibility issues on various platforms, including web, Windows, and Android.

The level relative to WCAG is determined by four categories: A (minimum), AA (medium), AAA (advanced) and AAA+ (highest). It is recommended to adhere to at least level AA to ensure a basic level of accessibility. However, higher levels allow for an improved user experience for a wider audience.

Dancing On The Ceiling
Dancing On The Ceiling by MUTI on Dribbble

Inclusive Design in Practice

To better understand and apply inclusive design in practical projects, let's consider some notable examples that demonstrate the purpose and results of implementing inclusive UX design. Studying these examples will enable us to understand how design can enhance user interaction and satisfaction.

Kickstarter - Accessibility for all users

Kickstarter, a platform for funding projects, has highlighted the importance of inclusive design. They have developed an implementation of video subtitles for their projects, allowing people with hearing impairments to get information about the project. This approach improves the accessibility and understanding of video content, ensuring a broader audience and more opportunities for participation.

  • Why: Implementing video subtitles enhances the accessibility of video content for people with hearing impairments, expanding the audience to include participants with increased hearing needs.
  • Result: Users with hearing impairments can fully perceive and understand the content of video projects on the Kickstarter platform, leading to greater participation of these users in the project.

Trello - Flexibility and personalization

Trello, a popular project management tool, applies the principles of inclusive UX design, providing flexibility and personalization in interaction. For example, they allow users to change the background color and text of cards to better suit their personal needs and ensure better readability. In addition, users can drag and rearrange cards using the keyboard, making the platform accessible to people with physical impairments.

  • Why: The flexibility and personalization of the interface allow users to adapt the platform to their needs, ensuring greater comfort and satisfaction in interaction.
  • Result: Users can customize the Trello interface to suit their requirements and ease of use, leading to more effective management of the interface and satisfaction of special user needs.

Duolingo - A platform for learning foreign languages

Duolingo, a popular app, demonstrates inclusive design by considering different learning styles of users. They offer the option of audio, visual, or combined learning modes. This allows users with different preferences and learning styles to effectively assimilate languages.

  • Why: Considering different learning styles provides more effective language acquisition and increases user motivation.
  • Result: Users can choose the learning mode that is most comfortable for them, leading to better language absorption and greater satisfaction with the service overall.

These simple examples show how large companies focus on different user groups. Some take more apparent actions, such as interactive adjustments of basic visual parameters, while others might use color schemes from your OS. The main idea and goal is to remember that such actions, inclusiveness, bring not only general but also commercial benefits, which directly affect the success and scalability of the product.


Sets of rules for inclusive UX design

To work with a concept like "accessibility", there are sets of rules and recommendations that will help you in this process. One of the most famous sets of rules is WCAG (Web Content Accessibility Guidelines), developed by the W3C consortium (World Wide Web Consortium). Let's look at this set of rules and some other equally important guidelines.

WCAG (Web Content Accessibility Guidelines)

WCAG provides standards and guidelines regarding the accessibility of web content. This set of rules has three levels of compliance: A, AA, and AAA, defining levels of accessibility. Some of the main principles of WCAG include:

  • Accessibility for all users: Providing access to web content for people with various types of limitations.
  • Perceptibility: Ensuring that web content is accessible for different types of perception, including visual, auditory, and tactile perception.
  • Manageability: Providing convenient ways to navigate and interact with web content, including keyboard, voice control, and other interfaces.

ARIA (Accessible Rich Internet Applications)

ARIA is a set of attributes and rules that help extend the accessibility of web applications and interactive elements. Using ARIA ensures proper perception and interaction with web elements by people with disabilities.

Design for All (DfA)

Design for All is a design concept aimed at creating products that are useful and accessible to all users, regardless of their characteristics. This means that the design should be flexible, personalized, and adapted to the different needs and capabilities of users.

Mobile Accessibility

Mobile accessibility is specific guidelines and practices related to the accessibility of websites and applications on mobile devices. It takes into account factors such as screen size, interaction modes, gesture usage, etc., to ensure convenience and accessibility for users.

Sets of rules like WCAG, ARIA, Design for All, and Mobile Accessibility provide designers with guidelines and recommendations for developing accessible products. Some of these "guidelines" sound quite similar, however, as always, "the devil is in the details" - pay attention to the context of use recommended in each set.

By using these rules in your practice, you will be able to create products that are accessible and useful to all user groups with minimal exceptions.

Peaple having fun
Peaple having fun! 4/25 by Ana Luiza Batista on Dribbble

In this article, we looked at the importance of inclusivity in UX design, its significance in creating accessible products for all users. We focused on the concept of "inclusivity", understanding it as ensuring accessibility for various user groups, regardless of ethnic and cultural values.

Inclusive UX design is not only "morally right", but also has practical advantages. It expands the product's audience, enhances user experiences, and increases your brand's competitiveness. Applying core principles such as "accessibility for all users", flexibility, and personalization, helps ensure a positive experience for everyone.

To achieve inclusive UX design, we examined sets of rules that help ensure product accessibility. WCAG, ARIA, Design for All, and Mobile Accessibility are just a few of them. Using these sets of rules in your design work will allow you to consider the audience and their abilities much more broadly.

May your work help build a more inclusive and accessible world for all!


As always, I would appreciate constructive criticism, and don’t forget about my Twitter and Medium :)

Subscribe to Hey Frost! UX/I Дизайн & Блог

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe