How do people with special needs percept your website or app

At least 15% of the population has some form of disability. 110-190 million people face difficulties in their everyday life due to health issues. According to the World Health Organization data, this number is growing each year steadily. Have you ever thought about how a person with some kind of disability visits your site and performs actions?

The design for everyone

Talking about the design that should satisfy special needs, we can’t avoid the wider concept named inclusive design. The categories of users for a special design can intercross and layover one another. Still, its principles find their recognition in our everyday interaction with tech.

Here are the basic principles of Inclusive design:

a user wastes less time observing the loading and interaction process;

availability of different ways of engagement with the product to perform the same action;

the connection is safe and encrypted;

a user understands the reason the company needs his personal data and is sure that it will stay confidential.

All these principles are designed to create a consistent environment for a better user experience. Such a design can be adjusted to the particular needs, situations or preferences of any user. It should bring mental and some kind of physical comfort, regardless of the conditions under which a person is interfering with the product.

Practical recommendations on how to help people with special needs

Numerous organizations try to accommodate people with special needs and give recommendations to developers. One of them is the Web accessibility initiative. We analyzed their recommendations for developers, designers, and copywriters who create web content and wish to share our observations.

It is possible to separate the issues that require special attention to the following categories:

Visual disorders

People who have difficulties with visual perception should receive the information not only in video channels but also with audio, sensitive, and other means. Besides common vocalization of commands and events that happen on the screen, it is possible to use smartwatch or smartphone vibration notification.

All information, buttons, interactive elements, forms should have distinctive borders, clear labels, and be easy to identify. The information and call to actions can be doubled in the body of such an element or around the borders. Regardless of the location, the supplemental description should stay bound to the active element it relates to.

Make all sections distinctive and obvious in the functions they perform.

It is important to use an alternative text for pictures for vocalizers to allow reading of what is shown on the media. The quality of this text is important as well. A senseless combination of words, numbers or letters would not serve well.

Avoid using meaningless names for the pictures you add to your websites.

The headings should be distinctive from the general text body. They can call special attention, though should describe in short the topic of the next box with the information. If the text is given in several columns, it should be understandable from the position of the heading to what column they relate.

When scanning the article people would not see the heading which is messed in the text body.

The text letters should have sufficient color, size, and contrast. The contrast should be tested under different external conditions and on various devices. The sufficient index for a monitor screen in the dark can appear non-visible for a phone on a sunny day. The text letters’ size can be dynamical and change depending on the user’s device. Additionally, it should be intended for voice over.

Always check the contrast rate to ensure that the text is visible on any background.

If to take particular disorders, it is possible to outline deuteranopia and protanopia – the inability to distinguish red and green. It is impossible to convey to a person some additional information through these colors. On the necessity, it is possible to offer an alternative color scheme or descriptive text for a better understanding of auxiliary effects.

Introduce several distinctive elements to show the state (e.g. color AND text message).

Dyslexia also brings some confusion to the creation of inclusive design. From 5 to 20% of children face this disorder, and not each of them gets rid of it in the future. As a result, a person can not read correctly, shuffles letters in the words, can not grasp the information. The application of special typescripts can help to overcome this disorder.

Audio disorders

One of the easiest ways to assist a person with audio disorders to get information is to duplicate it through visual and/or kinesthetic channels. The most common case – the introduction of transcripts and captions for multimedia.

Under some conditions, people without disorders also prefer to check videos without voicing, so letting them do so with captions will bring their loyalty to you.

There is a bunch of various approaches to finger language use. In some cases, if the product should deliver the massive amount of information through the audio channel, the type of finger language, understandable for the target audience, can be applied. Such kind of video can duplicate or entirely replace the multimedia element.

Physical disorders

Various disorders that appear due to physical instability require the attention of designers, as well.

The following situation can not be named as a disorder but a peculiarity of a group of users who prefer to use the left hand instead of the right. Most of the buttons in smartphone applications are located in the bottom right part of the screen. Left-hand orientation should arrange them in the bottom left.

Not a must though can show care about such categories of users as left-handed persons.

For those users who find it difficult to navigate through the application with a mouse, it is possible to introduce the performing of various commands with hotkeys. A simple combination of 2 or 3 keys can help saving time if to compare with the time needed to perform the same actions by using the mouse only.

