How to design apps for visually impaired users or designing apps with accessibility in mind means that people with disabilities will use your app, improving your app’s reach.

In 1999 the first Web Content Accessibility Guide (WCAG) was released. It was an attempt to improve accessibility – making website content available to a wide range of persons, whatever their physical and environmental conditions are, and increasing inclusion.

There is a wealth of accessibility features available for mobile apps on different platforms and devices, but the focus of this article is on features that support visually impaired users.

I will be looking at the three classes of visual impairments and the parts that work for them.

Color Blindness

According to the American Academy of Ophthalmology (AAO), color blindness occurs when you cannot see colors in a usual way. It comes in different degrees – mild and severe. Mild color blindness can be the inability to distinguish colors in low light conditions or any light condition whatsoever.

Designing for this condition means you cannot solely rely on color in your design, and whatever color choices you are making should comply with WCAG Guideline 2.

I recommend the following tools to determine if the color scheme of your design meets the recommended standards of contrast, and users can view with any type/degree of colorblindness.

Coolors.co

Coolors is a web app that helps visual designers generate color schemes for their projects. The beautiful thing about this platform is that you can check the luminance level of colors in your palette of choice and compare them against the different types of color blindness.

Stark

Stark is an accessibility plug-in for Figma, Adobe Xd, and Sketch. It has features that allow you to check contrast levels of two layers and simulate eight colorblind tests for your visual design concepts. It also has a feature that allows you to set the focus order of elements in your design.

Though it is a paid tool, it has a limited free plan.

Designing for the partially & totally blind

A variety of cases are classified under partial blindness – from blurry vision to severe vision loss – but the fundamental issue is the loss of vision, whether mild or severe. In designing products for users with partial or total blindness, you have to take advantage of other senses – touch and hearing.

Though there are advancements in the development of features that take advantage of touch – Braille, haptic feedback, etc. – the most commonly used features take advantage of speech and hearing. I will be discussing the implementation of focus to take advantage of the features screen readers have.

Focus order & screen readers

Focus order and screen readers work hand-in-hand to help users with partial or total blindness understand where they are, where they can go, and what is being displayed on the screen of their devices.

A Screen reader is a two-way communication software that assists users with visual impairment in interacting with digital products. They are equipped with text-to-speech and talk-back features that ensure an effective two-way communication system.

For screen readers to work effectively in your product, you have to implement ‘focus order’ and make use of labels in your product design.

Focus order is the sequence in which users can navigate through or access content in a digital product – website or app. It provides the sequential background a screen reader uses to make sense of components displayed on a screen. Section 2.4.3 of WCAG 2021 offers detailed guidelines for the implementation of the focus order.

You might wonder how screen readers and focus order works for images and other types of media content. The answer to this is the use of Labels and Alternative text (Alt-text).

Some tools you can use to implement these features in your design are Stark (for Figma, Adobe Xd, and Sketch) and Focus Order (for Figma) to implement focus order in your designs.

References & further reading

Making your apps accessible to those with disabilities | App Developer Magazine

Understanding Success Criterion 2.4.3: Focus Order (w3.org)

Web Content Accessibility Guidelines 1.0 (w3.org)

Focus Order (2.4.3 – Level A) | WCAG 2.2 | Wuhcag

Why Mobile App Accessibility Is a Must (and How to Do It Right) | CleverTap

Beyond the Guidelines: Advanced Accessibility Techniques – SitePoint

Conclusion

There are many benefits to designing with accessibility in mind or to design apps for visually impaired users. Considering all types of visual impairments when designing your products can tremendously boost your product’s reach.

The way to go is to develop digital products that accommodate all kinds of users no matter their physical or environmental conditions.

While this article is focused on visually impaired users, it is also essential to consider other conditions of disability – physical, cognitive, and ecological.