Flutter製アプリのアクセシビリティ対応（音声読み上げ編） / Screen reading in Flutter app

2019.09.06　Flutter Meetup Tokyo #11　での15分LTのスライドです。

【訂正のお知らせ】
p.31 音声読み上げ機能がONの際にwidgetを表示させないためのvisible: への条件設定は「!MediaQuery.of(context).accessibleNavigation」（true/falseが逆）が正しいです。訂正してお詫びいたします。

Transcript

1. Flutter製アプリの アクセシビリティ対応 （音声読み上げ編） 2019.09.06　Flutter Meetup Tokyo #11 @nano2_aloerina
2. 誰？ • 坂野 匠弥 / なのなの • 株式会社アスネット 技術部 開発グループ所属 • 業務は主にAndroidアプリエンジニア • Flutter歴: だらだらと約1年 • Twitter: @nano2_aloerina / GitHub: nano-nano 2
5. 日本でもFlutter製アプリが 増えてきた！ 5
6. アプリを多くの人に 使ってもらいたい！ 6
7. アプリを多くの人に使ってもらうには？ • 使いやすいUIUX • 多言語対応 • アクセシビリティ対応 7
8. アプリを多くの人に使ってもらうには？ • 使いやすいUIUX • 多言語対応 • アクセシビリティ対応 8
9. アクセシビリティ • ハンディキャップを持った人でもモバイル端末を使えるように、端末操作を補 助する機能群 • 例えばAndroid Developersのドキュメントには、アクセシビリティ対応を行う ことで「より多くのユーザーにアプリがリーチできる」とある （ https://developer.android.com/guide/topics/ui/accessibility#impact ） 9
10. アクセシビリティ機能 • Android: 設定＞ユーザー補助 • iOS: 設定＞一般＞アクセシビリティ 10
11. 主なアクセシビリティ機能 • 拡大操作・ズーム • フォントサイズ • スイッチコントロール • モノラル再生 • 音声読み上げ • etc. 11
12. 主なアクセシビリティ機能 • 拡大操作・ズーム • フォントサイズ • スイッチコントロール • モノラル再生 • 音声読み上げ • etc. 12
13. 主なアクセシビリティ機能 • 拡大操作・ズーム • フォントサイズ • スイッチコントロール • モノラル再生 • 音声読み上げ • etc. Android: TalkBack iOS: VoiceOver 13
15. そもそも Flutter製アプリは 読み上げてくれるのか？ 15
16. Demo （Flutter製アプリの 読み上げ確認） 16
17. 自分で読み上げ方を制御したいこともある ふらったんの 画像 ボタン 17
18. ケーススタディ: 画像に読み上げテキストを設定 Image.asset( 'assets/flattan.png', height: 400, ) Image.asset( 'assets/flattan.png', height: 400, semanticLabel: 'ふらったんの画像', ) 18
19. ケーススタディ: 特定のパーツを読み上げさせない RaisedButton( onPressed: _incrementCounter, child: Text('Push Me!!'), ) Semantics( child: RaisedButton( onPressed: _incrementCounter, child: Text('Push Me!!'), ), excludeSemantics: true, ), 19
20. Semantics widget 20
22. Semantics widgetの主なコンストラクタ引数 • label ◦ 子ウィジェットの説明。読み上げ機能で読み上げられるテキストにな る • excludeSemantics ◦ 子ウィジェットに読み上げ機能のカーソルが当たらないようにするか どうか。trueで当たらない（＝読み上げられない） • sortKey ◦ 子ウィジェットに読み上げ機能のカーソルが当たる順番。 22
23. SortKeyについて Semantics( child: Text('Accesibility Text'), sortKey: OrdinalSortKey(2.0), ), Semantics( child: Text('Accesibility Text-2'), sortKey: OrdinalSortKey(1.0), ), 23
24. ケーススタディ: 好きなタイミングで読み上げたい カウントアップ しました 24
25. ケーススタディ: 好きなタイミングで読み上げたい void _incrementCounter() { setState(() { _counter++; }); SemanticsService.announce('カウントアップしました', TextDirection.ltr); } 25
26. Demo （SemanticsService） 26
27. まとめ • アプリをより多くの人に使ってもらうためには、音声読み上げなどアクセシ ビリティ対応が重要である • Flutter製アプリは、デフォルトで音声読み上げ機能に対応した形になって いる • 足りない部分はSemantics widgetなどを利用することで、ある程度の制御 が可能である 27
28. まとめ • アプリをより多くの人に使ってもらうためには、音声読み上げなどアクセシ ビリティ対応が重要である • Flutter製アプリは、デフォルトで音声読み上げ機能に対応した形になって いる • 足りない部分はSemantics widgetなどを利用することで、ある程度の制御 が可能である 結論: アクセシビリティ対応やっていき！ 28
29. Appendix. 参考文献等 Accessibility - Flutter https://flutter.dev/docs/development/accessibility-and-localization/accessibility semantics library - Dart API https://api.flutter.dev/flutter/semantics/semantics-library.html Accessibility on Flutter - Carlos Macías Martín - Medium https://medium.com/@c4rlosmm96/accessibility-on-flutter-908a2f003013 A deep dive into Flutter’s accessibility widgets - Flutter Community - Medium https://medium.com/flutter-community/a-deep-dive-into-flutters-accessibility-widgets-eb0ef9455bc 29
30. Appendix. 参考文献等 30 Google Devs Japanのツイート https://twitter.com/googledevjp/status/116733931 9276605440 Semantics (Flutter Widget of the Week) https://youtu.be/NvtMt_DtFrQ
31. Appendix. 音声読み上げ機能のON/OFF確認 accessibility - How to check whether screen reader is on using Flutter - Stack Overflow https://stackoverflow.com/questions/54224069/how-to-check-whether-screen-reader-is-on-using-flutter MediaQuery.of(context).accessibleNavigation　で判断できる （trueのとき、音声読み上げ機能がONになっている） Visibility( child: Placeholder(), visible: MediaQuery.of(context).accessibleNavigation, ) 音声読み上げ機能がONの場合、 Placeholder widgetを表示させない という実装例 31
32. Thank You!! 32