ネットスーパーがスクリーンリーダーに対応した話 ~あるいはアクセシビリティ向上によるユーザー獲得~

7K Views

November 21, 24

スライド概要

FlutterKaigi2024

profile-image

Software Engineer@10X, Inc.

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

ネットスーパーがスクリーンリーダー に対応した話 ~あるいはアクセシビリティ向上によるユーザー獲得~ @futabooo #FlutterKaigi2024 ©2024 10X, Inc.

2.

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

3.

会社紹介 ©2024 10X, Inc. ● 社名 株式会社10X / 10X,Inc. ● 代表者 矢本真丈 ● 創業日 2017年6月 3

4.

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

5.

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

6.

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

7.

事業紹介 小売事業者のデジタル化を実現するすべてのシステムを プラットフォームとして提供 今日するのはこのネットスーパーアプリの話 (パートナーによってはWeb版もFlutterで提供中!!) ©2024 10X, Inc. 7

8.

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

9.

● スクリーンリーダーとは ● Stailerがなぜスクリーンリーダーに対応したのか ● Flutterでのスクリーンリーダー対応 目次 ©2024 10X, Inc. ○ 基本の対応 ○ Stailerで苦労したこと、ワークアラウンド、工夫点 ● スクリーンリーダー対応を社内に広める方法 ● ユーザー獲得について ● デモ 9

10.

スクリーンリーダーとは ©2024 10X, Inc. 10

11.

スクリーンリーダーとは wikiのスクリーンリーダーについてのページ コンピュータの画面読み上げソフトウェアである。 視覚障害者がパーソナルコンピュータを操作するために、 視覚的に使うことが必要であるマウスに代わり、情報を音声で読み上げることによって、 操作を補助するアクセシビリティである。 https://ja.wikipedia.org/wiki/スクリーンリーダー ©2024 10X, Inc. 11

12.

スクリーンリーダーとは スクリーンリーダーの利用状況 ● 半分以上の人がパソコンとスマートフォンを同じぐらいの頻度で使用する ● パソコンのOS利用状況 “第3回支援技術利用状況調査報告書”、日本視覚障害者ICTネットワーク https://jbict.net/survey/at-survey-03 ©2024 10X, Inc. 12

13.

スクリーンリーダーとは スクリーンリーダーの利用状況 ● パソコンのスクリーンリーダー利用状況 “第3回支援技術利用状況調査報告書”、日本視覚障害者ICTネットワーク https://jbict.net/survey/at-survey-03 ©2024 10X, Inc. 13

14.

スクリーンリーダーとは スクリーンリーダーの利用状況 ● パソコンのブラウザ利用状況 “第3回支援技術利用状況調査報告書”、日本視覚障害者ICTネットワーク https://jbict.net/survey/at-survey-03 ©2024 10X, Inc. 14

15.

スクリーンリーダーとは スクリーンリーダーの利用状況 ● スマートフォンのOS利用状況 “第3回支援技術利用状況調査報告書”、日本視覚障害者ICTネットワーク https://jbict.net/survey/at-survey-03 ©2024 10X, Inc. 15

16.

スクリーンリーダーとは スクリーンリーダーの利用状況 ● スマートフォンのスクリーンリーダー利用状況 “第3回支援技術利用状況調査報告書”、日本視覚障害者ICTネットワーク https://jbict.net/survey/at-survey-03 ©2024 10X, Inc. 16

17.

スクリーンリーダーとは スクリーンリーダーの利用状況 ● 半分以上の人がパソコンとスマートフォンを同じぐらいの頻度で使用する ● パソコンはWindowsでChromeを使いPC-Talkerで読み上げさせる ● スマートフォンはiPhoneを使いVoiceOverで読み上げさせる “第3回支援技術利用状況調査報告書”、日本視覚障害者ICTネットワーク https://jbict.net/survey/at-survey-03 ©2024 10X, Inc. 17

18.

スクリーンリーダーとは Windowsのスクリーンリーダー、PC-TalkerとNVDA ● PC-Talker ○ 有償のソフトウェア ○ 動作確認に使う場合はクリエイター版を使う ■ ● 音声読み上げの代わりに読み上げ内容をテキストで表示する NVDA ○ 無料、オープンソースのソフトウェア ○ Windowsで読み上げを試したいならこちらで音声読み上げを試せる ○ 操作のチートシートもある ©2024 10X, Inc. 18

19.

