Flutter製アプリのアクセシビリティってどうなの？

Flutter製アプリの アクセシビリティってどうなの？ @futabooo #mobile_a11y ©2024 10X, Inc.

自己紹介 ● ● ● ● ● ● ● ● 二川隆浩（Takahiro Futagawa a.k.a futabooo） ソフトウェアエンジニア at 株式会社10X 3歳の娘の子育て奮闘中 2012年からAndroidエンジニア 10X入社後にDart、Flutterエンジニア Keyball44使い ○ いまだキーマップは定まらず 最近買ってよかったものはHUAWEI FreeClip ○ 在宅勤務中ずっとつけてても耳が痛くならず家 族との会話もできるのでおすすめ その他活動 ○ 技術書典での同人誌販売 ○ DroidKaigi2017 登壇 ○ RSGT2019 登壇 ©2024 10X, Inc. 2

事業紹介 ©2024 10X, Inc. 3

様々な規模・地域の小売事業者のデジタル化を支援 ©2024 10X, Inc. 4

小売事業者のデジタル化を実現するすべてのシステムを プラットフォームとして提供 ©2024 10X, Inc. 5

[PR] 採用情報 10xへの到達率は、まだ0.1%。 あなたの力が、必要です。 https://10x.co.jp/recruit/ ©2024 10X, Inc. 6

• https://10x.co.jp/recruit/

本題 ©2024 10X, Inc. 7

Flutter製アプリのアクセシビリティ向上 結構いけます！！ ©2024 10X, Inc. 8

Flutterのアクセシビリティサポート ● ユーザーが端末で設定したフォントサイズの適応 ● スクリーンリーダーの対応 ● 十分なコントラスト https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility ©2024 10X, Inc. 9

• https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility

ユーザーが端末で設定したフォントサイズの適応 通常サイズ ©2024 10X, Inc. 最大サイズ 10

Flutterでのスクリーンリーダー対応 スクリーンリーダー対応のお話 ©2024 10X, Inc. 11

https://www.docswell.com/s/futabooo/ZXE4NX-flutterkaigi2024 ©2024 10X, Inc. 12

• https://www.docswell.com/s/futabooo/ZXE4NX-flutterkaigi2024

視覚的にスクリーンリーダー利用の状況にして開発する ©2024 10X, Inc. 13

スクリーンリーダーのTest ©2024 10X, Inc. 14

苦労したところ、工夫 ©2024 10X, Inc. 15

無限スクロールで下部固定ボタンにたどりつけない ● 無限スクロールする商品リストの下に下部固定のボタンが 設置されたUI ● スクリーンリーダーの進むアクションでは無限に読み込ま れる商品にフォーカスが移るだけで次へ進むボタンへたど り着くことができない ● レジ前推薦と言われる画面でお買い物を完了させるために 無限スクロールする 必須な画面ではなかったの思い切って商品の一覧は ExcludeSemanticsで対応した 下部固定されている ©2024 10X, Inc. 16

アプリインストールバナーの読み上げを丁寧にする ● Web版のトップに表示しているアプリインストールの読 み上げを丁寧にすることでアプリを使ってもらいやすいよ うにした ● labelに「読み上げ対応はアプリを推奨しています。アプ リストアを開きます。インストール済みの場合はアプリを 開きます。」と設定した ● ユーザーインタビューでアプリで読み上げに対応している ものが少ないのでWeb版があればそちらを使うと言うの を聞いたのでこのようにした ©2024 10X, Inc. 17

スクリーンリーダー対応の効果 ©2024 10X, Inc. 18

スクリーンリーダー対応前のユーザーインタビューの結果 ● 実店舗へお買い物に行く場合はスタッフに帯同してもらい、 補助してもらいながらお買い物をするのである程度妥協するシーンもある ● インターネットの買い物ではBe My Eyesのようなサービスを使って助けてもらいながら 買い物をしたりする ○ https://www.bemyeyes.com/language/japanese ● アプリがスクリーンリーダーに対応していないことが多いのでWeb版を使うことが多い ● ネットスーパーでお買い物ができれば気兼ねなく自分のペースで楽しめる！！ ©2024 10X, Inc. 19

• https://www.bemyeyes.com/language/japanese

スクリーンリーダー対応後のユーザーインタビューの結果 ● 対応前のユーザーインタビューとは異なりアプリを普段使うように触ってもらうことが できたのでたくさんの改善点を受け取ることができた ● ○ 例えばカテゴリが分かりづらい、検索結果が何件あるのか分かると良い ○ どれも対応したらユーザビリティ向上もできるものであった たくさんのポジティブな意見もいただけた ○ 帰ったらネットスーパーが使えるので嬉しい ○ 友達にもおすすめしたい ○ 今使っているものから乗り換えたい ©2024 10X, Inc. 20

スクリーンリーダー対応後のユーザーインタビューの結果 ● 対応前のユーザーインタビューとは異なりアプリを普段使うように触ってもらうことが できたのでたくさんの改善点を受け取ることができた ● ○ 例えばカテゴリが分かりづらい、検索結果が何件あるのか分かると良い ○ どれも対応したらユーザビリティ向上もできるものであった たくさんのポジティブな意見もいただけた ○ 帰ったらネットスーパーが使えるので嬉しい ○ 友達にもおすすめしたい ○ 今使っているものから乗り換えたい アクセシビリティ向上によって新規ユーザーを獲得した！！ ©2024 10X, Inc. 21

十分なコントラスト ©2024 10X, Inc. 22

Coming soon…󰢛 ©2024 10X, Inc. 23

便利なツール ©2024 10X, Inc. 24

Flutterのアクセシビリティ向上を助けるツール accessibility_toolsを使っておくと開発中にアラートが表 示されるようになるのでアクセシビリティ向上を通常の開 発といっしょに進められるようになります。（意訳） https://pub.dev/packages/accessibility_tools ©2024 10X, Inc. 25

• https://pub.dev/packages/accessibility_tools

Flutterはクロスプラットフォーム Webも同じコードで対応できる ©2024 10X, Inc. 26

Flutterはクロスプラットフォーム Webも同じコードで対応できる 一部Web固有のコードを書いてます ©2024 10X, Inc. 27

Flutter製アプリのアクセシビリティ向上 結構いけます！！ ©2024 10X, Inc. 28

Flutter製アプリのアクセシビリティ向上 モバイルは結構いけます！！ ©2024 10X, Inc. 29

おまけ デモ ©2024 10X, Inc. 30

デモ iOSのVoiceOverを使って読み上げをさせているデモ 通常速度 ©2024 10X, Inc. 視覚障害者の方が使ってる速度 31

Thank you!! 32