How to make your Flutter app accessible

We came up with the idea of our lives, developed and released our application. We have one problem: With any luck, hundreds, thousands (or millions!) could use the app after publishing it to the app stores. Apps supporting multiple languages and accessibility features can appeal to a broader audience worldwide.

In this talk, I’d like to showcase how we can support multiple important accessibility features including localization, text-to-speech, RTL support, etc. 

Transcript

1. How to make your Flutter app accessible Vogel Csongor Lead Android and Flutter Developer GerfalconVogel gerfalcon
3. Android project
4. iPhone project
5. Flutter project
6. Flutter project Hot Reload
7. Users by Country
8. Users by Country
9. Users by Country
10. Users by Country
11. Users by Country
12. ?
13. Solutions l10n i18n a11y
14. Solutions i18n a11y l10n
15. Built-in solution i18n l10n
16. i18n l10n dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter TODO: 1 - Add flutter_localizations dependency. pubspec.yaml
17. app.dart i18n l10n TODO: 2 - Add delegates and supported locales to the App. MaterialApp( home: const HomePage(), localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ const Locale('en', ''), const Locale('hu', ''), ], );
18. app.dart i18n l10n TODO: 2 - Add delegates and supported locales to the App. MaterialApp( home: const HomePage(), localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ const Locale('en', ''), const Locale('hu', ''), ], ); 78 languages
19. i18n l10n .xml XLIFF files .xcloc .strings .json .ARB
20. i18n l10n .ARB { "@@locale": "en", "homeTitle": "Know your Santa", "@homeTitle": { "description": "Page title.", "context": "HomePage" }, "homeCurrentLanguage": "Current language: {language}", "@homeCurrentLanguage": { "description": "Show the current language on the Home page", "context": "HomePage", "placeholders": { "language": {} } } (...) } app_en.dart
21. i18n l10n .ARB app_hu.dart { "@@locale": "hu", "homeTitle": "Ismerd meg a Mikulásod", "homeAppbarTitle": "Kezdőlap", "homeCurrentLanguage": "Aktuális nyelv: {language}", "homeYourSanta": "A mikulásod", "santaName": "Mikulás", "santaHat": "Kalap", "santaTie": "Nyaktekerészeti mellfekvenc", (...) }
22. i18n l10n dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: ^0.17.0 TODO: 3 - Add intl dependency and specify the generate flag pubspec.yaml
23. i18n l10n dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: ^0.17.0 TODO: 3 - Add intl dependency and specify the generate flag pubspec.yaml flutter: uses-material-design: true generate: true
24. i18n l10n dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: ^0.17.0 TODO: 4 - Create l10n.yaml configuration file in the root package. flutter: uses-material-design: true generate: true arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: l10n.dart output-class: L10n l10n.yaml
25. i18n l10n dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: ^0.17.0 TODO: 4 - Create l10n.yaml configuration file in the root package and start CODE GENERATION. flutter: uses-material-design: true generate: true arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: l10n.dart output-class: L10n l10n.yaml l10n.dart l10n_en.dart l10n_hu.dart
26. app.dart i18n l10n TODO: 5 - Add our generated delegate to the App. MaterialApp( home: const HomePage(), localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ Locale('en'), Locale('hu'), ], ); import 'package:flutter_gen/gen_l10n/l10n.dart';
27. app.dart i18n l10n TODO: 5 - Add our generated delegate to the App. MaterialApp( home: const HomePage(), localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, L10n.delegate, ], supportedLocales: [ Locale('en'), Locale('hu'), ], ); import 'package:flutter_gen/gen_l10n/l10n.dart';
28. home_page.dart i18n l10n TODO: 6 - Use the l10n anywhere in the widget tree. import 'package:flutter_gen/gen_l10n/l10n.dart’; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( /// (...) body: Container( child: Column( children: [ Text( ‘Know your Santa’, textAlign: TextAlign.center, ), /// (...) ], ), ), ); } }
29. import 'package:flutter_gen/gen_l10n/l10n.dart’; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { final l10n = L10n.of(context)!; return Scaffold( /// (...) body: Container( child: Column( children: [ Text( l10n.homeTitle, textAlign: TextAlign.center, ), /// (...) ], ), ), ); } } i18n l10n home_page.dart TODO: 6 - Use the l10n anywhere in the widget tree.
30. import 'package:flutter_gen/gen_l10n/l10n.dart’; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { final l10n = L10n.of(context)!; return Scaffold( /// (...) body: Container( child: Column( children: [ Text( l10n.homeTitle, textAlign: TextAlign.center, ), /// (...) ], ), ), ); } } i18n l10n home_page.dart TODO: 6 - Use the l10n anywhere in the widget tree.
31. import 'package:flutter_gen/gen_l10n/l10n.dart’; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { final l10n = L10n.of(context)!; return Scaffold( /// (...) body: Container( child: Column( children: [ Text( l10n.homeTitle, textAlign: TextAlign.center, ), /// (...) ], ), ), ); } } i18n l10n Text( l10n.homeCurrentLanguage( l10n.localeName, ), ) home_page.dart
32. import 'package:flutter_gen/gen_l10n/l10n.dart’; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { final l10n = L10n.of(context)!; return Scaffold( /// (...) body: Container( child: Column( children: [ Text( l10n.homeTitle, textAlign: TextAlign.center, ), /// (...) ], ), ), ); } } i18n l10n home_page.dart
33. RTL support i18n l10n
34. RTL support i18n l10n
35. RTL support i18n l10n
36. RTL support i18n l10n Positioned( right: 16, top: 32, child: ///(...) ), Padding( padding: EdgeInsets.only(left: 8, right: 16), child: Text(""), ),
37. RTL support i18n l10n Positioned( end: 16, top: 32, child: ///(...) ), Padding( padding: EdgeInsetsDirectional.only(start: 8, end: 16), child: Text(""), ),
38. RTL support i18n l10n Positioned end: 16, top: 32, child: ///(...) ), .directional( textDirection: Directionality.of(context), Padding( padding: EdgeInsetsDirectional.only(start: 8, end: 16), child: Text(""), ),
39. a11y
40. Over 1 billion people are estimated to experience disability. 15% of the world's population
41. Accessibility checklist Large fonts Render text widgets with user- specified font sizes Screen readers Communicate spoken feedback about UI contents Sufficient contrast Render widgets with colors that have sufficient contrast Tappable targets All tappable targets should be at least 48x48 pixels. Color vision deficiency testing. Controls should be usable and legible in colorblind and grayscale modes Context switching Nothing should change the user’s context automatically while typing in information. Generally, the widgets should avoid changing the user’s context without some sort of confirmation action. a11y
42. .ARB a11y Text-to-Speech Talkback VoiceOver NVDA
43. .ARB a11y Text-to-Speech Scaffold( appBar: AppBar( Semantics( label: "This is the appbar of the home page.", textField: true, child: Text(l10n.homeAppbarTitle), ), ),
44. .ARB a11y Text-to-Speech Scaffold( appBar: AppBar( Semantics( label: "This is the appbar of the home page.", textField: true, child: Text(l10n.homeAppbarTitle), ), ),
45. .ARB a11y Text-to-Speech Scaffold( appBar: AppBar( title: Semantics( label: "This is the appbar of the home page.", textField: true, child: Text(l10n.homeAppbarTitle), ), ),
46. .ARB a11y Text-to-Speech Semantics( label: "Home page", child: Scaffold( appBar: AppBar( title: Semantics( label: "This is the appbar of the home page.", textField: true, child: Text(l10n.homeAppbarTitle), ), ),
47. MediaQuery a11y Sufficient contrast MediaQuery
48. MediaQuery.of(context).highContrast a11y Sufficient contrast MediaQuery
49. MediaQuery.of(context).textScaleFactor a11y Scale factors MediaQuery
50. .ARB a11y Scale factors
51. The repo of the sample project: https://github.com/gerfalcon/flutter_l10n_a11y_sample
52. Resources Internationalizing Flutter apps https://flutter.dev/docs/development/accessibility-and-localization/internationalization Internationalizing and Localizing Your Flutter App https://www.raywenderlich.com/10794904-internationalizing-and-localizing-your-flutter- app Flutter ARB file (.arb) https://localizely.com/flutter-arb/ Accessibility https://docs.flutter.dev/development/accessibility-and-localization/accessibility A deep dive into Flutter’s accessibility widgets https://medium.com/flutter-community/a-deep-dive-into-flutters-accessibility-widgets- eb0ef9455bc Used icon by Icons8
53. GerfalconVogel gerfalcon