スクリーンリーダーとは Windowsのスクリーンリーダー、PC-TalkerとNVDA ● PC-Talker ○ 有償のソフトウェア ○ 動作確認に使う場合はクリエイター版を使う ■ ● 音声読み上げの代わりに読み上げ内容をテキストで表示する NVDA ○ 無料、オープンソースのソフトウェア ○ Windowsで読み上げを試したいならこちらで音声読み上げを試せる ○ 操作のチートシートもある WindowsはPC-Talkerのクリエイター版を使って開発をすすめることとした ©2024 10X, Inc. 19

20.

スクリーンリーダーとは iOS/Androidのスクリーンリーダー、VoiceOverとTalkBack ● どちらもOS標準のスクリーンリーダー ● いますぐにでも使い始めることができる ● チートシートを公開してくれてる人がいる!! https://docs.google.com/pres entation/d/1B4L1xTKlcJBdSpk zO4k80Thz7TkQY9DhSVP1W gUPNyY/edit#slide=id.g301e6 616104_0_62 ©2024 10X, Inc. 20

21.

Stailerがなぜスクリーンリーダーに 対応したのか ©2024 10X, Inc. 21

22.

Stailerがなぜスクリーンリーダーに対応したのか - お客様からのお問い合わせ - 今まで使えたのに使えない!システムリプレイス後にお客様からのお問い合わせ ● とあるパートナーのネットスーパーシステムをStailerへリプレイスした ● リプレイス後少しすると、 お客様から「今まで使えていたのに使えなくなった!」という切実な声が届いた ● この問い合わせを通じて、視覚障害者のお客様がスクリーンリーダーを使って買い物を していたこと、そしてStailerがそのニーズに応えていないことに気づいた ©2024 10X, Inc. 22

23.

Stailerがなぜスクリーンリーダーに対応したのか 障害のある人への民間事業者の合理的配慮が義務化 ● 令和6年(2024年)4月1日に 「改正障害者差別解消法」が施行され、 事業者による障害のある人への 「合理的配慮の提供」が義務化された ● 障害のある人から 「社会的なバリアを取り除いてほしい」 という意思が示された場合には、 その実施に伴う負担が過重でない範囲で、 バリアを取り除くために必要かつ合理的な 対応をすることとされた https://www.gov-online.go.jp/article/202402/entry-5611.html ©2024 10X, Inc. 23

24.

Stailerがなぜスクリーンリーダーに対応したのか 障害のある人への民間事業者の合理的配慮が義務化 ● 「合理的配慮の提供」の例 ○ 飲食店で障害のある人から 「車椅子のまま着席したい」 との申出があった ○ 【対応例】 机に備え付けの椅子を片付けて、 車椅子のまま着席できるスペースを 確保した https://www.gov-online.go.jp/article/202402/entry-5611.html ©2024 10X, Inc. 24

25.

Stailerがなぜスクリーンリーダーに対応したのか システムリプレイスが原因で 使えなくなったお客様のため そして法律の後押しがあったとはいえ スクリーンリーダーへ対応することによる アクセシビリティの向上は 他のお客様の体験の向上とすることもできると考えた ©2024 10X, Inc. 25

26.

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

27.

Flutterでのスクリーンリーダー対応 知っておきたいWidgets、class ©2024 10X, Inc. 27

28.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Widget Tree、Semantics Tree Widget Tree ©2024 10X, Inc. Semantics Tree 28

29.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Widget Tree、Semantics Tree ● Widget TreeとSemantics Treeは 必ずしも一致しない ● Semantics Treeを構成するSemantics Nodeは これから紹介する各種Widgetを組み合わせることで 変化する ● Semantics NodeはSemanticsPropertiesによって構成されている ● スクリーンリーダーはSemanticsPropertiesによって動作を決定する ©2024 10X, Inc. 29

30.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics class ©2024 10X, Inc. 30

31.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics class ©2024 10X, Inc. 31

32.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics class ● ● ● スクリーンリーダー用の情報を 付与できる 公式のWidgetはSemanticsのサポート がしっかりしている、カスタムWidget を作って使うときなどによく用いる 公式のWidgetだと Imageで使われている ○ packages/flutter/lib/src/widget s/image.dart ○ 例にあげたSemanticsでwrapする 実装はString? semanticLabelが あるのでImage(semanticsLabel:' 広告の品')とすることもできる ©2024 10X, Inc. 32

