Inclusive Design: Ways to Expand a Product's Audience

Table of Contents:

• How Inclusive Design Became a Trend
• Helping People with Low Vision
• Making Content Easier to Read
• Helping Users Click and Scroll
• Be Mindful of Other Impairments
• Accessibility for All Is Out of Achievement

People with disabilities face various obstacles every day. Not all entrances have ramps, doorways and elevators are often too narrow for wheelchairs, and textured tiles for the visually impaired are extremely rare. These same issues are observed in the digital space: users with limited vision can find it as difficult to order food in an app as to get to a store. It is important to ensure that both the physical and digital environments are accessible to people with disabilities so that they can use all services and products without barriers.

Inclusive design aims to create products that are accessible to all users, regardless of their abilities. Large companies such as Google, Microsoft, and Sber have developed their own digital accessibility guidelines. These guidelines contain rules and best practices that help improve user experience and expand the reach of apps. Adherence to inclusive design principles not only makes products more user-friendly but also increases their competitiveness in the market.

How Inclusive Design Became a Trend

The global audience of people with disabilities is approximately 650 million people, which corresponds to 10% of the world's population. In Russia, there are more than 11 million people with disabilities, which is 8% of the total number of Russians. Many of them face difficulties interacting with illegible text, small buttons, or sound signals. The global standard for web content accessibility (WCAG) was developed in 2008, but the topic of inclusive design did not receive the attention it deserved at the time. As the role of digital services in our lives increases, the issue of their usability for all users is becoming increasingly relevant. Creating accessible content for people with disabilities not only improves their experience with web resources but also contributes to a more equitable and inclusive digital space.

In February 2021, a study of mobile device users was conducted in the Netherlands. The results showed that almost half of respondents actively use customization features when they are available. The most popular settings were increasing the text size and switching to a dark theme, which were used by about 30% of respondents. This demonstrates that users with disabilities represent a significant audience. For businesses, this opens up opportunities to attract new customers and subscribers, highlighting the importance of adapting products and services to the needs of different user groups.

Assistance for People with Low Vision

Contrast plays a key role for people with low vision, as over 2 billion people worldwide experience vision problems. High contrast helps improve information comprehension and makes reading easier. The Web Content Accessibility Guidelines (WCAG) text contrast ratio standard is an important guideline for web developers and designers seeking to make content accessible to all users. Compliance with these standards not only improves usability but also helps create a more inclusive digital space.

The standards for text content specify that logos and illustrations are not required to meet these requirements. However, for important interface elements, such as icons, WCAG recommends a contrast ratio of at least 3:1. This improves readability and information comprehension for users with disabilities. For example, icons that comply with this standard provide sufficient visibility and ease of perception, which is critical to the overall usability of the interface.

Weak contrast makes it difficult to perceive information. It negatively affects the readability of the text and can cause discomfort for the user. It's important to remember that insufficient contrast between the background and text can lead to eye strain and decreased concentration. For optimal visual perception, it's recommended to use brighter, crisper color combinations, which promote better perception and absorption of information.

To ensure that your design meets the WCAG contrast guidelines, use online services like Coolors or WebAIM. There are also plugins for Figma, such as Contrast and Color Contrast Checker, that can help you check the contrast levels in your project. These tools ensure accessibility compliance, which is essential for creating usable and readable content for all users.

Font size is an important design aspect that affects the readability and perception of text. Determining optimal font sizes is difficult, as different fonts can appear differently at the same font size: some letters will appear larger, others smaller. Sber's recommendations state that a minimum font size of 16 pixels should be used for body text. WCAG standards set a minimum line height of 1.5 times the font size. Proper selection of font size and line height helps improve content accessibility and improve user comfort while reading.

If users experience reading difficulties, they can zoom in on the interface using the Ctrl + and Ctrl - keyboard shortcuts, which proportionally increases the font size. To avoid the need for horizontal scrolling, it is important to use responsive layout. This ensures optimal content display across various devices and improves the user experience, allowing everyone to easily interact with information. Responsive design also promotes better page indexing by search engines, which is important for SEO.

