Developing for Accessibility in Flutter

Accessibility is the inclusive practice of ensuring there are no hindrances or barriers to websites, software applications or products that will prevent users from fully interacting with it. Accessibility enables people of all abilities and capabilities to perceive, understand, navigate, interact with, and contribute to the service or software from end to end.

Developing for accessibility is therefore an essential aspect of building inclusive software applications and should be an important consideration for any software developer.

Accessibility is not a barrier to innovation. It will not force you to make a product that is ugly, boring or cluttered. It will only introduce a set of constraints to incorporate as you design and develop your application. These constraints will give you new ideas to explore that will lead to better products for all your users — Jessie Housler, Salesforce designer

Accessibility should also not be an afterthought. Instead, it should be considered as a must have feature right at the beginning of your development.

Key considerations for accessibility in Flutter
Flutter, being a cross-platform framework, provides several accessibility features that can be used to create applications that are accessible to users with disabilities.

Here are some key considerations for developing for accessibility in Flutter:

Use Semantics widget:
The Semantics widget is a powerful Flutter widget that provides information, meaning, descriptions and purpose of widgets to assistive technology. By using Semantics widgets, you can provide context to the users with visual impairments, and they can use screen readers or other assistive technologies to navigate your app more easily. We’ll dive more into the Semantics widget in the next article.

ElevatedButton(
  onPressed: () {},
  child: Text('Submit'),
  // Provide a meaningful semantic label for the purpose of the button
  semanticLabel: 'Click to submit form',
)

Utilise available widget properties:
The Flutter framework has been designed to be accessible out of the box as long as you are able to utilise available widget properties. Look for and use all the available properties in widgets that are related to semantics e.g., semanticLabel or excludeFromSementics.

Image.asset(
  'assets/cats.jpeg',
  excludeFromSementics: true;
)

In the above example, we have an Image widget and we are setting the excludeFromSemantics property to true. In this case, the screen reader will skip this widget since you might only be having it on the UI for just for the visuals but it is not important enough for the application’s use. This is especially useful for widgets which do not contribute meaningful information to an application.

Color contrast:
To make your application accessible to users with low vision or color blindness, it's important to ensure sufficient color contrast. With Flutter’s ThemeData class, you can define a color scheme and apply it consistently throughout your app. Remember to use tools like color contrast checkers to verify that your color choices meet accessibility standards.
According to the Web Content Accessibility Guidelines (WCAG) 2.0, the contrast ratio between text and a text’s background should be at least 4.5:1 except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

These contrast guideline helps users with low vision, color blindness, or worsening vision see and read the text on your screen. E.g. when the text is 24px, 19px bold or larger, the lightest grey text color you can use on a white background is #959595.

Container(
  color: Colors.white,
  child: Text(
    'Hello, World',
    style: TextStyle(
      color: Colors.grey, // #959595
      fontSize: 24.0,
    ),
  ),
)

Tap targets:
Tap targets are the parts of the screen that respond to user input and they extend beyond the visual bounds of an element. For users with motor impairments or other users with large thumbs, it is important to ensure that these tappable widgets/targets are big enough for the user to tap on them.

The Material Design guidelines and Apple Guidelines have these recommendations for minimal tap target size for user comfort. For iOS, 44 x 44 pt is the recommended touch target while for Android target sizes are 48 x 48 dp.

https://m2.material.io/design/usability/accessibility.html#layout-and-typography

Typography:
Support dynamic font scaling to accommodate users who require larger text sizes. Use the MediaQuery class to access the device’s text scale factor and adjust your app’s text sizes accordingly. This is useful for users who intentionally use larger fonts in their phones due to visual challenges related to smaller fonts.

double textScaleFactor = MediaQuery.textScaleFactorOf(context);

...

Text(
  'Hello, World',
  style: TextStyle(
    fontSize: 18.0 * textScaleFactor,
  ),
)

By dynamically adjusting the text size, we’re enhancing the accessibility of our app for users who may have difficulty reading smaller text. Who, in order to improve readability, might need to increase their system font size.

Captions and Transcripts:
Provide captions and transcripts for videos in your applications. When you have captions and transcripts for videos or other audio components in your application, users who are deaf or hard of hearing can still access the content and get the information that the software conveys.

Testing
It is always important to test your application to ensure it is accessible.

Test with assistive technology:
It is essential to test your app with real devices with assistive technology to ensure that it is accessible to users with disabilities. E.g., screen readers and voice assistants. Android and iOS have inbuilt tools to test accessibility. i.e., TalkBack and VoiceOver respectively. Emulators might be a bit limited in this, therefore testing with real devices will ensure the results are accurate.

Unit tests:
Flutter tests include a method called meetsGuideline which helps us to test these accessibility features such as contrast, labels and tap targets.

• Contrast: If your application relies on certain color combinations, write tests to ensure that the contrast between text and background meets accessibility standards set by the WCAG.
• Labels: Test if the widgets are labeled correctly and elaborately so that the screen reader knows what the particular widget does.
• Tap targets: Test if the widgets are big enough for the user to tap on them. This is especially beneficial for users with motor or other physical impairments.

except(
  tester,
  meetsGuildeline('textContrastGuideline'),
)

except(
  tester,
  meetsGuildeline('androidTapTargetGuideline'),
) // Android

except(
  tester,
  meetsGuildeline('iOSTapTargetGuideline'),
) // iOS

except(
  tester,
  meetsGuildeline('labeledTapTargetGuideline'),
) // iOS

Developing for accessibility in Flutter requires paying attention to the unique needs of users with disabilities. By the above techniques, you can create Flutter applications that are inclusive and accessible to everyone.

TL;DR
Watch a summary of this article on my YouTube channel.

Flutter Sync

“I wish for a world that views disability, mental or physical, not as a hindrance but as unique attributes that can be seen as powerful assets if given the right opportunities”― Oliver Sacks

I hope you’ve found this article helpful. Watch out for the next article where we’ll dive deeper into the Semantics widget!

Muchas gracias por leer ❤

References:

Accessibility

Accessibility: 7 Things Every Designer Needs To Know

Web Content Accessibility Guidelines (WCAG) 2.0

Flutter Accessibility: Getting Started