$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. 「アクセシビリティ」とは?
    よく似た⾔葉に、「ユーザビリティ」という⾔葉がある
    アクセシビリティ

    「あるユーザにとって、そもそも使えるか?」
    Step1. 知るぞ!アクセシビリティ
    5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. ショートカット で On / Off にする
    [TalkBackのショートカット] を設定する
    Step1. 知るぞ!アクセシビリティ - TalkBackを使ってみよう
    ショートカット例

    ● 音量ボタン大と小の同時長押し

    ● ユーザー補助機能ボタン

    23

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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




    42

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    × =
    PVが少ない画

    操作は可能‧
    意味は通じる
    優先度

    × =
    55

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. (参考)アクセシビリティチェックの⽅法


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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. ? ? ? ?

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

    View Slide

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

    View Slide

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

    View Slide

  82. ② contentDescription = ””(空⽂字)
    Step3. 今⽇からできる!アクセシビリティ! - ContentDescriptionを⾒直してみる
    画像にフォーカスは当たるが、「ラベルなし」と読み上げられる。

    この例のように、フォーカスは当たるが
    適切な読み上げが付与されていない場合、
    TalkBackは「ラベルなし」と読み上げる。
    ラベルなし
    82

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  90. (参考)アクセシビリティチェック
    https://developer.android.com/guide/topics/ui/accessibility/testing


    ● ⼿動テスト
    TalkBackやスイッチアクセスなどを実際に操作する⽅法
    ● ツールを使⽤したテスト
    ユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法
    ● ⾃動テスト
    Espressoなどのテストフレームワークを使⽤する⽅法
    ● ユーザテスト
    実際にアプリを使⽤したユーザからフィードバックを受ける⽅法
    Step3. 今⽇からできる!アクセシビリティ! - ⼿動テストをしてみる
    90

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  105. おしまい
    105

    View Slide

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

    View Slide

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

    View Slide