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

by 日本経済新聞社エンジニア採用事務局

Slide 1

Slide 1 text

できる！アクセシビリティ向上 DroidKaigi 2023 2023/9/15 17:00〜17:40 @Arctic Fox Yuri Ogura

Slide 2

Slide 2 text

⽇経電⼦版紙⾯ビューアー ● ソフトウェアエンジニア ● 株式会社⽇本経済新聞社（2023年2⽉〜） ● ⽇経電⼦版‧紙⾯ビューアー開発⾃⼰紹介 Yuri Ogura 2

Slide 3

Slide 3 text

アクセシビリティ向上の第⼀歩を踏み出すことが⽬標アジェンダ Step 1. 知るぞ！アクセシビリティ！ Step 2. 取り組んだ！アクセシビリティ！ Step 3. 今⽇からできる！アクセシビリティ！ 3

Slide 4

Slide 4 text

Step 1. 知るぞ！アクセシビリティ！アクセシビリティという⾔葉の意味から、アプリでできる具体的なアクセシビリティ考慮、⽀援技術（TalkBackやスイッチアクセス）の使い⽅までご紹介します 4

Slide 5

Slide 5 text

「アクセシビリティ」とは？よく似た⾔葉に、「ユーザビリティ」という⾔葉があるアクセシビリティ＝「あるユーザにとって、そもそも使えるか？」 Step1. 知るぞ！アクセシビリティ 5

Slide 6

Slide 6 text

ISO 9241-11におけるユーザビリティの定義特定の利⽤状況において、特定のユーザーによって、ある製品が、指定された⽬標を達成するために⽤いられる際の、有効さ、効率、ユーザーの満⾜度の度合い JIS X 8341 におけるアクセシビリティの定義様々な能⼒をもつ最も幅広い層の⼈々に対する製品，サービス，環境⼜は施設（のインタラクティブシステム）のユーザビリティ Step1. 知るぞ！アクセシビリティ - 「アクセシビリティ」とは？ 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

ユーザビリティは⼭の頂点を⾼める活動アクセシビリティは⼭の裾野を広げる活動幅広い層の⼈々にとって使える特定のユーザー（状況）に響く Step1. 知るぞ！アクセシビリティ - 「アクセシビリティ」とは？ 8

Slide 9

Slide 9 text

