できる！アクセシビリティ向上/droidkaigi2023-day2

DroidKaigi 2023 Day2 「できる！アクセシビリティ向上」というタイトルで日本経済新聞社の小倉さんが発表しました #DroidKaigi (2023/09/15)
https://2023.droidkaigi.jp/timetable/495062/

Transcript

1. できる！ アクセシビリティ向上 DroidKaigi 2023 2023/9/15 17:00〜17:40 @Arctic Fox Yuri Ogura
2. ⽇経電⼦版 紙⾯ビューアー • ソフトウェアエンジニア • 株式会社 ⽇本経済新聞社（2023年2⽉〜） • ⽇経電⼦版‧紙⾯ビューアー開発 ⾃⼰紹介 Yuri Ogura 2
3. アクセシビリティ向上の第⼀歩を踏み出すことが⽬標 アジェンダ Step 1. 知るぞ！アクセシビリティ！ Step 2. 取り組んだ！アクセシビリティ！ Step 3. 今⽇からできる！アクセシビリティ！ 3
4. Step 1. 知るぞ！アクセシビリティ！ アクセシビリティという⾔葉の意味から、 アプリでできる具体的なアクセシビリティ考慮、 ⽀援技術（TalkBackやスイッチアクセス）の使い⽅ までご紹介します 4
5. 「アクセシビリティ」とは？ よく似た⾔葉に、「ユーザビリティ」という⾔葉がある アクセシビリティ ＝ 「あるユーザにとって、そもそも使えるか？」 Step1. 知るぞ！アクセシビリティ 5
6. ISO 9241-11における ユーザビリティ の定義 特定の利⽤状況において、特定のユーザーによって、 ある製品が、指定された⽬標を達成するために⽤いられる際の、 有効さ、効率、ユーザーの満⾜度の度合い JIS X 8341 における アクセシビリティ の定義 様々な能⼒をもつ最も幅広い層の⼈々に対する製品， サービス，環境⼜は施設（のインタラクティブシステム）の ユーザビリティ Step1. 知るぞ！アクセシビリティ - 「アクセシビリティ」とは？ 6
7. ISO 9241-11における ユーザビリティ の定義 特定の利⽤状況において、特定のユーザーによって、 ある製品が、指定された⽬標を達成するために⽤いられる際の、 有効さ、効率、ユーザーの満⾜度の度合い JIS X 8341 における アクセシビリティ の定義 様々な能⼒をもつ最も幅広い層の⼈々に対する製品， サービス，環境⼜は施設（のインタラクティブシステム）の ユーザビリティ Step1. 知るぞ！アクセシビリティ - 「アクセシビリティ」とは？ 7
8. ユーザビリティは ⼭の頂点を⾼める活動 アクセシビリティは ⼭の裾野を広げる活動 幅広い層の⼈々にとって使える 特定のユーザー（状況）に 響く Step1. 知るぞ！アクセシビリティ - 「アクセシビリティ」とは？ 8
9. ⾳声 モビリティ 視覚 皆んなが「使える」アプリにするために （´-`）.｡oO（様々な能⼒をもつ最も幅広い層の⼈々？） 我々Android Developerとして、アプリでできる考慮を考えてみる Step1. 知るぞ！アクセシビリティ 9
10. • 全盲 視覚的な情報を全く、またはほとんど得られない • 弱視、加齢による⽼眼や⽩内障 視⼒が低い状態の他、⾒える範囲が狭い、光をまぶしく感じる、 夜や暗いところでは⾒えにくくなる、といった状態も Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために 視覚 - 幅広い層の⼈々 10
11. • 様々な都合により、明るい / 暗い環境 ◦ 外回りの仕事で、直射⽇光差し込む中でアプリを利⽤ ◦ 寝ている家族がおり、部屋が真っ暗な中でアプリを利⽤ Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために 視覚 - 幅広い層の⼈々 11
12. • TalkBackでアプリを利⽤できるようにする → 画⾯を⾒ずにデバイスを操作できる • ダークモードに対応する → まぶしさを軽減できる Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために 視覚 - アプリでできる考慮 12
13. • ⼗分なコントラストを取る → ⾒えにくさを軽減できる • 端末設定の ⽂字サイズ / 表⽰サイズ を拡⼤しても レイアウトが乱れないようにする Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために 視覚 - アプリでできる考慮 13
14. • 全ろう：全く⽿が聞こえない状態 • 難聴：⽿が聞こえにくい状態 • ⺟国語ではない • 騒⾳下や⾳を出せない環境 Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために 聴覚 - 幅広い層の⼈々 14
15. • 字幕などの視覚情報を提供する • ⾳声/動画コンテンツの再⽣‧停⽌をできるようにする Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために 聴覚 - アプリでできる考慮 15
16. • 上肢障がい、⼀時的な怪我、加齢 ものをつかむ‧持ち上げる‧⽀える、⼿指を細かく動かす、 などの動作を⾏うことができない状態 • ⽚⼿の塞がり 外出時に⼦供と繋ぐ⼿を離せない状態など Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために モビリティ - 幅広い層の⼈々 16
17. • スイッチアクセスでアプリを利⽤できるようにする → 画⾯に触れずにデバイスを操作できる • タップ範囲を拡⼤し、タップしやすくする • ピンチ操作に代替を⽤意し、⽚⼿でも使⽤しやすくする Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために モビリティ - アプリでできる考慮 17
18. • アクセシビリティの対象者は「全員」 • アプリでできる考慮も多岐にわたる ◦ TalkBack、スイッチアクセス、ダークモード、 ⽂字/表⽰サイズ変更、再⽣/停⽌、タップ範囲、etc. ◦ 既にできていることもあるのではないでしょうか？ Step1. 知るぞ！アクセシビリティ ここまでのまとめ 18
19. Step1. 知るぞ！アクセシビリティ TalkBackを使ってみよう TalkBackとは... • Androidデバイスに搭載されているスクリーンリーダー • TalkBackによる 読み上げ や 専⽤ジェスチャー操作 により、 画⾯を⾒ずにデバイスを使⽤することができる 19
20. 〜 TalkBackデモ 〜 起動⽅法や基本操作を⼀緒に覚えていきましょう〜 20
21. TalkBack を On / Off にする 【基本】 設定アプリ > [ユーザー補助] > [TalkBack] https://play.google.com/store/apps/details? id=com.google.android.marvin.talkback Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 21
22. TalkBack を On / Off にする 【開発時】 ショートカットやadbコマンドがオススメ！ 特にTalkBackの操作に慣れないうちは、 設定アプリまで戻ってOffにすることが難しい... Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 22
23. ショートカット で On / Off にする [TalkBackのショートカット] を設定する Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう ショートカット例
 • 音量ボタン大と小の同時長押し
 • ユーザー補助機能ボタン
 23
24. adbコマンドで On / Off にする Settings.Secure の設定値を変更 adb shell settings put secure enabled_accessibility_services {accessibility provider} • Onにするとき com.google.android.marvin.talkback /com.google.android.marvin.talkback.TalkBackService • Offにするとき null Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう https://developer.android.com/reference/android/provider/Settings.Secure #ENABLED_ACCESSIBILITY_SERVICES 24
25. Step1. 知るぞ！アクセシビリティ フォーカスされた画⾯要素が緑枠で囲まれ、⾳声が読み上げられる 読み上げ： 「ネットワークとインターネット、 モバイル、Wi-Fi、アクセスポイント」 基本操作① 読み上げ 25
26. Step1. 知るぞ！アクセシビリティ 画⾯上を１本指で１回タッチすると、 フォーカスが移動して⾳声が読み上げられる 画⾯上をタッチしたまま、指を滑らせるようにしても 指の下の画⾯要素にフォーカスが移動し、⾳声が読み上げられる 基本操作② タッチでフォーカスを移動 26
27. Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 基本操作③ 前後の画⾯要素へ移動する 前の画⾯要素へ 【 左へスワイプ 】 次の画⾯要素へ 【 右へスワイプ 】 27
28. Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 「ネットワークと...アクセスポイント、 ダブルタップできるメニューです」 １本の指でダブルタップすると 選択（画⾯遷移）できる 基本操作④ 画⾯要素を選択する この項⽬を選択したい 28
29. Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 基本操作⑤ システムのジェスチャー操作 ⼀本指の代わりに、⼆本指で⾏うことができる （マルチフィンガージェスチャー対応時） 例：通知センターを表⽰したい • TalkBack OFF 時 ⼀本指で上から下にスワイプ • TalkBack ON 時 ⼆本指で上から下にスワイプ 29
30. Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう • 以上を覚えれば、TalkBackである程度⾃在に操作可能 • 他にも１〜４本の指を使って様々な操作を⾏うことができる ※ TalkBackバージョンによる差分あり ※ 操作⽅法の⼀覧はドキュメント参照 👀 https://support.google.com/accessibility/android/answer/6151827 30
31. Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 開発時に便利な設定 [TalkBack] > [設定] > [詳細設定] > [デベロッパー向けの設定] > [⾳声出⼒の表⽰] ONで画⾯下部に読み上げ内容が表⽰される。 → ⽂⾯上でのコミュニケーションに便利 ✨ ⾳声出⼒の表⽰, ON, スイッチ 31
32. Step1. 知るぞ！アクセシビリティ スイッチアクセスを使ってみよう スイッチアクセスとは... • Androidデバイスを外部デバイスなどで操作する機能 • スイッチアクセスによる スキャン（※） と 選択 により、 画⾯にタップすることなくデバイスを操作できる ※ 画⾯上の選択可能な項⽬を、⾃動で順番にハイライト表⽰ https://www.youtube.com/watch?v=rAIXE6ilRQ0 32
33. https://www.ablenetinc.com/ blue2-bluetooth-switch/ スイッチデバイスの例 Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう https://www.ablenetinc.com/ micro-light-switch/ • ２つのボタンで操作できる機器 • ごくわずかな⼒で操作できる機器 • 他にも、⾜で操作するものや、 スティック型のもの、 頭で押しやすいものなど、 多様なものがある 33
34. Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 顔の動き（左）に対して 様々な操作（右）を 割り当てることができる カメラスイッチ 34
35. 〜 スイッチアクセス デモ 〜 起動⽅法や基本操作を⼀緒に覚えていきましょう〜 35
36. Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう スイッチアクセス を On / Off にする 【基本】 設定アプリ > [ユーザー補助] > [スイッチアクセス] https://play.google.com/store/apps/details? id=com.google.android.accessibility.switchaccess 36
37. スイッチアクセス を On / Off にする 【開発時】 スイッチアクセスも、TalkBackと同様に ショートカットやadbコマンドを使⽤可能 （ショートカットはTalkBackと同じのため省略） Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 37
38. adbコマンドで On / Off にする Settings.Secure の設定値を変更 adb shell settings put secure enabled_accessibility_services {accessibility provider} • Onにするとき com.google.android.accessibility.switchaccess /com.android.switchaccess.SwitchAccessService • Offにするとき null Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう https://developer.android.com/reference/android/provider/Settings.Secure #ENABLED_ACCESSIBILITY_SERVICES 38
39. スイッチデバイスを持っていなくても 🙆 開発者向けに、Androidデバイスの⾳量ボタンを 割り当てることができるようになっている！ [スイッチアクセス] > [設定] > > [スキャン⽤のスイッチを割り当てる] 詳細は以下ドキュメント参照 https://developer.android.com/guide/topics/ui/accessibility/test ing#switch-access Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 39
40. Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 基本操作① 画⾯要素を移動する 【次へ】を割り当てた スイッチを押下 例：⾳量⼩ボタン 次の選択可能な画⾯要素へ移動できる 40
41. Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 基本操作② 画⾯要素を選択する 【選択】を割り当てた スイッチを押下 例：⾳量⼤ボタン 41
42. Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 基本操作③ スクロールをする 選 択 選 択 42
43. Step1. 知るぞ！アクセシビリティ TalkBackとスイッチアクセスの⼀番の習得⽅法は 実際に操作してみることです。 本資料やドキュメントを参照しながら、 ぜひまずは触ってみてください 💗 43
44. ⽇経電⼦版におけるアクセシビリティ向上施策と そこから得た気付きをご紹介します Step 2. 取り組んだ！アクセシビリティ！ 44
45. • ⽇本経済新聞社が提供するニュースメディア • 朝刊‧⼣刊及び電⼦版オリジナル記事 • GooglePlayには、Android版とWear OS版 電⼦版有料会員数 87万⼈ 無料登録会員を含む電⼦版会員数 612万⼈ → 幅広い⼈々に使える必要がある ⽇経電⼦版とは Step2. 取り組んだ！アクセシビリティ 45
46. 施策⽴案 ⾒積もり リリース 開発&QA 優先度 決め Step2. 取り組んだ！アクセシビリティ ⽇経電⼦版のアクセシビリティ向上の流れ 46
47. 施策⽴案 ⾒積もり リリース 開発&QA 優先度 決め Step2. 取り組んだ！アクセシビリティ ⽇経電⼦版のアクセシビリティ向上の流れ 47
48. 取り組みたいアクセシビリティ課題を施策として⽴案 • TalkBackやスイッチアクセスなどで使えるようにしたい • Android14最⼤⽂字サイズ拡⼤で⽣じる表⽰崩れを修正したい • ダークモードに対応したい 弊社のフローに従い、資料を作成して施策発表会の場で提案した Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 施策⽴案 48
49. 施策⽴案 ⾒積もり リリース 開発&QA 優先度 決め Step2. 取り組んだ！アクセシビリティ ⽇経電⼦版のアクセシビリティ向上の流れ 49
50. Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 優先度決め 〜アクセシビリティタスク〜 他にも開発すべきことがあり、 アクセシビリティタスクの全てに今すぐ着⼿することは難しかった。 そこで、以下の観点で優先度を決定。 ① 他の開発の合間に進めやすいか？   （画⾯単位、コンポーネント単位での対応 & リリースが可能か） ②Androidで他の代替⼿段を以てアプリを使⽤することができるか？ （Androidユーザー補助機能など） 50
51. TalkBack‧ スイッチアクセス ① OK ② なし Android14 表⽰崩れ ① OK ② タブレット   拡⼤機能 ダークモード ① 難しい ② ⾊反転機能 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 優先度決め 〜アクセシビリティタスク〜 ① 他の開発の合間に進めやすいかどうか ② Androidで他の代替⼿段を以てアプリを使⽤することができるか 51
52. TalkBack‧ スイッチアクセス ① OK ② なし Android14 表⽰崩れ ① OK ② タブレット   拡⼤機能 ダークモード ① 難しい ② ⾊反転機能 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 優先度決め 〜アクセシビリティタスク〜 ① 他の開発の合間に進めやすいかどうか ② Androidで他の代替⼿段を以てアプリを使⽤することができるか 最優先 52
53. Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 簡略化のために、このページ以降のスライドでは 「スイッチアクセス」の表記を省略します。 実際には「TalkBack」と並⾏して改善を⾏いました。 53
54. シーン 画⾯名 現状動作 改善案 画⾯優先度 使える度 総合的優先度 初回導線 〇〇画⾯ ボタンが「ラ ベルなし」と 読まれる ボタン内容を わかるように する 個別記事 個別記事画⾯ ボトムシート が開けない 開けるように する 朝⼣刊 ⽇付選択画⾯ … … 各画⾯をTalkBackで実際に動かしてみて（⼿動テスト）、 改善点のある画⾯を以下のような表にリストアップしていった Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 優先度決め 〜TalkBackタスク〜 54
55. 各項⽬で 画⾯的優先度 × 使える度 から 総合的優先度 を決定 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 優先度決め 〜TalkBackタスク〜 初回導線‧ 主要画⾯ ⾏えない遷移‧ 意味の通じない読み上げ 優先度 ⾼ × = PVが少ない画 ⾯ 操作は可能‧ 意味は通じる 優先度 低 × = 55
56. シーン 画⾯名 現状動作 改善案 画⾯優先度 使える度 総合的優先度 初回導線 〇〇画⾯ … … ⾼ 絶望的 S 〇〇 〇〇画⾯ … … ⾼ ⼀応使える B 〇〇 〇〇画⾯ … … 中 使えない B 〇〇 〇〇画⾯ … … 低 ⼀応使える C Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 優先度決め 〜TalkBackタスク〜 優先度をレベル分け 56
57. 施策⽴案 ⾒積もり リリース 開発&QA 優先度 決め Step2. 取り組んだ！アクセシビリティ ⽇経電⼦版のアクセシビリティ向上の流れ 57
58. • 先ほど作成した表を、総合的優先度が⾼い順に並び替え • チームで⼀項⽬ずつ⾒積もりを実施 • 優先度レベル別の⽬標対応完了時期を設定 （優先度レベル S は ◦⽉◦⽇までに完了、など） Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ TalkBackタスク⾒積もり 58
59. 施策⽴案 ⾒積もり リリース 開発&QA 優先度 決め Step2. 取り組んだ！アクセシビリティ ⽇経電⼦版のアクセシビリティ向上の流れ 59
60. 開発フェーズに到達したら、粛々と対応するのみ💪 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ 開発 Before & After のTalkBackでの挙動を 撮影してPRに添付するルール 対応内容を振り返りやすくすることで、 継続的なアクセシビリティ向上に繋がることを期待 60
61. • TalkBackに関するドキュメントを⽤意し、 QAさんにも基本的な操作⽅法を習得いただいた • 両端のサポートOSバージョンで実施 ◦ バージョン差分があるケースもあった Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ QA 61
62. 施策⽴案 ⾒積もり リリース 開発&QA 優先度 決め Step2. 取り組んだ！アクセシビリティ ⽇経電⼦版のアクセシビリティ向上の流れ 62
63. Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ リリース 🎉 ⼀刻でも早く、必要とする ユーザーに届きますように 🙏 改善した画⾯から都度、 次回のリリースに含めていった 63
64. ① TalkBack動作を伝えるためには動画が第⼀！ ② ハードルが低く、実はめちゃくちゃ取り組みやすかった！ ③ （はじめてTalkBackと向き合う場合） 対応案の計画、⾒積もりは段階分けした⽅が良かった！ Step2. 取り組んだ！アクセシビリティ TalkBack改善で得た気付き３選 64
65. 施策⽴案‧⾒積もりフェーズで、 TalkBackの現状動作を伝えることに苦労した。 ⼝頭や⽂⾯での説明では伝わりにくく、 実動作をデモや動画で⾒せられるよう準備しておくべきだった。 Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ① TalkBack動作を伝えるためには動画が第⼀！ 65
66. ⼀⽅で開発‧QAフェーズでは IssueやPRに動画を添付してやり取りしていたため 挙動を齟齬なく伝えることができて良かった 🙆 Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ① TalkBack動作を伝えるためには動画が第⼀！ 66
67. • 1つの⼩さなUIから単発で取り組める • 多くの対応⽅法では、ユーザー補助機能⾮利⽤時への影響なし （デグレしにくい！） • 様々な画⾯、機能を⾒る機会になるので、 新メンバーオンボーディングにも向いていそう 👀 （実際に私は⼊社半年で、これを機に知る画⾯、機能もあった） Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ② ハードルが低く、実は取り組みやすかった！ 67
68. 【失敗】 • ⾃分含め、メンバーはTalkBack初⼼者だった • 洗い出したタスクの全てについての対応案を事前に検討し ⾒積もりを⾏ったが、膨⼤な時間がかかった ◦ 現状や期待動作、実装⽅法のイメージの共有が難しかった ◦ ⾒積もりがバラつき、議論の時間を要した Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ③ 対応案の計画、⾒積もりは段階分けすればよかった！ 68
69. 【改善】 • 対応案の計画、⾒積もりを「最初に全て⾏う」のではなく 「段階を分けて⾏う」ようにすれば良かった • ⼀部対応を進めることで、TalkBackそのものや実装への理解が 深まる。TalkBackへの共通認識ができた後に 残りを計画、⾒積もりした⽅が時間的に効率良く、 かつ精度も⾼く議論できたはず Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ③ 対応案の計画、⾒積もりは段階分けすればよかった！ 69
70. Step 3. 今⽇からできる！アクセシビリティ！ 今⽇のたった10分からできそう、 そう思えるようなアクセシビリティ向上の 具体的な⼿段を3つご紹介します 70
71. ツールからの指摘を 修正してみる 1 Step3. 今⽇からできる！アクセシビリティ！ 71
72. （参考）アクセシビリティチェックの⽅法 • ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 • ツールを使⽤したテスト ユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 • ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 • ユーザテスト 実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 https://developer.android.com/guide/topics/ui/accessibility/testing Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 72
73. （参考）アクセシビリティチェックの⽅法 こ れ • ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 • ツールを使⽤したテスト ユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 • ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 • ユーザテスト 実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 https://developer.android.com/guide/topics/ui/accessibility/testing Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 73
74. ユーザー補助検証ツール https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor https://support.google.com/accessibility/android/answer/6376570 任意のアプリ画⾯の写真またはビデオを取ると、 問題点を列挙し、改善提案をドキュメントとともに⽰してくれる • コンテンツ ラベル（ ≒ ContentDescription） • タップ ターゲットのサイズ • クリック可能アイテム • テキストと画像のコントラスト Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 74
75. ユーザー補助検証ツール コントラストを 上げた⽅が 良いですよ〜 フォントサイズ拡⼤ で表⽰崩れるかも しれませんよ〜 Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 75
76. ContentDescriptionを ⾒直してみる 2 Step3. 今⽇からできる！アクセシビリティ！ 76
77. ContentDescription ? • 主にアクセシビリティ⽬的で使⽤するプロパティ • 使⽤例 ◦ 画像やアイコンの代替テキスト（≒ Webのalt属性） ◦ TalkBackでの読み上げを理解しやすくする 例えば、UI上では「¥1,000」と表現しているものを 読み上げでは「1,000円」とする Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 77
78. ContentDescription ? 特に「画像やアイコンの代替テキスト」は重要 • Android Viewでは未指定でもビルドできる • Jetpack Composeでは未指定だとビルドできない エラー😢 Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 78
79. ? ? ? ?
 実装例：画像 contentDescriptionの指定の仕⽅によって、 どのように読み上げられるか確認してみましょう Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ① null ② 空⽂字 ③ 適切な⽂字列 79
80. ① contentDescription = null Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 画像にフォーカスが当たらないので、画像の存在が伝わらない 右へスワイプ 80
81. ① contentDescription = null Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる • null が適している例 🙆 ◦ 装飾⽬的の画像（画像右） ◦ テキストと内容が重複する画像 （画像左） 81
82. ② contentDescription = ””（空⽂字） Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 画像にフォーカスは当たるが、「ラベルなし」と読み上げられる。 ※ この例のように、フォーカスは当たるが 適切な読み上げが付与されていない場合、 TalkBackは「ラベルなし」と読み上げる。 ラベルなし 82
83. ② contentDescription = ””（空⽂字） Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる • 「ラベルなし」という読み上げでは理解が困難であり、 アクセシビリティに⽋ける • ””（空⽂字）は基本的に指定すべきではない ◦ 明確に ① null か、③ 適切な⽂字列 を指定すべき 🙆 83
84. ③ contentDescription = ” {適切な⽂字列} ” Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 画像にフォーカスが当たり、 contentDescriptionに指定した⽂字列が読み上げられる。 アルパカの⾚ちゃんは、 ⽣後3ヶ⽉で 歩けるようになる 84
85. ③ contentDescription = ” {適切な⽂字列} ” Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる • ” {適切な⽂字列} ” とするべき例 🙆 ◦ ⽂字情報が⼊っている画像（⼀つ前のスライドの例） ◦ ボタンとなっている画像やアイコン （右図の例） どのような⽂字列を指定すべきか迷った時は、 Webのalt属性を参考にする（検索する）とサンプルが多い💡 85
86. • nullの場合 ◦ そのnull指定は意図されたもの？ • 空⽂字の場合 ◦ null or ⽂字列を指定する⽅が適切ではないか？ Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ContentDescription⾒直しのチェックポイント 86
87. • ⽂字列が指定されている場合 ◦ nullではなく、⽂字列指定が適切なケース？ ◦ ローカライズされている？ （英語のみとなっていない？） ◦ 指定された⽂字列は適切？ （ファイル名や社内⽤語となっていない？） Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ContentDescription⾒直しのチェックポイント 87
88. ⼿動テストをしてみる TalkBack / スイッチアクセス 3 Step3. 今⽇からできる！アクセシビリティ！ 88
89. （参考）アクセシビリティチェック • ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 • ツールを使⽤したテスト ユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 • ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 • ユーザテスト 実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 https://developer.android.com/guide/topics/ui/accessibility/testing Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 89
90. （参考）アクセシビリティチェック https://developer.android.com/guide/topics/ui/accessibility/testing こ れ • ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 • ツールを使⽤したテスト ユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 • ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 • ユーザテスト 実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 90
91. ⼿動テストの必要性 ツール類を使⽤したテストは 効率的 & 簡単 に改善する上で、 もちろん積極的に活⽤したい。 ⼀⽅で、実動作の確認ではじめてわかる挙動もあるため、 TalkBackとスイッチアクセスでの⼿動テストは是⾮⾏いたい 💪 ⼿動テストで判明して、⽇経電⼦版アプリで対応した事例を紹介 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 91
92. <html lang=”en”> となっていた 🙅 事例1：HTMLのlang属性 ⽇本語で書かれたHTMLページをWebViewで表⽰。 読み上げが聞き取れない。 英語や中国語(?)が混ざっているよう。 現象 原因 解決策 <html lang=”ja”> とすることで、聞き取り可能となった 🙆 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 92
93. 事例2：⾮表⽰のつもりのUIが読み上げられる 朝刊‧⼣刊タブにて、記事⾒出しの リストアイテムを⼀つずつ読み上げた後に 正体不明の「ラベルなし」の読み上げが発⽣。 朝刊‧⼣刊タブでは、3つのUIを出し分けており、 問題が発⽣する画⾯と発⽣しない画⾯があった。 現象 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 93
94. 無料会員向け画⾯ 現象発⽣ 有料会員朝⼣刊画⾯ 現象発⽣ 有料会員休刊画⾯ 現象発⽣せず Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 94
95. 休刊画⾯のScrollViewにフォーカスが当たっていた 原因 親ViewGroup 朝⼣刊画⾯ ViewGroup 無料会員向け画⾯ ViewGroup 休刊画⾯ ViewGroup ScrollView LinearLayout View A View B View C Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる VISIBLE のまま GONE にセット 95
96. 休刊画⾯のScrollViewのVisibilityを切り替えるようにした 解決策 親ViewGroup 朝⼣刊画⾯ ViewGroup 無料会員向け画⾯ ViewGroup 休刊画⾯ ViewGroup ScrollView LinearLayout View A View B View C GONE にセット Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 96
97. 事例3：Overlayされた画⾯が読み上げられる 現象 画⾯A 画⾯B 画⾯Aの上に 画⾯BがOverlayしているケースで、 画⾯AのUI要素が読み上げられていた。 Overlayされている時は、 読み上げられないようにしたい。 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 97
98. 個別記事画⾯（左）と その上にボトムシートを展開した画⾯（右） 個別記事画⾯の記事⾒出しが ⾒えないのに読み上げられていた 🙅 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 98
99. BottomSheetBehaviorを使って実装していれば、 setUpdateImportantForAccessibilityonSiblings(true) で 完全にOverlayされた画⾯のAccessibilityを無効化できる。 ↑の内部実装は、ボトムシートの状態に応じて importantForAccessibility 属性を切り替えている ⾒えないUIのimportantForAccessibility属性が有効だった 原因 解決策 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 99
100. 今回は実装の都合上、 setUpdateImportantForAccessibilityonSiblings が 効かなかったため、⾃前でimportantForAccessibilityを切り替え Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 100
101. できた！ アクセシビリティ向上！ 今⽇のたった10分からできるアクセシビリティ向上⼿段 • ツールからの指摘を修正してみる • ContentDescriptionを⾒直してみる • ⼿動テストをしてみる Step3. 今⽇からできる！アクセシビリティ！ 101
102. アクセシビリティ向上で 勉強になったもの ! 最後に...！ 102
103. 最後に...！ アクセシビリティ向上で勉強になったもの • DroidKaigi 2021, 2022 の Tiphaine さん の発表 DroidKaigi 2021 - 2021年こそアクセシビリティと向き合おう / Tiphaine (ティフェン) [JA] DroidKaigi 2022 - 社内でのモバイルアクセシビリティ推進 | Tiphaine (ティフェン) [JA] • freee さんの勉強会 freee Tech Night 「モバイルアプリのアクセシビリティの問題はチームで解決！」 秋だ！モバイルアプリもアクセシビリティーやっていこう！ --freeeのモバイルチェッックリストの紹介-- 103
104. 最後に...！ アクセシビリティ向上で勉強になったもの • Appt（オランダの⾮営利団体） https://appt.org/en/docs/android/samples • Android View GitHub - android/trackr • Jetpack Compose Jetpack Compose のユーザー補助 （Codelab） 104
105. おしまい 105
106. https://hack.nikkei.com/jobs/android/ ⽇経電⼦版 Androidエンジニア 募集中 106
107. おしまい 本発表がアクセシビリティ向上に取り組む きっかけになったら嬉しいです 😉 最後までご清聴ありがとうございました！ 107