Skip to main

Everything You Need to Know About Building Accessible Apps

by Piotr Schmidtke

Everything You Need to Know About Building Accessible Apps

Accessibility has become a popular topic in tech during the past few years. With the world becoming more socially aware, a lot of focus is put on making digital products in a way that anyone can use and enjoy them, regardless of circumstances. 

But building accessible apps is a bit more complicated than it might seem, and there are various things to consider in the process.

In this article, we’ll cover:

  • The definitions of accessibility, inclusivity, and other related terms.

  • The WCAG requirements.

  • The process of building accessible apps.

  • General tips for ensuring accessibility and inclusivity of digital products. 

Let’s dive in!

Copy link
What is accessibility?

The definition of accessibility is fairly simple: it is a quality that allows everyone, including people with disabilities to fully use the product and achieve their goals without interruption. 

But in order to fully comprehend the term, we need to examine it closer, starting with the word ‘disability’ itself.

The most vital thing to understand here is that accessibility isn’t only about people with permanent disabilities. Each and every one of us could find ourselves in a specific situation where we would benefit from an app’s accessibility features.

This is why in order to fully grasp the concept of accessibility, we need to redefine the way we think about disability itself

There are three types of disabilities that people struggle with:

types of disabilities
  • Permanent disabilities – as the name suggests, those are disabilities that a given person struggles with constantly. It doesn’t matter how severe the disability itself is – it could be a simple thing, such as the need to wear corrective glasses. 

  • Temporary disabilities – those are illnesses or injuries that affect the person for some period of time, like, for example, a broken arm. 

  • Situational disabilities – occur when a person finds themselves in specific circumstances. For example, if a parent is holding their child, then they only have one free hand to perform their tasks. 

Having those definitions in mind, it’s important to remember that all scenarios related to varying kinds of disabilities need to be accounted for when making an accessible app. To better understand that topic, you can take a look at Microsoft’s Inclusive Toolkit.

Creating an inclusive environment

Inclusivity comes as a different aspect of building apps that are accessible to a variety of people. It has little to do with the technical side of the app, but a lot with how it feels to use it. 

In that regard, inclusivity means creating a digital product in a way that won’t make people feel uncomfortable or discriminated against when they use it. In terms of inclusivity within the app, we’re mostly talking about the choices available, copy, and images.

As an example, when an app uses language that suggests a user’s gender, requires them to answer sensitive questions without explaining why, or provides limited options to answer – these kinds of situations can generate stress and make a person feel excluded from using the product.

Simply put, we need to be mindful of all the different people that might use our app, and not just the default majority. 

Copy link
How to build an accessible app? 

Having the most important definitions out of the way, let’s now examine the basic principles of building accessible apps. 

Here, we’re going to talk about the WCAG rulebook for accessibility, and what exactly should be taken into account when designing accessible products. 

The WCAG requirements

There aren’t any arbitrarily imposed rules that one must follow when it comes to app accessibility. That said, most teams follow The Web Content Accessibility Guidelines (WCAG) – a set of rules developed by the Web Accessibility Initiative, which gives guidelines on the topic of accessibility for websites and apps. 

The WCAG defines its 4 main principles for accessibility. According to the guidelines, the digital products should be: 

  • Perceivable – the components and information must be presented in a way that the users can perceive with their senses. 

  • Operable – the users have to be able to navigate the user interface; if an action is required, then a user must be able to complete it. 

  • Understandable – the user interface as well as the information in the app must be understandable to the users. 

  • Robust – the content should be constructed in such a way that it’s possible for various user agents (such as assistive technologies) to interpret it. No matter how those technologies evolve, the user should still be able to access the interface. 

WCAG principles - perceivable, operable, understandable, robust.

The current WCAG version is 2.1, which was updated to include guidelines for mobile devices and apps, while version 2.2 is supposed to come out in 2023. 

The WCAG criteria have three levels: A (minimum level), AA (mid-range), and AAA (most restrictive). Each level builds upon the criteria of the previous one – that means that if you strive to meet the AAA level criteria, you’ll need to conform to all the A, AA, and AAA requirements. 

The process 

Contrary to what many may believe, making an app accessible doesn’t fall on the designers only. It’s not just the visuals that play an important part, the technical aspects are crucial as well. 

Accessibility is, therefore, a team effort from start to finish, and there are essentially 3 layers of building an accessible app

  • The UX layer

  • The UI layer

  • The code layer

Let’s take a closer look at each one of them.

UX

ux icon

