ネットスーパーがスクリーンリーダーに対応した話 ~あるいはアクセシビリティ向上によるユーザー獲得~

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

3.

4.

5.

6.

7.

8.

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

9.

10.

11.

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

https://ja.wikipedia.org/wiki/スクリーンリーダー

12.

https://jbict.net/survey/at-survey-03

13.

https://jbict.net/survey/at-survey-03

14.

https://jbict.net/survey/at-survey-03

15.

https://jbict.net/survey/at-survey-03

16.

https://jbict.net/survey/at-survey-03

17.

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

https://jbict.net/survey/at-survey-03

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

https://docs.google.com/presentation/d/1B4L1xTKlcJBdSpkzO4k80Thz7TkQY9DhSVP1WgUPNyY/edit#slide=id.g301e6616104_0_62

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

https://www.gov-online.go.jp/article/202402/entry-5611.html

24.

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

https://www.gov-online.go.jp/article/202402/entry-5611.html

25.

26.

27.

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

https://api.flutter.dev/flutter/semantics/SemanticsProperties-class.html

30.

31.

32.

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

https://github.com/flutter/flutter/blob/dc17d943fd86318b9c63e6cc25452798e86db6cd/packages/flutter/lib/src/widgets/image.dart#L1314

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.

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.

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.

40.

41.

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

https://github.com/flutter/flutter/blob/ccd581a8deca6c1c33b3b7b75849770c94f70794/packages/flutter/lib/src/material/radio_list_tile.dart#L543

42.

43.

44.

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

https://github.com/flutter/flutter/blob/fd276da092dbda4a54ef1cf8743cf2f379b070e7/packages/flutter/lib/src/widgets/icon.dart#L345

45.

46.

47.

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

https://github.com/flutter/flutter/blob/eaa99f28b1cebf39be5fe92633d79af0b64fe329/packages/flutter/lib/src/material/drawer.dart#L705

48.

49.

50.

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

https://github.com/flutter/flutter/issues/134980

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.

56.

57.

58.

59.

60.

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

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.

65.

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

66.

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

67.

Flutterでのスクリーンリーダー対応 – Stailerで苦労したこと、ワークアラウンド、工夫点 - 優先順位を決め、実装を手伝ってもらう ● 画面ごとに１タスクとして 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.

70.

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

71.

72.

73.

74.

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

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

75.

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

76.

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

77.

https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf

78.

79.

80.

81.

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

82.

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

83.

Thank you!! 83

ネットスーパーがスクリーンリーダーに対応した話 ~あるいはアクセシビリティ向上によるユーザー獲得~

futabooo

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

Unreal Engine5 Lumenの仕組みと肝心なところ

最新の6.0で学ぶ！初めてのひとのためのSpring Security

SQL滅ぶべし

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

SPAセキュリティ超入門

各ページのテキスト