The VTB website is displayed at a standard 100% scale. This ensures optimal user experience and ease of navigation within the bank's resources. Proper scaling is an important aspect of web design, as it impacts the accessibility and usability of the site. It is important that the interface elements are clearly visible and easy to perceive, which contributes to a more comfortable interaction of clients with the bank's online services.

When zoomed in to 200%, the site automatically adapts to the "vertical" version for tablets, while remaining This is convenient for users. As a result, this setting eliminates the need for horizontal scrolling, and the font size becomes more legible. This improves user experience and promotes more comfortable interaction with content.

Color has a significant impact on user perception of information, but not everyone can distinguish shades equally. Some people have color vision deficiencies, making it important to use text cues in interfaces. For example, the traditional use of red to indicate errors may be ineffective for people with color blindness. Therefore, in addition to color changes, it is crucial to provide clear text notifications of problems or errors. This will allow all users, regardless of their color perception, to understand exactly what happened and how to deal with it.

Screen readers. For blind people, elements such as contrast, font size, tooltips, and zooming do not provide the necessary assistance. Instead, they use screen readers—specialized programs and applications that read aloud the text displayed on the screen. These technologies provide access to information and help people with visual impairments interact with digital content, making it more accessible and easier to understand. Effective screen reader performance depends not only on the designer but also on the developer. It's important that element types are correctly specified in the code. This allows the screen reader to accurately inform blind and visually impaired users about the location of buttons, labels, and headings on the page. Proper HTML markup helps improve content accessibility and provides a better user experience for people with visual impairments.

For screen readers to work properly, buttons and headings must be informative. This will help users without context better navigate the interface and use its functionality more effectively. Intuitive controls contribute to improved accessibility and ease of interaction with the interface.

Make Content Easier to Read

Decorative fonts and unstructured web pages can create challenges in understanding information, especially for people with sleep deprivation and dyslexia. Optimizing design and simplifying visual elements significantly improves content accessibility. To improve comprehension, it is important to use clear fonts and a logical structure, which will make information more accessible to all users.

For people with dyslexia, the familiar shape of the letters in a font is critical. For example, the letter A, designed as a kitten, is difficult to read, even if the font is generally high-quality. A person without dyslexia may understand such a font immediately, but if they are tired, sleep-deprived, or visiting the site hastily, they will also have difficulty perceiving a decorative font. Therefore, to ensure comfortable reading, it is important to use simple and easy-to-read fonts. This will help not only people with dyslexia but all users, providing a more enjoyable experience when interacting with text on a website.

Google's guidelines emphasize the importance of grouping related elements, a key principle in interface design. When interacting with content, we instinctively break it into meaningful blocks. Positioning the beginning of a sentence in the upper right corner of the screen and its end in the lower left may look appealing, but it makes it difficult to comprehend the text. Proper placement of information helps improve the readability and perception of content, which is an important factor for users and search engines.

Help users click and scroll

People with motor impairments have difficulty using both hands or Precisely pressing small buttons can make it difficult to interact with various devices and technologies, necessitating the development of more accessible interfaces. It's important to consider the needs of these users when creating products to ensure a comfortable and effective experience.

Google and Sber recommend increasing the size of clickable elements and the distance between them to improve user experience. The optimal button size is at least 44x44 pixels, and the minimum distance between buttons should be at least 8 pixels. This will help improve user experience and increase the clickability of elements on the site.

When an element is small, it is important to ensure that it is surrounded by enough white space. This not only improves visual perception, but also helps draw attention to the element itself, making it more noticeable. Increasing indents and white space around small objects helps improve information perception and makes it easier to interact with content. Correct use of emptiness enhances accents and makes the composition more harmonious.