33.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics classのbool container ● container: true container: false SemanticsNodeを生成 SemanticsNodeを生成しない 子のSemanticsは生成したNodeに集約 子のSemanticsは親Nodeに集約 実際に読み上げをさせるために触っていてなんか違うとなったら conteinar: falseとなっていることが原因であったりする ● containerを制するものがSemanticsを制する(と言っても過言ではない) ©2024 10X, Inc. 33

34.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics classのbool containerのサンプル ©2024 10X, Inc. 34

35.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics classのbool container container: true ● Widgetのサイズとスク リーンリーダーで認識 されるサイズが同じに なる ● Grandchild Semantics の上に表示されるChild Semantics 1ボタンも問 題なくフォーカスを当 てることができる container: false ● Widgetのサイズとス クリーンリーダーで認 識されるサイズが異な る ● Grandchild Semantics ボタンのスクリーン リーダーの認識するサ イズがChild emantics 1ボタンを覆ってるので Child Semantics 1 ボタンにフォーカスを 当てることが困難にな る ©2024 10X, Inc. 35

36.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics classのbool container container: true ©2024 10X, Inc. container: false 36

37.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - Semantics classのbool container container: true container: false Node#7の内容が親のNode#4に 集約されている ©2024 10X, Inc. 37

38.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - 再掲 Semantics classのbool container ● container: true container: false SemanticsNodeを生成 SemanticsNodeを生成しない 子のSemanticsは生成したNodeに集約 子のSemanticsは親Nodeに集約 実際に読み上げをさせるために触っていてなんか違うとなったら conteinar: falseとなっていることが原因であったりする ● containerを制するものがSemanticsを制する(と言っても過言ではない) ©2024 10X, Inc. 38

39.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - MergeSemantics class ©2024 10X, Inc. 39

40.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - MergeSemantics class ©2024 10X, Inc. 40

41.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - MergeSemantics class ● ● ● ● 子どものSemanticsを集約しひとつの SemanticsNodeとする 無駄なSemanticsNodeの生成を防ぎパ フォーマンスを向上させたり、シンプル なSemantics Treeの生成によってわか りやすい読み上げにさせることができる container: trueの子どもも強制的に集 約する 公式のWidgetだとRadioListTileで使わ れている ○ packages/flutter/lib/src/materi al/radio_list_tile.dart ©2024 10X, Inc. 41

42.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - ExcludeSemantics class ©2024 10X, Inc. 42

43.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - ExcludeSemantics class ©2024 10X, Inc. 43

44.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - ExcludeSemantics class ● 子どものSemanticsをSemantics Tree から除外する ● 視覚的には表示されているが読み上げ時 には冗長となるものを除外できる ● Semantics classにあるbool excludeSemantics = trueとするのと挙 動は一緒 ● 公式のWidgetだとIconで使われている ○ packages/flutter/lib/src/widget s/icon.dart ©2024 10X, Inc. 44

45.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - BlockSemantics class ©2024 10X, Inc. 45

46.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - BlockSemantics class ©2024 10X, Inc. 46

47.

Flutterでのスクリーンリーダー対応 - 知っておきたいWidgets、class - BlockSemantics class ● BlockSemanticsよりもz-indexが下 にあるものをフォーカスされないよう に非表示にする ● TooltipやDialogなどで使うとよい ● 公式のWidgetだとDrawerで使われて いる ○ packages/flutter/lib/src/mate rial/drawer.dart ©2024 10X, Inc. 47

48.

Flutterでのスクリーンリーダー対応 デバッグ方法 ©2024 10X, Inc. 48

49.

Flutterでのスクリーンリーダー対応 - デバッグ方法 - 視覚的にSemanticsNodeを確認する ©2024 10X, Inc. 49

50.

Flutterでのスクリーンリーダー対応 - デバッグ方法 - Semantics TreeをDumpする ©2024 10X, Inc. 50

51.

Flutterでのスクリーンリーダー対応 Webの対応 ©2024 10X, Inc. 51

52.

Flutterでのスクリーンリーダー対応 – Webの対応 - Semantics Treeの生成を強制する ● WebではスクリーンリーダーのON/OFFが取れない ○ [web:a11y] MediaQuery.accessibleNavigation is not updating when a11y is enabled ○ not updatingとあるが実際は常にfalseになってる ● SemanticsTreeをスクリーンリーダーがONの時に生成するということができない ● アプリケーションへアクセスしたときに自動でSemantics Treeを生成する ● iOSの特定のバージョンではTextFieldが潰れて見えなくなるのでWebに限定する ©2024 10X, Inc. 52

