Many mobile users have visual, physical or age-related limitations and these can prevent them from seeing or using a touch screen. There are also users with hearing loss, which can leave them unable to hear notifications and other audible alerts. According to the World Health Association, more than a billion people are living with some form of disability; and between 110–190 million are not able to complete their daily tasks because of the challenges they face (source). Technology can have an incredible, positive impact on these people’s lives if designed properly. It can empower those facing these challenges, enabling them to be more productive and independent.

Not all mobile users are going to interact with your application in the same ways. Therefore, it’s important to make sure your application is accessible to everyone. Implementing accessibility correctly can enhance the quality of your application, increase your number of installs and strongly impact how long your users are going to stick with you.

Here, we’re going to take a look at Flutter’s accessibility widgets and how they function.

How do you make a Flutter application accessible?

Flutter has three components that provide accessibility support:

Large Fonts

As some people age their eyes don’t always focus as well as they used to, and many are born with less than perfect vision. They’ll often have problems reading text at the default size many of us have come to take for granted. Because this is such a widespread condition that affects a billion people or more, one of the most important things to check for is that your text scales properly when a user has enabled text scaling in their accessibility options.

In Flutter, text size calculations are handled automatically. The Text widget has a property called textScaleFactor and, put simply, the given font size gets multiplied by the textScaleFactor to determine the font size that is actually rendered on the screen in logical pixels.

So, if you wanted the text to be 150% of it’s normal size then you’d set your textScaleFactor to 1.5 .

One thing to keep in mind is that if you manually set the textScaleFactor, automatic text size calculations from the user’s accessibility settings will be overridden. So, the user’s accessibility settings won’t work anymore. If this causes a large enough problem for the user, then they’re probably just going to uninstall your app.

If you don’t assign any value then this will return either MediaQueryData.textScaleFactor with the related context variable or, if we don’t have a context, it returns 1.0; which will not affect the size of the text.

But making the text scalable is not enough. If you don’t properly anticipate your users enabling larger text when you create your layout, the text might cut off and end up causing the user more problems than if they hadn’t used accessibility at all. This is why it’s important to always double check that your text displays properly at all accessibility settings.

Sufficient Contrast

When implementing an application interface, we should specify background and foreground colors with sufficient color contrast.

A “contrast ratio” is a computation when viewing an interface on devices in extreme lighting conditions. This ratio ranges from 1 to 21 (often written as 1:1 to 21:1), where increasing numbers mean higher contrast. There are many tools available for computing the contrast ratio of two neighboring colors, such as this color contrast ratio calculator.

The W3C recommends:

At least 4.5:1 for small text (below 18 point regular or 14 point bold)

At least 3.0:1 for large text (18 point and above regular or 14 point and above bold)

Screen Readers

Screen readers are essential to enable the visually impaired to use your apps, and just about any other software.

For Android, Google has included a screen reader called TalkBack. With TalkBack, users perform inputs by using gestures (e.g. swiping) or an external keyboard. Each action performed by the user trigger an audible output to let the user know their swipe was successful. It can also read text for the user, who only has to touch a paragraph for TalkBack to begin reading it.

TalkBack can be turned on simply by pushing both volume buttons on the device for 3 seconds. It can also be toggled in the settings.

For iOS, Apple has a screen reader called VoiceOver. With VoiceOver, just like Talkback, users perform inputs with gestures. Like TalkBack, each action results in an audible acknowledgement of the gesture. VoiceOver can be turned on by clicking the home button three times (but you need to add VoiceOver to accessibility shortcuts first), or you can toggle it in settings.

Now that we have a screen reader we can use, let’s see what happens when we run a Flutter app and check it out. Since we get a sample app as soon as we create a new project in Flutter, we don’t need to write our own in order to try out the screen reader. One thing to keep in mind is you need to do this on a real device, an emulator isn’t going to work.

Enable the screen reader on your device and start up the default app. You’ll see the screen reader is working out of the box.

Let’s take a look at how it works.