2021年こそアクセシビリティと向き合おう（40分版）/ It s 2021 let s support accessibility

"It's 2021, let's support accessibility" (40min version)
DroidKaigi 2021 - Day 3 (2021/10/21)

PDFでgifが動かず、分かりにくくなるところは、動画もしくはグーグルスライドでご確認ください：
https://docs.google.com/presentation/d/1rD9ZhsJR9ekSXrSQVEyoxO-A8mAgXuFwxpeffaNVRmk/edit?usp=sharing

https://youtu.be/RfSqaGQTXOY

Transcript

1. 2021年こそ アクセシビリティと向き合おう Tiphaine（ティフェン） DroidKaigi 2021
2. 2 自己紹介 Tiphaine（ティフェン） フランス語の「ティファニー」 Androidエンジニア 株式会社ネットネイティブ（モデルプレス） @tahia910 ootahiaoo
3. 3 01. 基礎知識 03. 実装 02. 実装前の確認 04. テスト AGENDA
4. 4 01. 基礎知識
5. 5 全盲、弱視 色覚異常 ADHD、ディスレクシア 問題解決、記憶障害 てんかん パーキンソン病、関節炎 本態性振戦、怪我（一時的） 切断患者、麻痺 中途失聴者、難聴 ろう者 視覚 認知 / 神経 行動 聴覚 障害の種類
6. 6 色が区別しづらい テキストを読めない 画面が見れない 複雑なUIが理解しにくい 長文が読みづらい、読む速度が遅い 色の刺激に敏感 ボタンを正確に押せない 複雑な操作がしづらい タッチ画面が使えない 音を認知出来ない 字幕無しの動画を理解できない 視覚 認知 / 神経 行動 聴覚 問題
7. 7 アクセシビリティとは • ユーザー補助、a11y • 「他人の手伝い無しで、一人で出来るか？」 • 違う使い方でもアプリを利用できるようにする • 参考：Web Content Accessibility Guidelines (WCAG)
8. 8 ユーザー補助機能 音声操作 TalkBack（スクリーンリーダー） スイッチ・アクセス アクセシビリティ・サービス ... 画像：Switch Access for Android (Google @Youtube)
9. 9 ユーザー補助機能 表示拡大、フォントサイズ アニメーション無効化 その他 バイブレーション、触感フィードバック ...
10. 10 フレームワーク アプリ ユーザー フレームワーク ユーザー アクセシビリティ サービス 通常のやりとり アクセシビリティ・サービスを使 用する場合
11. 11 アプリ フレームワーク ユーザー アクセシビリティ サービス Accessibility API Accessibility APIで必要な情報を追加できる ⚠　通常のイベント内容で、 　　充分なフィードバックが出来ない場合がある Accessibility APIは この中にある
12. 12 02. 実装前の確認
13. 13 情報や機能の数を絞る 01 コンテンツを細かく分ける 02 一貫性を持たせる 03 シンプルなUI 画像：Cards Behavior (Material Design)
14. 14 読みやすさ フォントサイズは最低12sp以上 01 必ずspを使う 02 拡大されることを想定する
15. 15 読みやすさ 文字色のコントラスト比を確認する 03 18dp(boldの場合14dp)以上のテキスト 3:1 その他のテキスト、アイコン、画像 4.5:1 ガイドライン ダークモードでのテストを忘れず 04
16. 16 複数の手がかり 必ず二つ以上のやり方で伝える 01 ✨もっと良い✨
17. 17 複数の手がかり アイコンとテキストをセットで使う 02 画像：Designing the UI of Google Translate (Google Design)
18. 18 タップのしやすさ 画像：Spacing Methods (Material Design) Improving comprehension through intuitive actions (Google Design) タッチ可能領域は最小48 x 48dp 01 ボタンの間は16dp以上を空ける 02
19. 19 ジェスチャーに頼らない 別のやり方を用意する 01 最初からインクルーシブなデザインにする 02
20. 20 03. 実装
21. 21 フォーカスの種類 キーボード、十字キー、スイッチ その他のアクセシビリティ・サービス（ TalkBackとか） アクションを起こせるViewのみ 全てのView android:focusable=”true” + android:importantForAccessibility=”yes” 場合によってフォーカス・インジケータを作る必要がある デフォルトのフォーカス・インジケータがある Navigation Focus Accessibility Focus
22. 22 Navigation Focus
23. 23 Accessibility Focus 1 - Content Description
24. 24 テキストだけ？クリックできる？ リストの中？グループの一部？ アイテムが他にあるの？ 😣 Label（ラベル） Role（役割） Value（値） State（状態） 出来るだけこれらを全て伝える 画像：Android App Development: Accessibility (Renato Iwashima)
25. 25 ⚠ ユーザーは順番を変更できる 。。のはずだけど、 仕方ない時はそこで役割と値も指定する 当てはまらないViewもある 注意点 Content Descriptionはラベルのため “友達、タブ、３件中の２件目です” Label（ラベル） Role（役割） Value（値） State（状態） 画像：Android App Development: Accessibility (Renato Iwashima)
26. 26 Content Description アクションを説明する 01 16〜40文字程度に収める 02 役割と操作を示さない 03 “ペンのアイコン” “名前とか自己紹介とかプロフィール 画像とかバックグラウンドの色とか文 字の色などプロフィールの編集ができ る画面へ遷移する” “プロフィール編集ボタン ” 󰢄 NG： 󰢐 OK： “プロフィール編集”
27. 27 Content Description 不要な場合は無視する 04 ⚠　ClickListenerが設定されてないか確認する 　（もしくはisClickableがtrueになってないか） // 画像系以外： // 子Viewも無視される
28. 28 Content Description 読み上げる内容をグルーピングする 05 // 親View（API 28+） “ティフェン 20分前 How are you?” Navigation Focusに影響が出るから、 AccessibilityNodeInfoを使うべき // 全ての子View
29. 29 Content Description “コメント数　５件” グルーピング　Compose版
30. 30 Accessibility Focus 2 - AccessibilityNodeInfo
31. 31 Accessibility API　詳しく ユーザー アクセシビリティ サービス 1 2 3 4 アプリ Accessibility API @フレームワーク 1 UIに変更があったことを知らせる 2 状況を詳しく聞く（任意） 3 何かがあれば、追加情報を送る 4 ユーザーにフィードバックを送る 追加情報とは？🤔
32. 32 ViewGroup View ViewGroup View View アクセシビリティ・サービスは 　　代替のツリーを優先する 代替のツリー AccessibilityNodeInfo = 　　Viewアイテム + 追加情報 NodeInfo NodeInfo NodeInfo NodeInfo NodeInfo NodeInfo 通常のViewツリーにない、 　　Virtual Viewも存在する
33. 33 AccessibilityNodeInfo コンテンツ：ラベル、役割（Viewの種類）、 子の存在、レンダリング情報、座標など 内容 状態：isChecked、isFocused、isVisibleToUserなど アクション：このViewに実行できるアクション アプリ + フレームワーク NodeInfo NodeInfo NodeInfo NodeInfo NodeInfo
34. 34 どうやってカスタマイズ出来る？ NodeInfo（略）
35. 35 NodeInfo デフォルト・アクション　ClickLabelをカスタマイズ “メニューを確認するには、ダブルタップします ” “ダブルタップすると有効になります ”
36. 36 NodeInfo デフォルト・アクション　ClickLabelをカスタマイズ “メニューを確認するには、ダブルタップします ” ⚠ 日本語版は最後に「する」をつけてるから、書き方は要注意 󰢄 NG: 　“メニューを開く” “メニューを開くするには、ダブルタップします ” 󰢐 OK:　“メニューを確認”
37. 37 NodeInfo デフォルト・アクション　ClickLabelをカスタマイズ “メニューを確認するには、ダブルタップします ” ⚠ onClickのパラメータを持つComposableは 　　要注意 Compose版
38. 38 // 親View： “ティフェン 20分前 How are you?” NodeInfo グルーピング（正）
39. 39 まだまだ改善できそう。。 ✨理想の流れ✨ でもボタンのアクションはどうする？🤔
40. 40 NodeInfo カスタム・アクション 代替ツリーでボタンを無視 01 02 XMLでアクションのidを用意
41. 41 03 NodeInfoにアクションを追加 04 実際のアクションを実装 NodeInfo カスタム・アクション
43. 43 NodeInfo カスタム・アクション　Compose版 短い✨
44. 44 他にいろいろできるよー NodeInfo
45. 45 Advanced ... Accessibility Live Region（各読み上げ文言の優先度） Touch By Explore、Touch Delegate（カスタムView） App Actions（音声操作） Accessibility Events（UIの変更通知）
46. 46 04. テスト
47. 47 検証ツール Accessibility Scanner 本画面のみスキャンをしてくれる Playストアからダウンロード出来る
48. 48 検証ツール Accessibility Scanner
49. 49 検証ツール Lint コード上で分かる問題を警告してくれる ⚠ 間違って警告する時もある
50. 50 自動テスト Accessibility Testing Framework（ATF） 既存のEspressoテストと一緒に使う
51. 51 自動テスト Google Playのリリース前レポート 自動で生産されるモンキーテスト ⛔ ⛔ ⛔ ⛔ ⛔ 😂 ⚠ WebViewとの相性が悪い
52. 52 手動テスト キーボードや十字キーが使えるか 画像のラベルがあるか、適切に無視されてるか 名前、役割、状態、値を全て伝えてるか コンテンツや状態に変更があったら、伝えてるか エラーメッセージが表示されているか など WCAGに従うチェックリストを作る チェックリストを随時更新する 確認項目（例）
53. 53 参考 LinkedIn Learning - Android App Development: Accessibility / Renato Iwashima Youtube - Accessibility in Android watchlist / Android Developers 公式ドキュメント Codelab - Accessibility in Jetpack Compose Fenrir Engineersブログ - Androidアプリのアクセシビリティを向上させるために、必要なこと
54. 54 Thank you ご清聴ありがとうございました Special Thanks:　@purunkaoru