Flutter A11Y for Beginners

Flutter Accessibility

If you have been working with Flutter on production Apps I am sure you have gotten into the accessibility dilemma.

Every app should be accessible to everyone at this point in time, so lets cover some of the basics around getting accesibility working for Flutter.

Accessibility is mainly about making your app accessible to people which have certain dificulties to interact normally with the devices and with your app, and hey! we want everyone to be able to use your apps right?

In this part we are going to cover 2 very important things about Accessibility:

• Text sizes
• VoiceOver/TalkBack

Text sizes

Our should be able to adjust to text sizes changes, the users can easily change the font size, so for example if we set a Text widget with a fontSize of 14pts and you dont consider the parent container to increase dynamically you will have cutout texts beacuse the users can change the font size throu the devices settings, this will increase the fontSize by a scale factor given by the device.

Si, in short therms, do not consider Text Widgets to have a fixed height, they can and will possibly do when the end users increase their devices fontSize.

VoiceOver/TalkBack

Most of this functionaly is covered by the operating system and Flutter itself, but I am going to give you a couple of hints that will make your life easier when working with accesibility features:

• Be sure when texts are headings, like the title of a screen, are noted as a header:

Semantics(
  header: true,
  child: Text(
    "Main page",
  ),
),

• Always try to set semanticsLabel to images if they will provide useful information to the user, if they don’t then it would be better if you use excludeFromSemantics property:

Image(
  semanticLabel: "Brief description of the image",
  image: NetworkImage("https://oneurl.com/image1;jpg"),
),
// or the following if you need to exclude the image from the readers
Image(
  excludeFromSemantics: true,
  image: NetworkImage("https://developer76.herokuapp.com/food.jpg"),
),

• Be sure to exlude all those widgets that are just decorative, like containers, decorative texts, using ExludeSemantics widget:

ExcludeSemantics(
  child: Container(
    child: Icon(Icons.add), // this icon is merely decorative and does not imply any functionality or interaction
  ),
),

• Be careful that clickable elements are indicated as clickable, so the accesibility reader can read them as clickable and can give the user a hint that they are meant to be clicked:

Semantics(
  button: true, // this will indicate accesibility readers that the child is a actionable
  child: GestureDetector(
    onTap: () {
      // Do something interesting 
    },
    child: Container(
      child: Text("Click here to do something"),
    ),
  ),
),

If you follow this simple steps, you will have a good foundation to have your app compliant with Accessibility requirements. I will upload another post with more advanced guidelines and procedures to improve accessibility in your app.

Thanks!