53.

Flutterでのスクリーンリーダー対応 – Webの対応 - ブラウザで Semantics Tree(Accessibility Tree)を確認する ● ChromeのDevToolsを開く > Accessibilityタブを 選択 > Enable full-page accessibility treeをOn にするとElementsタブにボタンが表示される ● ● ボタンを押すとDOM TreeとAccessibility Treeの表示を切り替えることができる Flutter Webの場合アプリケーションにアクセスしたばかりのときはEnable accessibilityというUI上は見えないボタンのみが表示されている ©2024 10X, Inc. 53

54.

Flutterでのスクリーンリーダー対応 – Webの対応 - ブラウザで Semantics Tree(Accessibility Tree)を確認する ● Enable accessibilityにフォーカスを合わせて切り替えボタンを押すとDOM Treeの 見えないボタンにフォーカスがあたった状態となる ● Consoleタブで$0.click()を実行してボタンを押すとSemantics Treeが生成されるの で再度切り替えボタンを押すと確認できる ● SemanticsBinding.instance.ensureSemantics()は この見えないボタンを押す手間を省くことができる ©2024 10X, Inc. 54

55.

Flutterでのスクリーンリーダー対応 スクリーンリーダーの Test ©2024 10X, Inc. 55

56.

Flutterでのスクリーンリーダー対応 – スクリーンリーダーのTest - スクリーンリーダーのTest ©2024 10X, Inc. 56

57.

Flutterでのスクリーンリーダー対応 – スクリーンリーダーのTest - スクリーンリーダーのTest Semantics Treeを強制的に生成させる ©2024 10X, Inc. 57

58.

Flutterでのスクリーンリーダー対応 – スクリーンリーダーのTest - スクリーンリーダーのTest Semantics用のmatcherがあるので使うことで確認できる ©2024 10X, Inc. 58

59.

Flutterでのスクリーンリーダー対応 – スクリーンリーダーのTest - スクリーンリーダーのTest Semantics Treeを破棄する ©2024 10X, Inc. 59

60.

Flutterでのスクリーンリーダー対応 – スクリーンリーダーのTest - スクリーンリーダーのTest ● 先の例のようにWidget Testでテストしていく ● 実際にスクリーンリーダーを実機などで実行してテストする ○ 大変だけどマニュアルテストしないと体験は担保できない ○ 1度実装、マニュアルテストした部分はWidget Testで壊れたら検知できるように しつつ、新しいところはマニュアルテストしていくなどのバランスが必要 SemanticsTreeを破棄する ©2024 10X, Inc. 60

61.

Flutterでのスクリーンリーダー対応 Stailerで苦労したこと、ワークアラウンド、工夫点 ©2024 10X, Inc. 61

62.

Flutterでのスクリーンリーダー対応 – Stailerで苦労したこと、ワークアラウンド、工夫点 - 前提 ● Flutter 3.19.2で開発していた時の話のため最新のFlutterではすでに修正されてワーク アラウンドが必要無い場合もあります ● Widgetの組み方によって紹介する対応がうまくいかない場合もあります ● 対応の優先順位としてiOS App > Android App > Windows Web > その他Webの 順番で考えて対応しています ©2024 10X, Inc. 62

63.

Flutterでのスクリーンリーダー対応 – Stailerで苦労したこと、ワークアラウンド、工夫点 - iOSとSafariの特定の組み合わせでTextFieldが潰れて見えなくなる ● SemanticsBinding.instance.ensureSemantics()して いるとiOSとSafariの組み合わせで TextFieldが入力できるが 見えない状態になる ● 特定のiOSバージョンでしか起きない ● WebはWindowsユーザーのために対応することとして SemanticsBinding.instance.ensureSemantics()を 実行するのはWindowsかつWebの場合のみとした ©2024 10X, Inc. 63

64.

Flutterでのスクリーンリーダー対応 – Stailerで苦労したこと、ワークアラウンド、工夫点 - Dialogを閉じようとすると読み上げされてしまう ● Dialog内に自身を閉じるボタンを設置 ● そのボタンを押すとダイアログが閉じら れながらボタンのlabelが読み上げられて しまう ● 閉じるボタンを押したらフォーカスを 強制的に外すようにした ©2024 10X, Inc. 64

65.

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

