According to the World Health Organization, approximately 300 million people have vision problems, about 190 million have difficulty moving around independently, and 360 million people around the world are hearing impaired. They have other needs and requirements, which means that UX/UI design agencies should try to make products accessible for them too. Read this post to learn how you can make the UX/UI of your digital products more accommodating for disabled people.

What Does Accessibility of UX/UI Mean?

Accessibility is a term designers most often use to describe whether a particular digital product like a website or mobile application is easy to use for people with disabilities.

Accessible UX/UI design will help the following categories of people who use your product:

  • people with mental disabilities;
  • people with the musculoskeletal system problems;
  • hearing-impaired people;
  • people with visual impairment;
  • people with impaired hearing and vision.

All these conditions set up different limitations, so you can try to implement features that are helpful to all of these categories or just some. In this post, we’re going to discuss ways that will make your application or website more useful for people with impaired vision and older people. 

Use Color and Contrast

Among the 285 million people with visual impairments, many have reduced sensitivity to specific colors and contrast. Design for users who do not distinguish colors or wear corrective glasses is as important as design for those who do not have such restrictions – this is the true spirit of inclusive design.

  • Try to make the details on the page of your site or application screen distinguishable. Each element is equally important, but some are less noticeable and some more so. Any default button should be more visible than a gray tooltip. Please pay more attention to the tooltip so that the user does not miss it.
  • Highlight URLs so that their purpose is obvious. Links that are highlighted in bold or underlined are better perceived by users who have poor vision, or those who do not distinguish colors.
  • Not only color can be in contrast. Large and small elements, filled and empty space, and even Serif and Sans Serif fonts contrast well. Play with them a little when creating a site’s UI.

Follow the Web Content Accessibility Guidelines (Wcag) to Develop Better Interfaces

Sketch (a particular application for UX/UI designers) has a dark and light mode. Dark and light elements situated on the surface is best for people who do not distinguish colors; the light model has a more “clean” look, which allows users to better differentiate between the types of text and other elements of the UI.

Use a Visual Hierarchy

Contrast and color naturally create a visual hierarchy. Remember your favorite sites – surely none of them put all the content in one corner. More likely is that it’s methodically organized according to the hierarchical principle.

Working with the visual hierarchy suggests that designers meaningfully place and connect UI elements in the design of the web page or application screen so that they accurately convey their purpose to the user.

Do not overfill the screens of your applications and site pages with content as this scares the user away. Keep in mind that people with visual impairments may want to enlarge the screen, so make the content scalable and don’t forget about such a powerful tool as responsive typography.

The goal of responsive typography is to give the right emotion while reading and make the text readable. To achieve the first one, the selection of a family of fonts helps, which organically fits into the site or application, and the second – the font size, line height, and width of the text.

Since we are dealing with people with disabilities, we need to focus on readability. Take something standard and time-tested so that users can read the text. The rest is secondary.

Note: The sooner you start working with the color and location of content in the UI of your site or mobile application, the better you will understand how your app will turn out, and then you won’t have to redo it.

Interactive UI Elements

Any user needs feedback. It goes with the principles of collaborative design that take into account the interests of product creators and users. Feedback from users who do not interact with applications in the usual way is especially valuable.

What is apparent to a person who is accustomed to digital technology is far from evident to older people whose mental models about how things work are entirely different. 

Tooltips work well to tell users how to use certain UX elements. Sometimes our design is not so obvious, so hints are a great way to increase accessibility. Looking at a mug, most people will see the holder and understand how to hold the cup, but how to use the social network is not so easy to understand.

Interactive elements are one way to provide the feedback and tips you need to make your design more accessible. All items should have a clear and pre-thought out meaning. If the user needs to use any gesture, you need to inform him about it.

A good example to follow:

The VoiceOver feature in iPhone settings. If it is enabled, then clicking on each interface element in any window, whether it’s a settings screen or one of the apps, is accompanied by a voice prompt. For example, if you click on the clock, the prompt will say “Clock”, the time, and then continue with “Touch twice to open.”

Responsive Web Page Design

Sometimes even a seemingly insignificant, nuance will help to make a site or application accessible. For example, responsive design.

User needs may vary depending on the device they use. If your design can be customized so that the displayed content changes depending on the size of the screen, then users have more options. It means accessibility is improved.

In such situations, responsive design is ideal, which, incidentally, means not only plans for different screens. The design should be sensitive to the user and his needs. A susceptible page composition can scale on screens of different sizes and on different devices.

Adaptive Layout

The UI of your site or application may look and appear accessible, but is it? Until you hear reviews from real people, you can’t know for sure. Do not neglect user testing. In the case of accessible design, it would be perfect to hire people with disabilities to test your model performing various actions. It is how you will understand what functional limitations your product design has and can work with them.

For example, at the prototyping stage, you were sure that you found the ideal place to link to the support screen, but tests on real users showed that it was not easy to find.

If you do not have the opportunity to ask dozens of people with disabilities to work with your product, contact your immediate environment: parents, grandparents, neighbors. It is called the corridor testing method, which is better than nothing.

Conclusion

To draw the attention of an audience with a disability or visual impairment to your site or mobile application you should:

  • highlight significant elements in the text (for example, links) with color, highlighting, underlining, bold;
  • use brightness, contrast, and space effectively to build a logical visual hierarchy between elements;
  • for older users, sometimes it’s not enough to highlight an aspect with color, so take care of the tips and interactivity;
  • although responsive design has been a standard in the development of sites and applications for several years, it will not be out of place to recall its importance;
  • custom testing will show flaws in your design that you have not noticed.

Following these simple tips, you can significantly improve the accessibility of your app. Then, you can work on adapting your digital product to different groups of people with special needs.