Learn More

Try out the world’s first micro-repo!

Learn More

Flutter App Accessibility

Flutter App Accessibility

Have you ever finished building an app and screamed, “Yesss! I’m finally done with my app and now I can release it, so that everyone will be able to enjoy it!”  Honestly, that happens quite often, right! But wait, not everyone may be able to use your app the way you intended them to!

Here, enter Accessibility (A11y)! The thing that almost everyone ignores, most of the time unaware of it, but it’s as important as anything else in your app. Some of your audience may have some sort of disability that can make it challenging, or sometimes almost impossible to use your beautifully crafted app!

According to the WHO, there are over 1 billion people with disabilities around the world. These disabilities can be related to vision, physical, or can happen due to aging.

An image showing 6 different disabilities with their icon which includes vision problems, hearing loss, congnitive,neurological,mobility,motor impairements.
Different types of disabilities

This makes it challenging for them to carry out their daily-tasks. And perform things that we often take for granted. In our context, it’s about interacting with digital services, apps, games etc.

Solving these accessibility problems should be one of the main goals of your application. Accessibility is about building applications or interfaces that are accessible by everyone and including people with disabilities. Accessibility in your app may also help you broaden the user base. Allow more people to engage with your application, increasing DAU count.

Flutter being a cross-platform framework makes it possible to reach millions of users across the world. And by implementing accessibility options in a friendlier and consistent way, we can make sure that developers as well as users have the same experience no matter which platform they are on.

Flutter’s designed to be accessible out of the box while providing first-class framework support for solving some of the accessibility problems in addition to what the underlying operating system offers.

We’ll see how we can tackle some of these common accessibility problems mentioned below in Flutter and provide a better experience for everyone.

  1. Text Scaling
  2. Contrast
  3. Touch/Tap targets
  4. Semantics

Text Scaling

Gif showing scaling animation of the word A11y.

People who have vision problems due to certain types of vision disability or due to aging may find it difficult to read texts within your apps at the normal size. They often rely on enlarging the text through accessibility options on their devices to make it easier for them to read. And this changing text scale factor is what you need to be aware of and make sure the texts within your app scales properly based on the accessibility settings.

In Flutter, if you’re using a Text widget to display text, then the changing text size calculations are handled by the Text widget itself. It has a textScaleFactor property which is multiplied with the set/default font size to calculate new font size with which the text will be rendered.

This textScaleFactor is obtained from the MediaQuery.of(context).textScaleFactor which represents the TextScaleFactor set by the underlying operating system or user through accessibility options. By default, it’s 1.0 .

For example, if the text scale factor is 1.5, text will be 50% larger than the specified font size.

Note that if you’re using RichText widget, it doesn’t support the scaling of the text automatically. You’ll need to explicitly passed the textScaleFactor from the MediaQuery to the RichText widget’s textScaleFactor parameter.

At the last, always make sure your UI layouts properly when scaling text. If your UI doesn’t look good or is almost useless above a certain factor, then you gotta update your layout properly to adapt to changing scale factor. There’s a very interesting article that discusses this problem. You can check it out later here.

Be aware that limiting text scaling may create problems for some users. So choose carefully!

Note : Contrast is the difference in luminance or colour that makes an object (or its representation in an image or display) distinguishable. — Wikipedia

The contrast ratio (CR) is defined as the ratio of the luminance of the brightest shade to that of the darkest shade that the system is capable of producing. This ratio is within range of 1 to 21 (commonly written as 1:1 to 21:1), where increasing numbers mean higher contrast — Wikipedia

Contrast

Gif showing a text “A11y” is put on a solid black background and its text color goes from different shades of white to reflect the changing contrast.

People suffering from disabilities related to vision may also face issues using your app if there’s not enough contrast between different parts of your app. They’ve issues with reading the text at a low contrast. Even people with proper vision will face this issue if there’s not enough contrast between text and its background.

The W3C recommends the following contrast ratios (CR) depending on the type of situation :

  1. 4.5 : 1 — If text is less than 18 points (24px) if not bold, and less than 14 pt (18px) if bold.
  2. 3:1 — If text is at least 18 pt if not bold and at least 14 pt if bold.

The following image shows you different contrast levels for a text with its background. The example on the left has a CR of 1.96:1 below the accessibility standard, which makes it hard to read for people. The other two have good enough CR to read the text.

Example image showing the same white text on three different backgrounds having different shades of blue going from light to medium to dark shade showcasing how it affects contrast ratio between text and bg.

As Flutter follows Material Design guidelines, most parts of your apps will have good enough contrast between text and their background unless you’ve custom theming added, in which case you need to make sure CR is good for text and different components.

You can use online tools like contrast-checker and contrast-ratio to see if the CR of your colors is good and meets the accessibility standards and update your app accordingly.

Also, some users may prefer having a higher CR than usual. They can turn on this option through the accessibility settings.

Accessibility settings menu on ios

In your app, you can check if this option is toggled or not through the highContrast property of MediaQuery. And based on this, update your bg colors to provide higher contrast.