66.

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

67.

Flutterでのスクリーンリーダー対応 – Stailerで苦労したこと、ワークアラウンド、工夫点 - 優先順位を決め、実装を手伝ってもらう ● 画面ごとに1タスクとして Notionで優先順位を管理 ● ドメイン知識も一定必要ではあるがそれよりも Flutterに精 通しているエキスパートとして業務委託のメンバーを採用 ● 初期は業務委託のメンバーに対応を探索してもらいつつ、ド キュメントの整備をすすめてもらいある程度の ところでチームメンバー全員でタスク消化 ● 期間にするとおよそ半年で must項目を消化完了 ©2024 10X, Inc. 67

68.

Flutterでのスクリーンリーダー対応 Flutterでのスクリーンリーダー対応のまとめ ● 基本のWidget4つを覚える ○ Semantics、MergeSemantics、ExcludeSemantics、BlockSemantics ○ 特にSemanticsのbool containerは最重要 ● 読み上げが思ったとおりにならない時は SemanticsTreeの視覚化でデバッグする ● Webの対応はかなり鬼門、アプリでのみ対応するという割り切りも必要 ○ Issueを立てる、Pull Requestをつくるなどの根本対応へ向けた活動も合わせて できると良い ● 完璧は難しいので優先順位をつけて対応する ©2024 10X, Inc. 68

69.

スクリーンリーダー対応を 社内に広める方法 ©2024 10X, Inc. 69

70.

スクリーンリーダー対応を社内に広める方法 Slackチャンネルを作ってわいわいする ● スクリーンリーダー対応が決まった後すぐに専用のチャンネルを作った ● チャンネルの中では日々の開発の進捗やスクリーンリーダーに関係するwebの事例や記 事を共有したりした ● 一定の成果が出るたびに他のチャンネルへ成果をアピールしに行った ○ ©2024 10X, Inc. 興味を持った人がチャンネルに入ってくれたりする 70

71.

スクリーンリーダー対応を社内に広める方法 ガイドラインを作成する ● 今日の発表のような内容を社内のドキュメントにまとめた ● 開発ガイドラインとして開発の助けになる決まり事を設定した ©2024 10X, Inc. 71

72.

スクリーンリーダー対応を社内に広める方法 プレスリリースを出す ● 対外的な発表と同時に、社内で対応 に関わっていなかったメンバーへの 周知にも使える ©2024 10X, Inc. 72

73.

ユーザー獲得について ©2024 10X, Inc. 73

74.

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

75.

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

76.

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

77.

ユーザー獲得について アクセシビリティ向上の重要性 ● アクセスしやすいことはUXピラミッドの土台 ● スクリーンリーダー対応によって アクセシビリティ向上させることは特別な対応 ではない ● アクセシビリティ向上を考えてUIをつくること は全てのユーザーの使いやすさを向上させるこ とにも通じる 画像 “ウェブアクセシビリティ導入ガイド” デジタル庁 ©2024 10X, Inc. 77

78.

デモ ©2024 10X, Inc. 78

79.

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

80.

まとめ ©2024 10X, Inc. 80

81.

まとめ ● スクリーンリーダーを含めたアクセシビリティを向上する活動の必要性はより高まって きている ● Flutterを使うとクロスプラットフォームの強みを使ってモバイルアプリ、Webアプリ のスクリーンリーダーへ対応することができる ○ ● Webはまだまだ改善の余地がある 基本のWidgetを覚えれば後はアプリケーションにあった読み上げとはなにか?という ユーザビリティを考慮した普段の開発と何も変わらない ● スクリーンリーダーに対応すると新規ユーザーを獲得できる ● 今日この発表を聞いたあなたはラージテキスト、高コントラストとは違い普段見えない スクリーンリーダーを知っている、やらない理由はない! ©2024 10X, Inc. 81

82.

スペシャルサンクス ● FlutterKaigi運営の皆さん ○ このような場を提供していただきありがとうございます!スクリーンリーダーの 対応を広めることでアクセシビリティの高いアプリが増える一助となることを 祈ってます! ● 開発をサポートいただいた皆さん ○ PLAYWORKS株式会社様にはユーザビリティテストの 協力をしていただきました! ○ テストへ参加いただいた視覚障害者の方には改善の ための情報をたくさんいただきました! ○ ©2024 10X, Inc. @blendthinkさんには副業で実装に協力いただきました! 82

83.

Thank you!! 83