⾳声モビリティ視覚皆んなが「使える」アプリにするために（´-`）.｡oO（様々な能⼒をもつ最も幅広い層の⼈々？）我々Android Developerとして、アプリでできる考慮を考えてみる Step1. 知るぞ！アクセシビリティ 9

Slide 10

Slide 10 text

● 全盲視覚的な情報を全く、またはほとんど得られない ● 弱視、加齢による⽼眼や⽩内障視⼒が低い状態の他、⾒える範囲が狭い、光をまぶしく感じる、夜や暗いところでは⾒えにくくなる、といった状態も Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために視覚 - 幅広い層の⼈々 10

Slide 11

Slide 11 text

● 様々な都合により、明るい / 暗い環境 ○ 外回りの仕事で、直射⽇光差し込む中でアプリを利⽤ ○ 寝ている家族がおり、部屋が真っ暗な中でアプリを利⽤ Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために視覚 - 幅広い層の⼈々 11

Slide 12

Slide 12 text

● TalkBackでアプリを利⽤できるようにする → 画⾯を⾒ずにデバイスを操作できる ● ダークモードに対応する → まぶしさを軽減できる Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために視覚 - アプリでできる考慮 12

Slide 13

Slide 13 text

● ⼗分なコントラストを取る → ⾒えにくさを軽減できる ● 端末設定の⽂字サイズ / 表⽰サイズを拡⼤してもレイアウトが乱れないようにする Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために視覚 - アプリでできる考慮 13

Slide 14

Slide 14 text

● 全ろう：全く⽿が聞こえない状態 ● 難聴：⽿が聞こえにくい状態 ● ⺟国語ではない ● 騒⾳下や⾳を出せない環境 Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために聴覚 - 幅広い層の⼈々 14

Slide 15

Slide 15 text

● 字幕などの視覚情報を提供する ● ⾳声/動画コンテンツの再⽣‧停⽌をできるようにする Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために聴覚 - アプリでできる考慮 15

Slide 16

Slide 16 text

● 上肢障がい、⼀時的な怪我、加齢ものをつかむ‧持ち上げる‧⽀える、⼿指を細かく動かす、などの動作を⾏うことができない状態 ● ⽚⼿の塞がり外出時に⼦供と繋ぐ⼿を離せない状態など Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするためにモビリティ - 幅広い層の⼈々 16

Slide 17

Slide 17 text

● スイッチアクセスでアプリを利⽤できるようにする → 画⾯に触れずにデバイスを操作できる ● タップ範囲を拡⼤し、タップしやすくする ● ピンチ操作に代替を⽤意し、⽚⼿でも使⽤しやすくする Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするためにモビリティ - アプリでできる考慮 17

Slide 18

Slide 18 text

● アクセシビリティの対象者は「全員」 ● アプリでできる考慮も多岐にわたる ○ TalkBack、スイッチアクセス、ダークモード、⽂字/表⽰サイズ変更、再⽣/停⽌、タップ範囲、etc. ○ 既にできていることもあるのではないでしょうか？ Step1. 知るぞ！アクセシビリティここまでのまとめ 18

Slide 19

Slide 19 text

Step1. 知るぞ！アクセシビリティ TalkBackを使ってみよう TalkBackとは... ● Androidデバイスに搭載されているスクリーンリーダー ● TalkBackによる読み上げや専⽤ジェスチャー操作により、画⾯を⾒ずにデバイスを使⽤することができる 19

Slide 20

Slide 20 text

〜 TalkBackデモ〜起動⽅法や基本操作を⼀緒に覚えていきましょう〜 20

Slide 21

Slide 21 text

TalkBack を On / Oﬀ にする【基本】設定アプリ > [ユーザー補助] > [TalkBack] https://play.google.com/store/apps/details? id=com.google.android.marvin.talkback Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 21

Slide 22

Slide 22 text

TalkBack を On / Oﬀ にする【開発時】ショートカットやadbコマンドがオススメ！特にTalkBackの操作に慣れないうちは、設定アプリまで戻ってOﬀにすることが難しい... Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう 22

Slide 23

Slide 23 text

ショートカットで On / Oﬀ にする [TalkBackのショートカット] を設定する Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみようショートカット例  ● 音量ボタン大と小の同時長押し  ● ユーザー補助機能ボタン  23

Slide 24

Slide 24 text

adbコマンドで On / Oﬀ にする Settings.Secure の設定値を変更 adb shell settings put secure enabled_accessibility_services {accessibility provider} ● Onにするとき com.google.android.marvin.talkback /com.google.android.marvin.talkback.TalkBackService ● Oﬀにするとき null Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう https://developer.android.com/reference/android/provider/Settings.Secure #ENABLED_ACCESSIBILITY_SERVICES 24

Slide 25

Slide 25 text

Step1. 知るぞ！アクセシビリティフォーカスされた画⾯要素が緑枠で囲まれ、⾳声が読み上げられる読み上げ：「ネットワークとインターネット、モバイル、Wi-Fi、アクセスポイント」基本操作① 読み上げ 25

Slide 26

Slide 26 text

Step1. 知るぞ！アクセシビリティ画⾯上を１本指で１回タッチすると、フォーカスが移動して⾳声が読み上げられる画⾯上をタッチしたまま、指を滑らせるようにしても指の下の画⾯要素にフォーカスが移動し、⾳声が読み上げられる基本操作② タッチでフォーカスを移動 26

Slide 27

Slide 27 text

Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう基本操作③ 前後の画⾯要素へ移動する前の画⾯要素へ【左へスワイプ】次の画⾯要素へ【右へスワイプ】 27

Slide 28

Slide 28 text

Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう「ネットワークと...アクセスポイント、ダブルタップできるメニューです」１本の指でダブルタップすると選択（画⾯遷移）できる基本操作④ 画⾯要素を選択するこの項⽬を選択したい 28

Slide 29

Slide 29 text

Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう基本操作⑤ システムのジェスチャー操作⼀本指の代わりに、⼆本指で⾏うことができる（マルチフィンガージェスチャー対応時）例：通知センターを表⽰したい ● TalkBack OFF 時⼀本指で上から下にスワイプ ● TalkBack ON 時⼆本指で上から下にスワイプ 29

Slide 30

Slide 30 text

Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう ● 以上を覚えれば、TalkBackである程度⾃在に操作可能 ● 他にも１〜４本の指を使って様々な操作を⾏うことができる ※ TalkBackバージョンによる差分あり ※ 操作⽅法の⼀覧はドキュメント参照 👀 https://support.google.com/accessibility/android/answer/6151827 30

Slide 31

Slide 31 text

Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう開発時に便利な設定 [TalkBack] > [設定] > [詳細設定] > [デベロッパー向けの設定] > [⾳声出⼒の表⽰] ONで画⾯下部に読み上げ内容が表⽰される。 → ⽂⾯上でのコミュニケーションに便利 ✨ ⾳声出⼒の表⽰, ON, スイッチ 31

Slide 32

Slide 32 text

Step1. 知るぞ！アクセシビリティスイッチアクセスを使ってみようスイッチアクセスとは... ● Androidデバイスを外部デバイスなどで操作する機能 ● スイッチアクセスによるスキャン（※）と選択により、画⾯にタップすることなくデバイスを操作できる ※ 画⾯上の選択可能な項⽬を、⾃動で順番にハイライト表⽰ https://www.youtube.com/watch?v=rAIXE6ilRQ0 32

Slide 33

Slide 33 text

https://www.ablenetinc.com/ blue2-bluetooth-switch/ スイッチデバイスの例 Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう https://www.ablenetinc.com/ micro-light-switch/ ● ２つのボタンで操作できる機器 ● ごくわずかな⼒で操作できる機器 ● 他にも、⾜で操作するものや、スティック型のもの、頭で押しやすいものなど、多様なものがある 33

Slide 34

Slide 34 text

Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう顔の動き（左）に対して様々な操作（右）を割り当てることができるカメラスイッチ 34

Slide 35

Slide 35 text

〜スイッチアクセスデモ〜起動⽅法や基本操作を⼀緒に覚えていきましょう〜 35

Slide 36

Slide 36 text

Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみようスイッチアクセスを On / Oﬀ にする【基本】設定アプリ > [ユーザー補助] > [スイッチアクセス] https://play.google.com/store/apps/details? id=com.google.android.accessibility.switchaccess 36

Slide 37

Slide 37 text

スイッチアクセスを On / Oﬀ にする【開発時】スイッチアクセスも、TalkBackと同様にショートカットやadbコマンドを使⽤可能（ショートカットはTalkBackと同じのため省略） Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 37

Slide 38

Slide 38 text

adbコマンドで On / Oﬀ にする Settings.Secure の設定値を変更 adb shell settings put secure enabled_accessibility_services {accessibility provider} ● Onにするとき com.google.android.accessibility.switchaccess /com.android.switchaccess.SwitchAccessService ● Oﬀにするとき null Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう https://developer.android.com/reference/android/provider/Settings.Secure #ENABLED_ACCESSIBILITY_SERVICES 38

Slide 39

Slide 39 text

スイッチデバイスを持っていなくても 🙆 開発者向けに、Androidデバイスの⾳量ボタンを割り当てることができるようになっている！ [スイッチアクセス] > [設定] > > [スキャン⽤のスイッチを割り当てる] 詳細は以下ドキュメント参照 https://developer.android.com/guide/topics/ui/accessibility/test ing#switch-access Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう 39

Slide 40

Slide 40 text

Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう基本操作① 画⾯要素を移動する【次へ】を割り当てたスイッチを押下例：⾳量⼩ボタン次の選択可能な画⾯要素へ移動できる 40

Slide 41

Slide 41 text

Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう基本操作② 画⾯要素を選択する【選択】を割り当てたスイッチを押下例：⾳量⼤ボタン 41

Slide 42

Slide 42 text

Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう基本操作③ スクロールをする選択選択 42

Slide 43

Slide 43 text

Step1. 知るぞ！アクセシビリティ TalkBackとスイッチアクセスの⼀番の習得⽅法は実際に操作してみることです。本資料やドキュメントを参照しながら、ぜひまずは触ってみてください 💗 43

Slide 44

Slide 44 text

⽇経電⼦版におけるアクセシビリティ向上施策とそこから得た気付きをご紹介します Step 2. 取り組んだ！アクセシビリティ！ 44

Slide 45

Slide 45 text

● ⽇本経済新聞社が提供するニュースメディア ● 朝刊‧⼣刊及び電⼦版オリジナル記事 ● GooglePlayには、Android版とWear OS版電⼦版有料会員数 87万⼈無料登録会員を含む電⼦版会員数 612万⼈ → 幅広い⼈々に使える必要がある⽇経電⼦版とは Step2. 取り組んだ！アクセシビリティ 45

Slide 46

Slide 46 text

施策⽴案⾒積もりリリース開発&QA 優先度決め Step2. 取り組んだ！アクセシビリティ⽇経電⼦版のアクセシビリティ向上の流れ 46

Slide 47

Slide 47 text

施策⽴案⾒積もりリリース開発&QA 優先度決め Step2. 取り組んだ！アクセシビリティ⽇経電⼦版のアクセシビリティ向上の流れ 47

Slide 48

Slide 48 text

取り組みたいアクセシビリティ課題を施策として⽴案 ● TalkBackやスイッチアクセスなどで使えるようにしたい ● Android14最⼤⽂字サイズ拡⼤で⽣じる表⽰崩れを修正したい ● ダークモードに対応したい弊社のフローに従い、資料を作成して施策発表会の場で提案した Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ施策⽴案 48

Slide 49

Slide 49 text

施策⽴案⾒積もりリリース開発&QA 優先度決め Step2. 取り組んだ！アクセシビリティ⽇経電⼦版のアクセシビリティ向上の流れ 49

Slide 50

Slide 50 text

Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ優先度決め〜アクセシビリティタスク〜他にも開発すべきことがあり、アクセシビリティタスクの全てに今すぐ着⼿することは難しかった。そこで、以下の観点で優先度を決定。 ① 他の開発の合間に進めやすいか？（画⾯単位、コンポーネント単位での対応 & リリースが可能か） ②Androidで他の代替⼿段を以てアプリを使⽤することができるか？（Androidユーザー補助機能など） 50

Slide 51

Slide 51 text

TalkBack‧ スイッチアクセス ① OK ② なし Android14 表⽰崩れ ① OK ② タブレット拡⼤機能ダークモード ① 難しい ② ⾊反転機能 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ優先度決め〜アクセシビリティタスク〜 ① 他の開発の合間に進めやすいかどうか ② Androidで他の代替⼿段を以てアプリを使⽤することができるか 51

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ簡略化のために、このページ以降のスライドでは「スイッチアクセス」の表記を省略します。実際には「TalkBack」と並⾏して改善を⾏いました。 53

Slide 54

Slide 54 text

シーン画⾯名現状動作改善案画⾯優先度使える度総合的優先度初回導線〇〇画⾯ボタンが「ラベルなし」と読まれるボタン内容をわかるようにする個別記事個別記事画⾯ボトムシートが開けない開けるようにする朝⼣刊⽇付選択画⾯ … … 各画⾯をTalkBackで実際に動かしてみて（⼿動テスト）、改善点のある画⾯を以下のような表にリストアップしていった Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ優先度決め〜TalkBackタスク〜 54

Slide 55

Slide 55 text

各項⽬で画⾯的優先度 × 使える度から総合的優先度を決定 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ優先度決め〜TalkBackタスク〜初回導線‧ 主要画⾯⾏えない遷移‧ 意味の通じない読み上げ優先度⾼ × = PVが少ない画⾯操作は可能‧ 意味は通じる優先度低 × = 55

Slide 56

Slide 56 text

シーン画⾯名現状動作改善案画⾯優先度使える度総合的優先度初回導線〇〇画⾯ … … ⾼絶望的 S 〇〇〇〇画⾯ … … ⾼⼀応使える B 〇〇〇〇画⾯ … … 中使えない B 〇〇〇〇画⾯ … … 低⼀応使える C Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ優先度決め〜TalkBackタスク〜優先度をレベル分け 56

Slide 57

Slide 57 text

施策⽴案⾒積もりリリース開発&QA 優先度決め Step2. 取り組んだ！アクセシビリティ⽇経電⼦版のアクセシビリティ向上の流れ 57

Slide 58

Slide 58 text

● 先ほど作成した表を、総合的優先度が⾼い順に並び替え ● チームで⼀項⽬ずつ⾒積もりを実施 ● 優先度レベル別の⽬標対応完了時期を設定（優先度レベル S は ○⽉○⽇までに完了、など） Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ TalkBackタスク⾒積もり 58

Slide 59

Slide 59 text

施策⽴案⾒積もりリリース開発&QA 優先度決め Step2. 取り組んだ！アクセシビリティ⽇経電⼦版のアクセシビリティ向上の流れ 59

Slide 60

Slide 60 text

開発フェーズに到達したら、粛々と対応するのみ💪 Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ開発 Before & After のTalkBackでの挙動を撮影してPRに添付するルール対応内容を振り返りやすくすることで、継続的なアクセシビリティ向上に繋がることを期待 60

Slide 61

Slide 61 text

● TalkBackに関するドキュメントを⽤意し、 QAさんにも基本的な操作⽅法を習得いただいた ● 両端のサポートOSバージョンで実施 ○ バージョン差分があるケースもあった Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ QA 61

Slide 62

Slide 62 text

施策⽴案⾒積もりリリース開発&QA 優先度決め Step2. 取り組んだ！アクセシビリティ⽇経電⼦版のアクセシビリティ向上の流れ 62

Slide 63

Slide 63 text

Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れリリース 🎉 ⼀刻でも早く、必要とするユーザーに届きますように 🙏 改善した画⾯から都度、次回のリリースに含めていった 63

Slide 64

Slide 64 text

① TalkBack動作を伝えるためには動画が第⼀！ ② ハードルが低く、実はめちゃくちゃ取り組みやすかった！ ③ （はじめてTalkBackと向き合う場合）対応案の計画、⾒積もりは段階分けした⽅が良かった！ Step2. 取り組んだ！アクセシビリティ TalkBack改善で得た気付き３選 64

Slide 65

Slide 65 text

施策⽴案‧⾒積もりフェーズで、 TalkBackの現状動作を伝えることに苦労した。⼝頭や⽂⾯での説明では伝わりにくく、実動作をデモや動画で⾒せられるよう準備しておくべきだった。 Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ① TalkBack動作を伝えるためには動画が第⼀！ 65

Slide 66

Slide 66 text

⼀⽅で開発‧QAフェーズでは IssueやPRに動画を添付してやり取りしていたため挙動を齟齬なく伝えることができて良かった 🙆 Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ① TalkBack動作を伝えるためには動画が第⼀！ 66

Slide 67

Slide 67 text

● 1つの⼩さなUIから単発で取り組める ● 多くの対応⽅法では、ユーザー補助機能⾮利⽤時への影響なし（デグレしにくい！） ● 様々な画⾯、機能を⾒る機会になるので、新メンバーオンボーディングにも向いていそう 👀 （実際に私は⼊社半年で、これを機に知る画⾯、機能もあった） Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ② ハードルが低く、実は取り組みやすかった！ 67

Slide 68

Slide 68 text

【失敗】 ● ⾃分含め、メンバーはTalkBack初⼼者だった ● 洗い出したタスクの全てについての対応案を事前に検討し⾒積もりを⾏ったが、膨⼤な時間がかかった ○ 現状や期待動作、実装⽅法のイメージの共有が難しかった ○ ⾒積もりがバラつき、議論の時間を要した Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ③ 対応案の計画、⾒積もりは段階分けすればよかった！ 68

Slide 69

Slide 69 text

【改善】 ● 対応案の計画、⾒積もりを「最初に全て⾏う」のではなく「段階を分けて⾏う」ようにすれば良かった ● ⼀部対応を進めることで、TalkBackそのものや実装への理解が深まる。TalkBackへの共通認識ができた後に残りを計画、⾒積もりした⽅が時間的に効率良く、かつ精度も⾼く議論できたはず Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選 ③ 対応案の計画、⾒積もりは段階分けすればよかった！ 69

Slide 70

Slide 70 text

Step 3. 今⽇からできる！アクセシビリティ！今⽇のたった10分からできそう、そう思えるようなアクセシビリティ向上の具体的な⼿段を3つご紹介します 70

Slide 71

Slide 71 text

ツールからの指摘を修正してみる 1 Step3. 今⽇からできる！アクセシビリティ！ 71

Slide 72

Slide 72 text

（参考）アクセシビリティチェックの⽅法 ● ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 ● ツールを使⽤したテストユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 ● ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 ● ユーザテスト実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 https://developer.android.com/guide/topics/ui/accessibility/testing Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 72

Slide 73

Slide 73 text

（参考）アクセシビリティチェックの⽅法これ ● ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 ● ツールを使⽤したテストユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 ● ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 ● ユーザテスト実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 https://developer.android.com/guide/topics/ui/accessibility/testing Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 73

Slide 74

Slide 74 text

ユーザー補助検証ツール 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

Slide 75

Slide 75 text

ユーザー補助検証ツールコントラストを上げた⽅が良いですよ〜フォントサイズ拡⼤で表⽰崩れるかもしれませんよ〜 Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる 75

Slide 76

Slide 76 text

ContentDescriptionを⾒直してみる 2 Step3. 今⽇からできる！アクセシビリティ！ 76

Slide 77

Slide 77 text

ContentDescription ? ● 主にアクセシビリティ⽬的で使⽤するプロパティ ● 使⽤例 ○ 画像やアイコンの代替テキスト（≒ Webのalt属性） ○ TalkBackでの読み上げを理解しやすくする例えば、UI上では「¥1,000」と表現しているものを読み上げでは「1,000円」とする Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 77

Slide 78

Slide 78 text

ContentDescription ? 特に「画像やアイコンの代替テキスト」は重要 ● Android Viewでは未指定でもビルドできる ● Jetpack Composeでは未指定だとビルドできないエラー😢 Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる 78

Slide 79

Slide 79 text

? ? ? ?  実装例：画像 contentDescriptionの指定の仕⽅によって、どのように読み上げられるか確認してみましょう Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ① null ② 空⽂字 ③ 適切な⽂字列 79

Slide 80

Slide 80 text

① contentDescription = null Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる画像にフォーカスが当たらないので、画像の存在が伝わらない右へスワイプ 80

Slide 81

Slide 81 text

① contentDescription = null Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ● null が適している例 🙆 ○ 装飾⽬的の画像（画像右） ○ テキストと内容が重複する画像（画像左） 81

Slide 82

Slide 82 text

② contentDescription = ””（空⽂字） Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる画像にフォーカスは当たるが、「ラベルなし」と読み上げられる。 ※ この例のように、フォーカスは当たるが適切な読み上げが付与されていない場合、 TalkBackは「ラベルなし」と読み上げる。ラベルなし 82

Slide 83

Slide 83 text

② contentDescription = ””（空⽂字） Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ● 「ラベルなし」という読み上げでは理解が困難であり、アクセシビリティに⽋ける ● ””（空⽂字）は基本的に指定すべきではない ○ 明確に ① null か、③ 適切な⽂字列を指定すべき 🙆 83

Slide 84

Slide 84 text

③ contentDescription = ” {適切な⽂字列} ” Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる画像にフォーカスが当たり、 contentDescriptionに指定した⽂字列が読み上げられる。アルパカの⾚ちゃんは、⽣後3ヶ⽉で歩けるようになる 84

Slide 85

Slide 85 text

③ contentDescription = ” {適切な⽂字列} ” Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ● ” {適切な⽂字列} ” とするべき例 🙆 ○ ⽂字情報が⼊っている画像（⼀つ前のスライドの例） ○ ボタンとなっている画像やアイコン（右図の例）どのような⽂字列を指定すべきか迷った時は、 Webのalt属性を参考にする（検索する）とサンプルが多い💡 85

Slide 86

Slide 86 text

● nullの場合 ○ そのnull指定は意図されたもの？ ● 空⽂字の場合 ○ null or ⽂字列を指定する⽅が適切ではないか？ Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ContentDescription⾒直しのチェックポイント 86

Slide 87

Slide 87 text

● ⽂字列が指定されている場合 ○ nullではなく、⽂字列指定が適切なケース？ ○ ローカライズされている？（英語のみとなっていない？） ○ 指定された⽂字列は適切？（ファイル名や社内⽤語となっていない？） Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる ContentDescription⾒直しのチェックポイント 87

Slide 88

Slide 88 text

⼿動テストをしてみる TalkBack / スイッチアクセス 3 Step3. 今⽇からできる！アクセシビリティ！ 88

Slide 89

Slide 89 text

（参考）アクセシビリティチェック ● ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 ● ツールを使⽤したテストユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 ● ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 ● ユーザテスト実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 https://developer.android.com/guide/topics/ui/accessibility/testing Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 89

Slide 90

Slide 90 text

（参考）アクセシビリティチェック https://developer.android.com/guide/topics/ui/accessibility/testing これ ● ⼿動テスト TalkBackやスイッチアクセスなどを実際に操作する⽅法 ● ツールを使⽤したテストユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法 ● ⾃動テスト Espressoなどのテストフレームワークを使⽤する⽅法 ● ユーザテスト実際にアプリを使⽤したユーザからフィードバックを受ける⽅法 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 90

Slide 91

Slide 91 text

⼿動テストの必要性ツール類を使⽤したテストは効率的 & 簡単に改善する上で、もちろん積極的に活⽤したい。⼀⽅で、実動作の確認ではじめてわかる挙動もあるため、 TalkBackとスイッチアクセスでの⼿動テストは是⾮⾏いたい 💪 ⼿動テストで判明して、⽇経電⼦版アプリで対応した事例を紹介 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 91

Slide 92

Slide 92 text

となっていた 🙅 事例1：HTMLのlang属性⽇本語で書かれたHTMLページをWebViewで表⽰。読み上げが聞き取れない。英語や中国語(?)が混ざっているよう。現象原因解決策とすることで、聞き取り可能となった 🙆 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 92

Slide 93

Slide 93 text

事例2：⾮表⽰のつもりのUIが読み上げられる朝刊‧⼣刊タブにて、記事⾒出しのリストアイテムを⼀つずつ読み上げた後に正体不明の「ラベルなし」の読み上げが発⽣。朝刊‧⼣刊タブでは、3つのUIを出し分けており、問題が発⽣する画⾯と発⽣しない画⾯があった。現象 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 93

Slide 94

Slide 94 text

無料会員向け画⾯現象発⽣有料会員朝⼣刊画⾯現象発⽣有料会員休刊画⾯現象発⽣せず Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 94

Slide 95

Slide 95 text

休刊画⾯のScrollViewにフォーカスが当たっていた原因親ViewGroup 朝⼣刊画⾯ ViewGroup 無料会員向け画⾯ ViewGroup 休刊画⾯ ViewGroup ScrollView LinearLayout View A View B View C Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる VISIBLE のまま GONE にセット 95

Slide 96

Slide 96 text

休刊画⾯のScrollViewのVisibilityを切り替えるようにした解決策親ViewGroup 朝⼣刊画⾯ ViewGroup 無料会員向け画⾯ ViewGroup 休刊画⾯ ViewGroup ScrollView LinearLayout View A View B View C GONE にセット Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 96

Slide 97

Slide 97 text

事例3：Overlayされた画⾯が読み上げられる現象画⾯A 画⾯B 画⾯Aの上に画⾯BがOverlayしているケースで、画⾯AのUI要素が読み上げられていた。 Overlayされている時は、読み上げられないようにしたい。 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 97

Slide 98

Slide 98 text

個別記事画⾯（左）とその上にボトムシートを展開した画⾯（右）個別記事画⾯の記事⾒出しが⾒えないのに読み上げられていた 🙅 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 98

Slide 99

Slide 99 text

BottomSheetBehaviorを使って実装していれば、 setUpdateImportantForAccessibilityonSiblings(true) で完全にOverlayされた画⾯のAccessibilityを無効化できる。 ↑の内部実装は、ボトムシートの状態に応じて importantForAccessibility 属性を切り替えている⾒えないUIのimportantForAccessibility属性が有効だった原因解決策 Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 99

Slide 100

Slide 100 text

今回は実装の都合上、 setUpdateImportantForAccessibilityonSiblings が効かなかったため、⾃前でimportantForAccessibilityを切り替え Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる 100

Slide 101

Slide 101 text

できた！アクセシビリティ向上！今⽇のたった10分からできるアクセシビリティ向上⼿段 ● ツールからの指摘を修正してみる ● ContentDescriptionを⾒直してみる ● ⼿動テストをしてみる Step3. 今⽇からできる！アクセシビリティ！ 101

Slide 102

Slide 102 text

アクセシビリティ向上で勉強になったもの ! 最後に...！ 102

Slide 103

Slide 103 text

最後に...！アクセシビリティ向上で勉強になったもの ● DroidKaigi 2021, 2022 の Tiphaine さんの発表 DroidKaigi 2021 - 2021年こそアクセシビリティと向き合おう / Tiphaine (ティフェン) [JA] DroidKaigi 2022 - 社内でのモバイルアクセシビリティ推進 | Tiphaine (ティフェン) [JA] ● freee さんの勉強会 freee Tech Night 「モバイルアプリのアクセシビリティの問題はチームで解決！」秋だ！モバイルアプリもアクセシビリティーやっていこう！ --freeeのモバイルチェッックリストの紹介-- 103

Slide 104

Slide 104 text

最後に...！アクセシビリティ向上で勉強になったもの ● Appt（オランダの⾮営利団体） https://appt.org/en/docs/android/samples ● Android View GitHub - android/trackr ● Jetpack Compose Jetpack Compose のユーザー補助（Codelab） 104

Slide 105

Slide 105 text

おしまい 105

Slide 106

Slide 106 text

https://hack.nikkei.com/jobs/android/ ⽇経電⼦版 Androidエンジニア募集中 106

Slide 107

Slide 107 text

おしまい本発表がアクセシビリティ向上に取り組むきっかけになったら嬉しいです 😉 最後までご清聴ありがとうございました！ 107