Accessibility in CATS - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CATS Androidチームの取り組み min

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

CATS Androidチームの取り組み min

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

まとめ min

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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