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

Slide 1

Slide 1 text

2021年こそアクセシビリティと向き合おう Tiphaine（ティフェン） DroidKaigi 2021

Slide 2

Slide 2 text

2 自己紹介 Tiphaine（ティフェン）フランス語の「ティファニー」 Androidエンジニア株式会社ネットネイティブ（モデルプレス） @tahia910 ootahiaoo

Slide 3

Slide 3 text

3 01. 基礎知識 03. 実装 02. 実装前の確認 04. テスト AGENDA

Slide 4

Slide 4 text

4 01. 基礎知識

Slide 5

Slide 5 text

5 全盲、弱視色覚異常 ADHD、ディスレクシア問題解決、記憶障害てんかんパーキンソン病、関節炎本態性振戦、怪我（一時的）切断患者、麻痺中途失聴者、難聴ろう者視覚認知 / 神経行動聴覚障害の種類

Slide 6

Slide 6 text

6 色が区別しづらいテキストを読めない画面が見れない複雑なUIが理解しにくい長文が読みづらい、読む速度が遅い色の刺激に敏感ボタンを正確に押せない複雑な操作がしづらいタッチ画面が使えない音を認知出来ない字幕無しの動画を理解できない視覚認知 / 神経行動聴覚問題

Slide 7

Slide 7 text

7 アクセシビリティとは ● ユーザー補助、a11y ● 「他人の手伝い無しで、一人で出来るか？」 ● 違う使い方でもアプリを利用できるようにする ● 参考：Web Content Accessibility Guidelines (WCAG)

Slide 8

Slide 8 text

8 ユーザー補助機能音声操作 TalkBack（スクリーンリーダー）スイッチ・アクセスアクセシビリティ・サービス ... 画像：Switch Access for Android (Google @Youtube)

Slide 9

Slide 9 text

9 ユーザー補助機能表示拡大、フォントサイズアニメーション無効化その他バイブレーション、触感フィードバック ...

Slide 10

Slide 10 text

10 フレームワークアプリユーザーフレームワークユーザーアクセシビリティサービス通常のやりとりアクセシビリティ・サービスを使用する場合

Slide 11

Slide 11 text

11 アプリフレームワークユーザーアクセシビリティサービス Accessibility API Accessibility APIで必要な情報を追加できる ⚠　通常のイベント内容で、　　充分なフィードバックが出来ない場合がある Accessibility APIはこの中にある

Slide 12

Slide 12 text

12 02. 実装前の確認

Slide 13

Slide 13 text

13 情報や機能の数を絞る 01 コンテンツを細かく分ける 02 一貫性を持たせる 03 シンプルなUI 画像：Cards Behavior (Material Design)

Slide 14

Slide 14 text

14 読みやすさフォントサイズは最低12sp以上 01 必ずspを使う 02 拡大されることを想定する

Slide 15

Slide 15 text

15 読みやすさ文字色のコントラスト比を確認する 03 18dp(boldの場合14dp)以上のテキスト 3:1 その他のテキスト、アイコン、画像 4.5:1 ガイドラインダークモードでのテストを忘れず 04

Slide 16

Slide 16 text

16 複数の手がかり必ず二つ以上のやり方で伝える 01 ✨もっと良い✨

Slide 17

Slide 17 text

17 複数の手がかりアイコンとテキストをセットで使う 02 画像：Designing the UI of Google Translate (Google Design)

Slide 18

Slide 18 text

18 タップのしやすさ画像：Spacing Methods (Material Design) Improving comprehension through intuitive actions (Google Design) タッチ可能領域は最小48 x 48dp 01 ボタンの間は16dp以上を空ける 02

Slide 19

Slide 19 text

19 ジェスチャーに頼らない別のやり方を用意する 01 最初からインクルーシブなデザインにする 02

Slide 20

Slide 20 text

20 03. 実装

Slide 21

Slide 21 text

21 フォーカスの種類キーボード、十字キー、スイッチその他のアクセシビリティ・サービス（ TalkBackとか）アクションを起こせるViewのみ全てのView android:focusable=”true” + android:importantForAccessibility=”yes” 場合によってフォーカス・インジケータを作る必要があるデフォルトのフォーカス・インジケータがある Navigation Focus Accessibility Focus

Slide 22

Slide 22 text

22 Navigation Focus

Slide 23

Slide 23 text

23 Accessibility Focus 1 - Content Description

Slide 24

Slide 24 text

24 テキストだけ？クリックできる？リストの中？グループの一部？アイテムが他にあるの？ 😣 Label（ラベル） Role（役割） Value（値） State（状態）出来るだけこれらを全て伝える画像：Android App Development: Accessibility (Renato Iwashima)

Slide 25

Slide 25 text

25 ⚠ ユーザーは順番を変更できる。。のはずだけど、仕方ない時はそこで役割と値も指定する当てはまらないViewもある注意点 Content Descriptionはラベルのため “友達、タブ、３件中の２件目です” Label（ラベル） Role（役割） Value（値） State（状態）画像：Android App Development: Accessibility (Renato Iwashima)

Slide 26

Slide 26 text

26 Content Description アクションを説明する 01 16〜40文字程度に収める 02 役割と操作を示さない 03 “ペンのアイコン” “名前とか自己紹介とかプロフィール画像とかバックグラウンドの色とか文字の色などプロフィールの編集ができる画面へ遷移する” “プロフィール編集ボタン ” 󰢄 NG： 󰢐 OK： “プロフィール編集”

