Accessibility in CATS

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. CATS Androidチームの取り組み
    min
    Android JetpackにAppCrawlerが追加される
    配布されたjarファイルをデコンパイルしてみる
    Accessibility Test Frameworkがつかわれているらしい
    ↓
    ↓
    Accessbility Test Frameworkのソースコードに含まれるprotoで
    metaファイルを復元できた
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. まとめ
    min
    

    View Slide

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

    View Slide

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

    View Slide