A similar situation to tabbing is the application of shortcuts.

Speaking about the keyboard, it is needed to mention the focal underlining of the active section. In this case, the button leading further in navigation should be located in the header. It gives the possibility to skip several steps and continue working with the content. The user should precisely understand where on the screen they are located. This is achieved by the means of underlining, making contrast borders or background of the active button current location.

Make navigation easy and available from different sections of the interface.

All elements of a hamburger menu, pop-ups, cards, and other similar elements should have distinctive borders and do not cover each other with any elements. The same goes for the text blocks that have active elements.

If you want to show something important with pop-up, so do not interrupt this information with other.

The possible assistance for persons with tremor is the application of big buttons.

Also, some actions or elements that are basic for the application/website can have their personal button. That will shorten the journey of the user and lead directly to the needed section without numerous steps in the menu.

Let one button take the user to the desired outcome.

Voice controls are the option that excludes any physical interaction with the device. Such technology allows users to pronounce the specific commands for the computer to perform. Some fresher technologies expect the application of artificial intellectual features. Such systems learn how to understand not only direct commands but also support communication functions. They can help in some complicated cases when a person is highly limited in capacity. Voice control function can shorten the interaction of the user and the program, as well.

Elderly people

The other group of people who require special attention while operating application or searching around the web is elderly persons. Their peculiarities include a combination of visual, physical and audio disorders. In some cases, elderly people find it difficult to deal with modern technologies.

First of all, it is necessary to assist such a category of users. They can simply be afraid of using technology. This situation can lead to stressful experiences and harm their health. Apply the simple step by step instructions with visual guides and info tips.

The visual guide can be made with onboarding pictures or timely pop-ups with tips.

While creating interfaces for elderly people, it is better to avoid bright neon colors, complicated architecture, non-distinctive active elements, and forms. Call to actions should have descriptions explaining what will happen if to push the button and where it can lead. Make caution about personal security on the web as such users often suffer from malicious actions.

In some cases, it is better to introduce the common symbols and techniques from real life. For example, make magnifying glass or glasses function to approximate the form or text for better viewing. Elderly people who can use a similar instrument while reading texts in the magazine will quickly understand what this function does.

Make the users know for sure what will happen next if they use the button.

Inexperienced users

Inexperienced users due to some external or internal factors do not know how to deal with modern technologies. They require assistance in navigation through technology.

All fill-in forms should help users with text, provide suggestions or examples inside the form. It is possible to add the description inside the form or near it. Such descriptions that are located outside the form borders should clearly relate to a specific form. It is better when fill-in forms can accept several variants of the requested information. Typically, that situation deals with the introduction of phone numbers or addresses. The user should not guess what format is acceptable and which is not. Especially if the user does not aware of all possibilities.

Let your forms help their users with tips and suggestions.

This category of users values the possibility to ask for help and to be heard. In such a way, a section with the feedback and contact forms should be easy to find.

All navigation should be as clear as possible.

Text links should be meaningful. Links can be introduced by variable means, so it can be difficult to distinguish them in the text body. Any link should bring the description where it leads and for what purpose. The person who is difficult to operate the technology should clearly understand what will happen after their actions.

Use meaningful text links to build trust with people who are going to click them.

General recommendations

The next section underlines the general recommendations on how to create a comfortable interface and become a step closer to inclusive design.

All pictures should have meaningful alternative text. It will help not only for screen reading programs that can read the description for people with visual disorders but also for robots that scan the web page to define its contents. In turn, that will help to strengthen the positions of the website in search.

Try to avoid captcha and similar technologies on the website. It creates difficulties for users, spends in vain their time, and brings negative experience. Prefer using other validation means to confirm if the user is real or not.

All page titles and heading should be meaningful. Titles will help users to arrange the information in blocks and separate what is useful for them. The heading in the text helps to convey meaning and shows the structure. The user can promptly analyze the headings, presume what particular information is in the boxes, and choose the needed section.

The architecture should strive to make the user’s journey as short as possible. The core information/functions or at least links to them should be placed at the main screens. The information should be structured in blocks or sections and have meaningful links.