Slide 27

Slide 27 text

27 Content Description 不要な場合は無視する 04 ⚠　ClickListenerが設定されてないか確認する　（もしくはisClickableがtrueになってないか） // 画像系以外： // 子Viewも無視される

Slide 28

Slide 28 text

28 Content Description 読み上げる内容をグルーピングする 05 // 親View（API 28+） “ティフェン 20分前 How are you?” Navigation Focusに影響が出るから、 AccessibilityNodeInfoを使うべき // 全ての子View

Slide 29

Slide 29 text

29 Content Description “コメント数　５件” グルーピング　Compose版

Slide 30

Slide 30 text

30 Accessibility Focus 2 - AccessibilityNodeInfo

Slide 31

Slide 31 text

31 Accessibility API　詳しくユーザーアクセシビリティサービス 1 2 3 4 アプリ Accessibility API @フレームワーク 1 UIに変更があったことを知らせる 2 状況を詳しく聞く（任意） 3 何かがあれば、追加情報を送る 4 ユーザーにフィードバックを送る追加情報とは？🤔

Slide 32

Slide 32 text

32 ViewGroup View ViewGroup View View アクセシビリティ・サービスは　　代替のツリーを優先する代替のツリー AccessibilityNodeInfo = 　　Viewアイテム + 追加情報 NodeInfo NodeInfo NodeInfo NodeInfo NodeInfo NodeInfo 通常のViewツリーにない、　　Virtual Viewも存在する

Slide 33

Slide 33 text

33 AccessibilityNodeInfo コンテンツ：ラベル、役割（Viewの種類）、子の存在、レンダリング情報、座標など内容状態：isChecked、isFocused、isVisibleToUserなどアクション：このViewに実行できるアクションアプリ + フレームワーク NodeInfo NodeInfo NodeInfo NodeInfo NodeInfo

Slide 34

Slide 34 text

34 どうやってカスタマイズ出来る？ NodeInfo（略）

Slide 35

Slide 35 text

35 NodeInfo デフォルト・アクション　ClickLabelをカスタマイズ “メニューを確認するには、ダブルタップします ” “ダブルタップすると有効になります ”

Slide 36

Slide 36 text

36 NodeInfo デフォルト・アクション　ClickLabelをカスタマイズ “メニューを確認するには、ダブルタップします ” ⚠ 日本語版は最後に「する」をつけてるから、書き方は要注意 󰢄 NG: 　“メニューを開く” “メニューを開くするには、ダブルタップします ” 󰢐 OK:　“メニューを確認”

Slide 37

Slide 37 text

37 NodeInfo デフォルト・アクション　ClickLabelをカスタマイズ “メニューを確認するには、ダブルタップします ” ⚠ onClickのパラメータを持つComposableは　　要注意 Compose版

Slide 38

Slide 38 text

38 // 親View： “ティフェン 20分前 How are you?” NodeInfo グルーピング（正）

Slide 39

Slide 39 text

39 まだまだ改善できそう。。 ✨理想の流れ✨ でもボタンのアクションはどうする？🤔

Slide 40

Slide 40 text

40 NodeInfo カスタム・アクション代替ツリーでボタンを無視 01 02 XMLでアクションのidを用意

Slide 41

Slide 41 text

41 03 NodeInfoにアクションを追加 04 実際のアクションを実装 NodeInfo カスタム・アクション

Slide 42

Slide 42 text

Slide 43

Slide 43 text

43 NodeInfo カスタム・アクション　Compose版短い✨

Slide 44

Slide 44 text

44 他にいろいろできるよー NodeInfo

Slide 45

Slide 45 text

45 Advanced ... Accessibility Live Region（各読み上げ文言の優先度） Touch By Explore、Touch Delegate（カスタムView） App Actions（音声操作） Accessibility Events（UIの変更通知）

Slide 46

Slide 46 text

46 04. テスト

Slide 47

Slide 47 text

47 検証ツール Accessibility Scanner 本画面のみスキャンをしてくれる Playストアからダウンロード出来る

Slide 48

Slide 48 text

48 検証ツール Accessibility Scanner

Slide 49

Slide 49 text

49 検証ツール Lint コード上で分かる問題を警告してくれる ⚠ 間違って警告する時もある

Slide 50

Slide 50 text

50 自動テスト Accessibility Testing Framework（ATF）既存のEspressoテストと一緒に使う

Slide 51

Slide 51 text

51 自動テスト Google Playのリリース前レポート自動で生産されるモンキーテスト ⛔ ⛔ ⛔ ⛔ ⛔ 😂 ⚠ WebViewとの相性が悪い

Slide 52

Slide 52 text

52 手動テストキーボードや十字キーが使えるか画像のラベルがあるか、適切に無視されてるか名前、役割、状態、値を全て伝えてるかコンテンツや状態に変更があったら、伝えてるかエラーメッセージが表示されているかなど WCAGに従うチェックリストを作るチェックリストを随時更新する確認項目（例）

Slide 53

Slide 53 text

53 参考 LinkedIn Learning - Android App Development: Accessibility / Renato Iwashima Youtube - Accessibility in Android watchlist / Android Developers 公式ドキュメント Codelab - Accessibility in Jetpack Compose Fenrir Engineersブログ - Androidアプリのアクセシビリティを向上させるために、必要なこと

Slide 54

Slide 54 text

54 Thank you ご清聴ありがとうございました Special Thanks:　@purunkaoru