In terms of accessibility, the UX concerns itself with things like the menu structure, navigation, and various user interactions within the app.

It’s very important to maintain an interface that’s not too crowded, and keep some distance between interactive elements. It’s a common misconception that any available space in the app or website needs to be filled; empty space, or whitespace, is what makes it possible for the element to stand out and be easier to interact with. 

Discoverability is also another factor to keep in mind here. That means ensuring that the features and controls are easy to find and interact with.

UI

ui icon

The UI part deals with the visual aspects of the app: the sizes of elements, colors used, and the contrast between them. 

For example, you need to make sure that the interactive elements like buttons and icons are at least 1x1 cm (or 48px) large; while the icon itself can be smaller, the interactive area surrounding it must be of the size mentioned.

This makes it easier to select a given element and not accidentally tap a different one. The smallest font size on mobile should be kept at 12px for the sake of readability, and fonts utilizing very thin lines should also be avoided. 

When it comes to contrasts, the WCAG requirements for the AA level are:

  • 4.5:1 for normal text

  • 3:1 for large text

  • 3:1 for graphics and user interface components

When mentioning contrasts, we must remember that color cannot be the only thing used to convey information. A good example of this is designing an error message, where only changing the text’s color wouldn’t make it stand out enough, especially for colorblind people. By adding a small icon alongside the text, you make sure that the message stands out. 

Code

code icon

This is the least obvious aspect of building accessible apps, but probably the most important one. The code needs to be written in a certain way to allow people using screen readers and other assistive technologies to interact with the app properly. 

When it comes down to it, the code can literally make or break the app’s accessibility. 

This is because when a person uses assistive technologies to navigate the app, all the elements need to be recognized properly. 

If, for example, there is a checkbox in the app, you need to make sure that a person using a screen reader will know what that checkbox is related to, and that’s all hidden within the code. Things like the use of proper labels, descriptions, and avoiding generic names for elements are all very crucial parts of developing an accessible app. 

Copy link
Additional tips for ensuring accessibility

Make accessibility a priority from the get-go 

One crucial thing to remember is that accessibility needs to be a part of the process from the very beginning. You can’t just add it after the fact – that would basically require rewriting the entire app. 

That means starting with designing clean, legible interfaces, as well as maintaining proper contrast ratios and element sizes. Then, when you move to the development phase, the developers need to make sure to follow good coding practices and implement solutions that meet the accessibility requirements.

It’s really a team effort from the very beginning and one that you can’t just skip and come back to later.

Don’t rely on pretty designs

Captivating visuals is what any UI designer really strives for. The problem here unfortunately is that some of those designs aren’t accessible at all.

Take neumorphism as an example. It’s a way of designing the entire UI using subtle drop shadows and minimum contrasts, creating an illusion of 3D. 

It’s become quite a trend, and while it looks great as a Dribbble or Behance shot, it’s a nightmare when it comes to accessibility. When you can’t see those drop shadows due to poor vision, or simply because the screen of your device is of a lower quality, the entire interface suddenly becomes nonexistent. 

So while the look of the app is certainly important, it should never come before people’s ability to actually use it. 

Consider performing an accessibility audit

Let’s assume that you’ve built your app, and paid close attention to accessibility in the process. How do you verify whether it actually is accessible? 

The truth is, this is easier said than done. Not only do people with different disabilities interact with the app in different ways, but even people with the same disabilities can have various methods of interacting with it. 

With the number of assistive technologies, setups to operate apps, and the different devices themselves, there aren’t really any default answers when it comes to accessibility. Nevertheless, a useful step to take here would be an accessibility audit. 

This is done by qualified consultants who use checklists to verify various aspects of the app. It is an extra step in the process, but some apps (like medical ones, for example) could definitely benefit from it. 

That said, while consultants and checklists can be helpful, the most valuable method of validating your app’s accessibility is by testing it with the audience itself. Having people with disabilities actually use and give feedback on your app is the best way to check where it is lacking, and how it should be improved. 

Copy link
Summary

Accessibility isn’t something that we can simply ignore anymore. Accessible digital products benefit a much larger number of people than we might initially think, and it’s our responsibility to make our products available to them. 

The push for accessibility is only going to get stronger in the years to come. There are already legal accessibility requirements in place in some countries, and they are about to become even more widespread and restrictive. Since it’s expensive to make a product accessible after it is completed, it’s best to start as soon as possible. 

Last but not least, it’s simply the right thing to do. 

Thinking about creating a digital product that's accessible to a variety of users? Don't hesitate to contact us!


IntroductionArticle

Related Articles