How to enable accessibility in Flutter with semantics widget
Flutter is a versatile open-source framework for building natively compiled mobile, web, and desktop applications from a single codebase. It empowers developers to create visually appealing and performant applications.
Accessibility features in Flutter are crucial in ensuring these applications are inclusive, allowing individuals with disabilities to interact with and navigate the user interface effectively. These features, including the semantics widget, provide information to assistive technologies, such as screen readers. Such technologies enable users with various disabilities to access and utilize Flutter apps and promote a more equitable and user-friendly digital environment.
Semantics
Flutter provides us with a semantics widget that allows developers to build applications for disabled people. Simply put your widget in a semantics widget and assign a label to it. Whenever the system is over that widget, the assistant will say it out loud for the user to understand the position in the application.
Imagine Alex, a blind individual, using his smartphone to order groceries via a shopping app. With the help of voice assistants like Siri or Google Assistant, he can navigate his phone effortlessly, opening the app and adding items to his cart using voice commands. Semantics play a crucial role in ensuring that the app’s interface is correctly labeled and structured. As he explores the app, his voice assistant reads out clear and concise descriptions, making it easy for him to select products and complete his purchase independently. Semantics, in this context, serve as the bridge that connects Alex to the digital world, empowering him to lead a more convenient and independent life.
Attributes
The semantics widget contains many important features and attributes. Here are some of them:
label: This textual description of the widget serves as fundamental semantic information.container: Determines whether this node creates a distinct semantic entity (SemanticsNode) within the semantic tree. It remains independent and cannot be combined with other higher-level semantics.explicitChildNodes: By default, this is set to false and dictates whether to forcibly display the semantic details of the child widget. Think of it as a way to segregate semantic information.scopesRoute: When not empty, it indicates whether the node corresponds to the root of a subtree. The subtree should declare the route name. Typically used with settingexplicitChildNodesto true, this is particularly useful in navigating between pages, dialogs, bottom sheets, or popup menus within the application.
For more information, you can visit the official documentation.
The showSemanticsDebugger option is a valuable tool in Flutter’s accessibility arsenal, which by default is false or disabled. When enabled, it visually highlights the semantic structure of your app’s UI, helping developers identify and fine-tune accessibility features with ease. This real-time feedback empowers developers to ensure their applications are inclusive and provide a seamless experience for all users, particularly those who rely on assistive technologies.
You can change the option in the playground below to see the changes in real-time.
Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp();
@override
Widget build(BuildContext context) {
return MaterialApp(
showSemanticsDebugger: true,
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: const Text("Semantics"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Semantics(
label: 'Red square',
child: const SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
),
),
),
Semantics(
label: 'Flutter logo',
child: const SizedBox(
width: 100,
height: 100,
child: FlutterLogo(),
),
), // semantics
],
), // column
), //center
), // scaffold
); // material app
}
}
Code explanation:
Line 13: This line enables the semantics debugger using the showSemanticsDebugger tag in the MaterialApp, allowing developers to visually inspect the accessibility information of its user interface while it's running.
Line 23–40: The semantic labels for two UI elements (a red square and the Flutter logo), ensuring that these elements are accessible to users with disabilities by providing a textual description for screen readers and other assistive technologies.
Free Resources