The space around elements should be interactive and clickable. Users often find it difficult to accurately hit a button with their finger or mouse, so the importance of increasing the interaction area becomes obvious. This improves the user experience and makes the interface more accessible for everyone.

When designing a user interface, it is critical to ensure convenient keyboard navigation. This includes not only the ability to scroll, but also the ease of selecting buttons to follow links. For people with motor impairments, using a keyboard can be more comfortable and effective than using a mouse or touchpad. Ensuring interface accessibility for all users is a key aspect in web development, which helps improve the overall user experience.

Be mindful of other impairments

Users may experience complete or partial hearing loss, which does not always prevent them from interacting with websites and applications. Many people choose to mute the sound on their devices. However, in the context of online games and video content, it is necessary to provide subtitles. It's also important to note that if a service's interface uses sound to notify of new messages or successful payments, these events should be additionally visually indicated on the screen. This will ensure accessibility and usability for all user groups.

Active animation can trigger seizures in people with epilepsy. The WCAG accessibility guidelines provide an option to disable animation without affecting the user experience. According to Google's recommendations, content animation should automatically turn off after five seconds, and if flashing is necessary, its frequency should be limited to three frames per second. This will help ensure user safety and make interfaces more accessible for people with epilepsy.

It's impossible to account for every potential disability that could complicate the use of a website or application. However, flashing animations accompanied by sounds and low-contrast text are unlikely to appeal even to those without disabilities. A high-quality interface that is convenient for the majority of users is an important step toward creating an inclusive product. Improving interface accessibility not only increases user satisfaction but also expands the audience, which is an important aspect of modern web design.

Accessibility for all is unattainable

Even adhering to strict WCAG design principles cannot guarantee that the interface will be usable for all users. There are many nuances and complexities that cannot be fully considered. As a result, the interface may become more accessible for some users, but at the same time complicate interaction for others. It's important to continually test and adapt designs to best meet the needs of a diverse audience.

In August 2021, Twitter unveiled a redesign, declaring its commitment to inclusivity. The company improved contrast, alignment, and increased spacing between text blocks. These changes were intended to support visually impaired users. However, many users expressed dissatisfaction. Comments noted that the new Chirp font was too small and difficult to read, especially for people with dyslexia. Furthermore, the increased contrast led to complaints of headaches and migraines in some users. These negative reactions highlight the importance of considering the needs of all users when designing social media interfaces.

Twitter responded to the negative user comments a few days later, but no decision was made to revert to the old design. Instead, the company announced only minor changes for the Windows version. There were no further significant updates from Twitter, and in the fall, users continued to leave comments requesting a return to the previous interface. The font currently looks like this in the interface:

Twitter's redesign has received positive reviews, but it's impossible to please all users. One solution could be to enable interface customization, allowing users to customize fonts, colors, and buttons to suit their preferences. Twitter's example illustrates that excessive inclusivity can have negative consequences. It's important to consider the needs of different user groups, but you shouldn't try to satisfy them all at once. An overly contrasting interface with large buttons and long labels may be inconvenient for most users. Effective design should balance accessibility and usability, ensuring comfortable use for a wide audience.

Inclusive design is an approach that focuses on creating products and services that are accessible to all users, regardless of their abilities or disabilities. This principle recognizes the diversity of human experience and seeks to minimize barriers that may arise when using various technologies and services. The primary goal of inclusive design is to ensure equal opportunities for everyone, including people with disabilities, seniors, and those facing temporary challenges. Inclusive design improves user experience, increases customer satisfaction, and expands the reach of users. It's important to consider the needs of diverse user groups at all stages of development, from research and design to testing and implementation. Thus, inclusive design not only solves accessibility issues, but also creates better and more functional solutions for everyone.

• A blind expert on non-visual interface accessibility talks about the main mistakes designers and developers make
• Why features for people with disabilities are “hidden” in design
• Valeria Kurmak on the designer-developer tandem, communication problems, and inclusive design in Russia