Save to Pieces

Note: This flag is currently only updated on iOS devices that are running iOS 13 and above.

Tap Targets

GIF of an animated button tap

When you’re developing for mobile or any touch screen interfaces, you need to make sure that the tappable area for a button or any action is large enough so that it can be tapped properly.

People with motor impairment find it difficult to focus or concentrate their muscles on certain areas and would find it challenging to tap the button if the tapping area is too small. Even people with bigger fingers may feel frustrated due to mis-tap as they won’t be able to see the tapping area under the finger while tapping.

Android follows the Material Design guidelines for touch targets which recommends a minimum size of 48x48 dp for buttons, and Apple recommends at least 44x44 pt(src). They also recommend adding spacing of at least 8 dp between interactive components to make them distinguishable from surrounding components and also avoid overlapping of tappable areas.

In Flutter, the minimum touch target size is set to 48px following the Material Design guidelines. Same size is used for ios as well and all other platforms it supports. All buttons and interactive widgets follow these standards for their touch targets.

Semantics

GIF of animations that scans the text “ACCESSIBILITY” and shows an dialog that provides spoken feedback about what the text is.

People who have some form of blindness may access your app through use of screen readers. Screen readers provide spoken feedback so that users can navigate their device without even looking at their screen.

Based on the users gestures or through external controllers like keyboard, they read the semantics of the components which are a description of the component, tell whether it’s tappable or not and if it’s, then dictate the results of those actions and other kind of info that may help user navigate through your app.

On Android, we’ve a screen reader called TalkBack. And on ios, we’ve VoiceOver and similar screen readers are available for other operating systems. One can enable them through accessibility options.

In Flutter, by default most of your widgets have some semantics added to them, and Flutter is smart enough to update those default semantics based on the data you pass to the required parameters of those widgets.

Let’s look at the following example where we navigate through our Flutter counter app with the help of screen reader on android.

Save to Pieces

When the app is first opened with the screen reader, it reads the title in the AppBar and then as we tap along different parts of the app, it gives me feedback on the tapped component.

The default results are fine, but many times the default semantics won’t be able to provide the proper information. In such cases, you can add your own Semantics that suits your needs. Flutter provides us with several accessibility widgets that can help us build more accessible apps.

One of those widgets is Semantics. It allows you to add custom semantics to your widgets by providing you with various options that may tell the description of the widget, its content, whether it’s a button, slider or other action component a user can interact with. Also, you can describe the specific action that’ll take place if you double-tap, long press, or perform any other gestures on the component.

There’s a lot more to semantics than just Semantic widget, like MergeSemantics, ExcludeSemantics, which can be helpful in various scenarios. If you want to learn more about the best practices, ways you can use them, or may be, dig a little deeper into the underlying workings of Semantics in Flutter, which we haven’t covered here, then do check out some of the links to the learning materials I mentioned at the end.

Note to Devs

Having proper accessibility in your apps should never be an optional check. Things we take for granted are difficult to achieve for people with dis-abilities. And making sure they feel included and can enjoy the experience of your apps, games is also your responsibility as a developer.

Most of the time, we as developers don’t even realize that there are people who are missing out on these experiences. And totally neglect these part of users who also would be enjoying your apps and making their live better and more in-dependant only if you’d made them more accessible.

Adding accessibility options does take more time and effort, but it’s something we can’t neglect as many people with disabilities depend on these digital solutions, and as a developer our efforts can help them in a long way. You can always start small by improving things one by one in your apps and gradually making it more accessible.

Summary

We discussed some of the common accessibility problems in apps that you need to be aware of and how you can make your Flutter apps more accessible by adding these options.

There’s more to accessibility than what we discussed. I’ve shared some links at the end, which I think you should definitely give time. They go more in depth on accessibility in general and how accessibility works in Flutter. Being aware of those can only make you a better developer and help make your apps more accessible.

Thanx for reading this article. I really hope you enjoyed it. If you find this helpful then please don’t forget to share it with other fellow devs.

More On Accessibility In Flutter

Use Pieces to Store Your Flutter Snippets

When developing Flutter applications, you may have tons of widgets you save that you want to reuse later, but you just do not have them in a safe place where you can access them. There also may be the scenario where you are combing through Flutter and Dart documentation, and you want to save examples that come in handy when implementing a new feature or figuring out which widget to use for different circumstances.

Pieces helps you save all your useful code snippets efficiently through a desktop application and integrations. Using Pieces, you can save any code snippets from StackOverflow with the click of a button using the chrome extension, have your code autosaved from locally-hosted ML algorithms that recognize your code patterns, auto-classify snippets by language, share code with others using generated links, and more! The Pieces’ suite is continuously being developed, and there’s some groundbreaking stuff that is being put together to share, reuse, and save code snippets.

Try Pieces now using the personal plan for free!

Interested in becoming a Pieces Content Partner?

Learn More

Get our latest blog posts and product updates by signing up for our monthly newsletter! 

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Table of Contents

Flutter

More from Pieces