Flutter製アプリの アクセシビリティ対応 （音声読み上げ編） 2019.09.06　Flutter Meetup Tokyo #11 @nano2_aloerina

誰？ ● 坂野 匠弥 / なのなの ● 株式会社アスネット 技術部 開発グループ所属 ● 業務は主にAndroidアプリエンジニア ● Flutter歴: だらだらと約1年 ● Twitter: @nano2_aloerina / GitHub: nano-nano 2

3

4

日本でもFlutter製アプリが 増えてきた！ 5

アプリを多くの人に 使ってもらいたい！ 6

アプリを多くの人に使ってもらうには？ ● 使いやすいUIUX ● 多言語対応 ● アクセシビリティ対応 7

アプリを多くの人に使ってもらうには？ ● 使いやすいUIUX ● 多言語対応 ● アクセシビリティ対応 8

アクセシビリティ ● ハンディキャップを持った人でもモバイル端末を使えるように、端末操作を補 助する機能群 ● 例えばAndroid Developersのドキュメントには、アクセシビリティ対応を行う ことで「より多くのユーザーにアプリがリーチできる」とある （ https://developer.android.com/guide/topics/ui/accessibility#impact ） 9

アクセシビリティ機能 ● Android: 設定＞ユーザー補助 ● iOS: 設定＞一般＞アクセシビリティ 10

主なアクセシビリティ機能 ● 拡大操作・ズーム ● フォントサイズ ● スイッチコントロール ● モノラル再生 ● 音声読み上げ ● etc. 11

主なアクセシビリティ機能 ● 拡大操作・ズーム ● フォントサイズ ● スイッチコントロール ● モノラル再生 ● 音声読み上げ ● etc. 12

主なアクセシビリティ機能 ● 拡大操作・ズーム ● フォントサイズ ● スイッチコントロール ● モノラル再生 ● 音声読み上げ ● etc. Android: TalkBack iOS: VoiceOver 13

14

そもそも Flutter製アプリは 読み上げてくれるのか？ 15

Demo （Flutter製アプリの 読み上げ確認） 16

自分で読み上げ方を制御したいこともある ふらったんの 画像 ボタン 17

ケーススタディ: 画像に読み上げテキストを設定 Image.asset( 'assets/flattan.png', height: 400, ) Image.asset( 'assets/flattan.png', height: 400, semanticLabel: 'ふらったんの画像', ) 18

ケーススタディ: 特定のパーツを読み上げさせない RaisedButton( onPressed: _incrementCounter, child: Text('Push Me!!'), ) Semantics( child: RaisedButton( onPressed: _incrementCounter, child: Text('Push Me!!'), ), excludeSemantics: true, ), 19

Semantics widget 20

21

Semantics widgetの主なコンストラクタ引数 ● label ○ 子ウィジェットの説明。読み上げ機能で読み上げられるテキストにな る ● excludeSemantics ○ 子ウィジェットに読み上げ機能のカーソルが当たらないようにするか どうか。trueで当たらない（＝読み上げられない） ● sortKey ○ 子ウィジェットに読み上げ機能のカーソルが当たる順番。 22

SortKeyについて Semantics( child: Text('Accesibility Text'), sortKey: OrdinalSortKey(2.0), ), Semantics( child: Text('Accesibility Text-2'), sortKey: OrdinalSortKey(1.0), ), 23

ケーススタディ: 好きなタイミングで読み上げたい カウントアップ しました 24

ケーススタディ: 好きなタイミングで読み上げたい void _incrementCounter() { setState(() { _counter++; }); SemanticsService.announce('カウントアップしました', TextDirection.ltr); } 25

Demo （SemanticsService） 26

まとめ ● アプリをより多くの人に使ってもらうためには、音声読み上げなどアクセシ ビリティ対応が重要である ● Flutter製アプリは、デフォルトで音声読み上げ機能に対応した形になって いる ● 足りない部分はSemantics widgetなどを利用することで、ある程度の制御 が可能である 27

まとめ ● アプリをより多くの人に使ってもらうためには、音声読み上げなどアクセシ ビリティ対応が重要である ● Flutter製アプリは、デフォルトで音声読み上げ機能に対応した形になって いる ● 足りない部分はSemantics widgetなどを利用することで、ある程度の制御 が可能である 結論: アクセシビリティ対応やっていき！ 28

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

Appendix. 参考文献等 30 Google Devs Japanのツイート https://twitter.com/googledevjp/status/116733931 9276605440 Semantics (Flutter Widget of the Week) https://youtu.be/NvtMt_DtFrQ

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

Thank You!! 32