Accessibility on Flutter
We, as programmers, build apps for everyone, right? That’s what I thought I was doing until a person with visual impairment tried to use my app. That moment made me realise I had to add some new features to it in order for this person to understand and use it correctly.
Flutter makes easy to add accessibility to the different elements of our apps, and, in the last Google I/O they have made even easier to do this with some new features that we are going to implement on this post.
Reading non-text widgets
If the app is reading (normally from top to bottom, and left to right) when TalkBack (Android reader) and VoiceOver (iOS reader) finds a button, image, or any non-text widget, it won’t know what text to read, because those elements haven’t got a text attached, right? How do we solve this problem?
Button:
One of the properties we can use to make a button readable is “tooltip”:
This way, when the accessibility reader finds that element, it will read the text you’ve assigned to that property.
Image, Icon…
For most of the widgets, we do not have a “tooltip” property, but instead we have “semanticLabel”, which has the same purpose:
Other widgets?
What if we have found a specific widget that doesn’t provide a “semanticLabel” property?
Well, for this case we have to do something different. We should wrap the widget with a special widget called “Semantics”. This widget contains a property “label” where we must specify the text to read:
Reading text widgets
If the app is reading a Text, by default it’ll read the exact string of that text, but, what if you have, for example, a text containing “35 km/h”? This will be read like “thirty-five km slash h”. The proper reading should be “thirty-five kilometers per hour”, right?
How do we do this on Flutter? Keep reading…
In Text widget we do not have a “tooltip” or “semanticLabel” property, but instead we have “semanticsLabel” (notice the S):
With this, we’ve covered all the cases you may find with natural language labeling. But, what about the order of reading?
Traversal reading order
Imagine we have the following widget hierarchy:
Just a row with two colums containing Icon and Text. The natural reading order for the accessibility reader is from left to right, and up to down (like you read a book) as we mentioned earlier.
But in this case, it would make more sense to read it as follows:
How can we do this? As we did before with the custom widgets, we must wrap the widget with Semantics( ), wich provides a property “sortKey” to set the order of reading with double values. Here’s an example that also illustrates how to exclude a widget from being read, wrapping it with ExcludeSemantics( ):
If you try out this code, it should be read aloud as we expect.
We have explained the basics, but there are other interesting accessibility features and advices for people with visual impairment. We can’t cover everything in this post, so I encourage you to read a little bit about it:
Thank you for taking the time to read this post and I hope you build beautiful Flutter apps for everyone :)
