Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility in CATS

itome
September 10, 2019

Accessibility in CATS

itome

September 10, 2019
Tweet

More Decks by itome

Other Decks in Technology

Transcript

  1. CATS Android チームの
    アクセシビリティに関する
    取り組み
    CA.apk #

    View full-size slide

  2. ⾃⼰紹介
    https://twitter.com/itometeam
    https://github.com/itome
    https://itome.team
    . min
    塚本武志
    CyberAgent CATS

    View full-size slide

  3. アクセシビリティって何?
    min

    View full-size slide

  4. アクセシビリティって何?
    ⼀般にアクセシビリティとは、アクセスのしやすさを意味し
    ます。転じて、製品やサービスの利⽤しやすさという意味で
    も使われます。似た意味をもつ⾔葉にユーザビリティがあり
    ますが、アクセシビリティはユーザビリティより幅広い利⽤
    状況、多様な利⽤者を前提とします。
    ウェブアクセシビリティ基盤委員会 (https://waic.jp/knowledge/accessibility/)
    min

    View full-size slide

  5. アクセシビリティって何?
    ⼀般にアクセシビリティとは、アクセスのしやすさを意味し
    ます。転じて、製品やサービスの利⽤しやすさという意味で
    も使われます。似た意味をもつ⾔葉にユーザビリティがあり
    ますが、アクセシビリティはユーザビリティより幅広い利⽤
    状況、多様な利⽤者を前提とします。
    ウェブアクセシビリティ基盤委員会 (https://waic.jp/knowledge/accessibility/)
    min

    View full-size slide

  6. アクセシビリティって何?
    min
    アプリユーザーにはさまざまな属性がある
    ‧視覚に障害を抱えている⼈
    ‧聴覚に障害を抱えている⼈
    ‧ディスプレイの⾒⾟い屋外で使っている⼈
    ‧スマホの操作に慣れていない⼈
    ‧キーボードでアプリを操作している⼈
    ‧etc
    ‧⼿が⼩さい⼈ / ⼤きい⼈

    View full-size slide

  7. アクセシビリティって何?
    min
    様々なユーザーがアプリのすべての機能に
    (できるだけ簡単に)アクセスできること

    View full-size slide

  8. アクセシビリティに
    配慮することの意義
    min

    View full-size slide

  9. アクセシビリティに配慮することの意義
    min
    世界の⼈⼝の15%* が何らかの障害を抱えている
    → アクセシビリティに配慮することで、15%の潜在的
    ユーザーに使ってもらえる可能性を広げられる
    * https://developer.android.com/guide/topics/ui/accessibility/index.html より

    View full-size slide

  10. アクセシビリティに配慮することの意義
    min
    障害を持たないユーザーでも状況によって普段通りの操作が難しくなる
    → アクセシビリティに配慮することで、障害を持たない
    ユーザーにとっての使いやすさも向上する
    * https://developer.android.com/guide/topics/ui/accessibility/index.html より

    View full-size slide

  11. 開発者が気をつけるべきこと
    min

    View full-size slide

  12. 開発者が気をつけるべきこと
    min
    ヒューマンリーダビリティと
    マシンリーダビリティ
    https://speakerdeck.com/cybozuinsideout/ - -accessibility
    https://material.io/design/usability/accessibility.html

    View full-size slide

  13. 開発者が気をつけるべきこと
    min
    ヒューマンリーダビリティ
    すべての⼈が⾝体的に知覚‧理解‧操作できること
    ⽂字やアイコンの背景のコントラスト
    が低いと、コンテンツを判別しづらい

    View full-size slide

  14. 開発者が気をつけるべきこと
    min
    ヒューマンリーダビリティ
    すべての⼈が⾝体的に知覚‧理解‧操作できること
    ⽂字やアイコンの背景のコントラスト
    が低いと、コンテンツを判別しづらい

    View full-size slide

  15. 開発者が気をつけるべきこと
    min
    ヒューマンリーダビリティ
    すべての⼈が⾝体的に知覚‧理解‧操作できること
    エラーを⽰す⾚いラインを表⽰する
    だけでは、どう対応すればいいか
    理解することができない

    View full-size slide

  16. 開発者が気をつけるべきこと
    min
    ヒューマンリーダビリティ
    すべての⼈が⾝体的に知覚‧理解‧操作できること
    エラーを⽰す⾚いラインを表⽰する
    だけでは、どう対応すればいいか
    理解することができない

    View full-size slide

  17. 開発者が気をつけるべきこと
    min
    ヒューマンリーダビリティ
    すべての⼈が⾝体的に知覚‧理解‧操作できること
    ボタンのアイコンが⼩さい場合でも
    ⼗分なタッチ領域を確保する

    View full-size slide

  18. 開発者が気をつけるべきこと
    min
    マシンリーダビリティ
    コンテンツが機械によって解釈されうること
    レイアウトの適切なグルーピングに
    よって、コンテンツのまとまりを
    機械が理解できる

    View full-size slide

  19. 開発者が気をつけるべきこと
    min
    マシンリーダビリティ
    コンテンツが機械によって解釈されうること
    アイコンにテキストによる説明が
    を追加することで、Talkbackなどに
    よる読み上げが可能になる

    View full-size slide

  20. CATS Androidチームの取り組み
    min

    View full-size slide

  21. CATS Androidチームの取り組み
    min
    1⼈から始められること
    ‧⾃分で開発しているアプリを実際にTalkbackを
    オンにして⽬を瞑って使ってみる
    ‧ユーザー補助検証ツールを使って各画⾯のテストをしてみる
    ‧調べたこと、実践していることをドキュメントにまとめておく

    View full-size slide

  22. CATS Androidチームの取り組み
    min
    1⼈から始められること
    ‧ユーザー補助検証ツールを使って各画⾯のテストをしてみる
    実機上で画⾯のスクリーンショット
    を取って⾃動的にテストしてくれる
    https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja

    View full-size slide

  23. CATS Androidチームの取り組み
    min
    チームで取り組んでいること
    ‧アクセシビリティの対応⽅針の統⼀
    ‧conentDescriptionの命名規則の統⼀
    ‧アクセシビリティに関する相互レビュー
    ‧Talkbackの挙動の統⼀(グルーピングなど)

    View full-size slide

  24. CATS Androidチームの取り組み
    min
    アクセシビリティの⾃動テスト
    Android Test Framework for Androidを使ったUIテスト
    くわしくは → https://bit.ly/ iMw

    View full-size slide

  25. CATS Androidチームの取り組み
    min
    アクセシビリティの⾃動テスト
    Android Test Framework for Androidを使ったUIテストのデメリット
    ‧テストのためにRobolectricを使ったUIテストを書く必要がある
    ‧画⾯を追加するたびに、Activityを表⽰→テストという
     コードの追加が必要
    ‧テキストでしかエラーを確認できない

    View full-size slide

  26. CATS Androidチームの取り組み
    min
    アクセシビリティの⾃動テスト

    View full-size slide

  27. CATS Androidチームの取り組み
    min
    Google Play ConsoleのPre-launch report

    View full-size slide

  28. CATS Androidチームの取り組み
    min
    Google Play ConsoleのPre-launch report
    ↑Test Labの結果からアクセシビリティのチェックをしているらしい

    View full-size slide

  29. CATS Androidチームの取り組み
    min
    Test Labの出⼒ファイルを確認してみる
    各画⾯のスクリーンショットの他に
    スクリーンショットに対応した
    “accessibility.meta” がある

    View full-size slide

  30. CATS Androidチームの取り組み
    min
    Test Labの出⼒ファイルを確認してみる
    metaファイルの中⾝は不明なバイナリ
    ⾒た感じどうやらProtocolBufferのバイナリファイルっぽい


    もとのProtoファイルが不明なので復元できない

    View full-size slide

  31. CATS Androidチームの取り組み
    min
    Android JetpackにAppCrawlerが追加される
    Firebase Test Labで使われているRoboテスト⽤のライブラリ
    ソースコードは公開されておらず、jarをダウンロードして利⽤

    View full-size slide

  32. CATS Androidチームの取り組み
    min
    Android JetpackにAppCrawlerが追加される
    配布されたjarファイルをデコンパイルしてみる
    Accessibility Test Frameworkがつかわれているらしい


    Accessbility Test Frameworkのソースコードに含まれるprotoで
    metaファイルを復元できた

    View full-size slide

  33. CATS Androidチームの取り組み
    min
    Android JetpackにAppCrawlerが追加される
    復元したデータはテストの結果ではなく、テストを実⾏する前の
    View階層の抽象データ
    Accessibility Test Frameworkを使って復元したデータをテスト


    テスト結果をもとにimagemagickを使ってスクリーンショットに反映

    View full-size slide

  34. CATS Androidチームの取り組み
    min

    View full-size slide

  35. CATS Androidチームの取り組み
    min
    Firebase Test Labを使ったアクセシビリティテストのメリット
    ‧テストコードを書く必要がない
    ‧CIに組み込むことができる
    ‧グラフィカルに結果を確認できる

    View full-size slide

  36. CATS Androidチームの取り組み
    min
    Fastlaneのプラグインとして使えるようにしました

    View full-size slide

  37. まとめ
    min

    View full-size slide

  38. まとめ
    min
    ‧CATS Androidチームはアクセシビリティ対応を進めています!
    ‧アクセシビリティ対応は1⼈でも始めることができる
    ‧Firebase Test Labを使った⾃動テストを導⼊することで
     ⼈がチェックするコストを減らすことができます

    View full-size slide

  39. ありがとうございました
    https://twitter.com/itometeam
    https://github.com/itome
    https://itome.team
    塚本 武志

    View full-size slide