できる！アクセシビリティ向上/droidkaigi2023-day2

できる！
アクセシビリティ向上
DroidKaigi 2023
2023/9/15 17:00〜17:40 @Arctic Fox
Yuri Ogura

View Slide

⽇経電⼦版
紙⾯ビューアー
● ソフトウェアエンジニア
● 株式会社⽇本経済新聞社（2023年2⽉〜）
● ⽇経電⼦版‧紙⾯ビューアー開発
⾃⼰紹介
Yuri Ogura
2

View Slide

アクセシビリティ向上の第⼀歩を踏み出すことが⽬標
アジェンダ
Step 1. 知るぞ！アクセシビリティ！
Step 2. 取り組んだ！アクセシビリティ！
Step 3. 今⽇からできる！アクセシビリティ！
3

View Slide

Step 1. 知るぞ！アクセシビリティ！
アクセシビリティという⾔葉の意味から、
アプリでできる具体的なアクセシビリティ考慮、
⽀援技術（TalkBackやスイッチアクセス）の使い⽅
までご紹介します
4

View Slide

「アクセシビリティ」とは？
よく似た⾔葉に、「ユーザビリティ」という⾔葉がある
アクセシビリティ
＝
「あるユーザにとって、そもそも使えるか？」
Step1. 知るぞ！アクセシビリティ
5

View Slide

ISO 9241-11におけるユーザビリティの定義
特定の利⽤状況において、特定のユーザーによって、
ある製品が、指定された⽬標を達成するために⽤いられる際の、
有効さ、効率、ユーザーの満⾜度の度合い
JIS X 8341 におけるアクセシビリティの定義
様々な能⼒をもつ最も幅広い層の⼈々に対する製品，
サービス，環境⼜は施設（のインタラクティブシステム）の
ユーザビリティ
Step1. 知るぞ！アクセシビリティ - 「アクセシビリティ」とは？
6

View Slide

ISO 9241-11におけるユーザビリティの定義
特定の利⽤状況において、特定のユーザーによって、
ある製品が、指定された⽬標を達成するために⽤いられる際の、
有効さ、効率、ユーザーの満⾜度の度合い
JIS X 8341 におけるアクセシビリティの定義
様々な能⼒をもつ最も幅広い層の⼈々に対する製品，
サービス，環境⼜は施設（のインタラクティブシステム）の
ユーザビリティ
7

View Slide

ユーザビリティは
⼭の頂点を⾼める活動
アクセシビリティは
⼭の裾野を広げる活動
幅広い層の⼈々にとって使える
特定のユーザー（状況）に響く
8

View Slide

⾳声モビリティ
視覚
皆んなが「使える」アプリにするために
（´-`）.｡oO（様々な能⼒をもつ最も幅広い層の⼈々？）
我々Android Developerとして、アプリでできる考慮を考えてみる
9

View Slide

● 全盲
視覚的な情報を全く、またはほとんど得られない
● 弱視、加齢による⽼眼や⽩内障
視⼒が低い状態の他、⾒える範囲が狭い、光をまぶしく感じる、
夜や暗いところでは⾒えにくくなる、といった状態も
Step1. 知るぞ！アクセシビリティ - 皆んなが「使える」アプリにするために
視覚 - 幅広い層の⼈々
10

View Slide

● 様々な都合により、明るい / 暗い環境
○ 外回りの仕事で、直射⽇光差し込む中でアプリを利⽤
○ 寝ている家族がおり、部屋が真っ暗な中でアプリを利⽤
視覚 - 幅広い層の⼈々
11

View Slide

● TalkBackでアプリを利⽤できるようにする
→ 画⾯を⾒ずにデバイスを操作できる
● ダークモードに対応する
→ まぶしさを軽減できる
視覚 - アプリでできる考慮
12

View Slide

● ⼗分なコントラストを取る
→ ⾒えにくさを軽減できる
● 端末設定の⽂字サイズ / 表⽰サイズを拡⼤しても
レイアウトが乱れないようにする
視覚 - アプリでできる考慮
13

View Slide

● 全ろう：全く⽿が聞こえない状態
● 難聴：⽿が聞こえにくい状態
● ⺟国語ではない
● 騒⾳下や⾳を出せない環境
聴覚 - 幅広い層の⼈々
14

View Slide

● 字幕などの視覚情報を提供する
● ⾳声/動画コンテンツの再⽣‧停⽌をできるようにする
聴覚 - アプリでできる考慮
15

View Slide

● 上肢障がい、⼀時的な怪我、加齢
ものをつかむ‧持ち上げる‧⽀える、⼿指を細かく動かす、
などの動作を⾏うことができない状態
● ⽚⼿の塞がり
外出時に⼦供と繋ぐ⼿を離せない状態など
モビリティ - 幅広い層の⼈々
16

View Slide

● スイッチアクセスでアプリを利⽤できるようにする
→ 画⾯に触れずにデバイスを操作できる
● タップ範囲を拡⼤し、タップしやすくする
● ピンチ操作に代替を⽤意し、⽚⼿でも使⽤しやすくする
モビリティ - アプリでできる考慮
17

View Slide

● アクセシビリティの対象者は「全員」
● アプリでできる考慮も多岐にわたる
○ TalkBack、スイッチアクセス、ダークモード、
⽂字/表⽰サイズ変更、再⽣/停⽌、タップ範囲、etc.
○ 既にできていることもあるのではないでしょうか？
ここまでのまとめ
18

View Slide

TalkBackを使ってみよう
TalkBackとは...
● Androidデバイスに搭載されているスクリーンリーダー
● TalkBackによる読み上げや専⽤ジェスチャー操作により、
画⾯を⾒ずにデバイスを使⽤することができる
19

View Slide

〜 TalkBackデモ〜
起動⽅法や基本操作を⼀緒に覚えていきましょう〜
20

View Slide

TalkBack を On / Oﬀ にする
【基本】
設定アプリ > [ユーザー補助] > [TalkBack]
https://play.google.com/store/apps/details?
id=com.google.android.marvin.talkback
Step1. 知るぞ！アクセシビリティ - TalkBackを使ってみよう
21

View Slide

TalkBack を On / Oﬀ にする
【開発時】
ショートカットやadbコマンドがオススメ！
特にTalkBackの操作に慣れないうちは、
設定アプリまで戻ってOﬀにすることが難しい...
22

View Slide

ショートカットで On / Oﬀ にする
[TalkBackのショートカット] を設定する
ショートカット例 
● 音量ボタン大と小の同時長押し 
● ユーザー補助機能ボタン 
23

View Slide

adbコマンドで On / Oﬀ にする
Settings.Secure の設定値を変更
adb shell settings put secure enabled_accessibility_services {accessibility provider}
● Onにするとき
com.google.android.marvin.talkback
/com.google.android.marvin.talkback.TalkBackService
● Oﬀにするとき
null
https://developer.android.com/reference/android/provider/Settings.Secure
#ENABLED_ACCESSIBILITY_SERVICES
24

View Slide

フォーカスされた画⾯要素が緑枠で囲まれ、⾳声が読み上げられる
読み上げ：
「ネットワークとインターネット、
モバイル、Wi-Fi、アクセスポイント」
基本操作① 読み上げ
25

View Slide

画⾯上を１本指で１回タッチすると、
フォーカスが移動して⾳声が読み上げられる
画⾯上をタッチしたまま、指を滑らせるようにしても
指の下の画⾯要素にフォーカスが移動し、⾳声が読み上げられる
基本操作② タッチでフォーカスを移動
26

View Slide

基本操作③ 前後の画⾯要素へ移動する
前の画⾯要素へ
【左へスワイプ】
次の画⾯要素へ
【右へスワイプ】
27

View Slide

「ネットワークと...アクセスポイント、
ダブルタップできるメニューです」
１本の指でダブルタップすると
選択（画⾯遷移）できる
基本操作④ 画⾯要素を選択する
この項⽬を選択したい
28

View Slide

基本操作⑤ システムのジェスチャー操作
⼀本指の代わりに、⼆本指で⾏うことができる
（マルチフィンガージェスチャー対応時）
例：通知センターを表⽰したい
● TalkBack OFF 時
⼀本指で上から下にスワイプ
● TalkBack ON 時
⼆本指で上から下にスワイプ
29

View Slide

● 以上を覚えれば、TalkBackである程度⾃在に操作可能
● 他にも１〜４本の指を使って様々な操作を⾏うことができる
※ TalkBackバージョンによる差分あり
※ 操作⽅法の⼀覧はドキュメント参照 👀
https://support.google.com/accessibility/android/answer/6151827
30

View Slide

開発時に便利な設定
[TalkBack] > [設定] > [詳細設定]
> [デベロッパー向けの設定] > [⾳声出⼒の表⽰]
ONで画⾯下部に読み上げ内容が表⽰される。
→ ⽂⾯上でのコミュニケーションに便利 ✨
⾳声出⼒の表⽰, ON, スイッチ
31

View Slide

スイッチアクセスを使ってみよう
スイッチアクセスとは...
● Androidデバイスを外部デバイスなどで操作する機能
● スイッチアクセスによるスキャン（※）と選択により、
画⾯にタップすることなくデバイスを操作できる
※ 画⾯上の選択可能な項⽬を、⾃動で順番にハイライト表⽰
https://www.youtube.com/watch?v=rAIXE6ilRQ0
32

View Slide

https://www.ablenetinc.com/
blue2-bluetooth-switch/
スイッチデバイスの例
Step1. 知るぞ！アクセシビリティ - スイッチアクセスを使ってみよう
https://www.ablenetinc.com/
micro-light-switch/
● ２つのボタンで操作できる機器
● ごくわずかな⼒で操作できる機器
● 他にも、⾜で操作するものや、
スティック型のもの、
頭で押しやすいものなど、
多様なものがある
33

View Slide

顔の動き（左）に対して
様々な操作（右）を
割り当てることができる
カメラスイッチ
34

View Slide

〜スイッチアクセスデモ〜
起動⽅法や基本操作を⼀緒に覚えていきましょう〜
35

View Slide

スイッチアクセスを On / Oﬀ にする
【基本】
設定アプリ > [ユーザー補助] > [スイッチアクセス]
https://play.google.com/store/apps/details?
id=com.google.android.accessibility.switchaccess
36

View Slide

スイッチアクセスを On / Oﬀ にする
【開発時】
スイッチアクセスも、TalkBackと同様に
ショートカットやadbコマンドを使⽤可能
（ショートカットはTalkBackと同じのため省略）
37

View Slide

adbコマンドで On / Oﬀ にする
Settings.Secure の設定値を変更
adb shell settings put secure enabled_accessibility_services {accessibility provider}
● Onにするとき
com.google.android.accessibility.switchaccess
/com.android.switchaccess.SwitchAccessService
● Oﬀにするとき
null
https://developer.android.com/reference/android/provider/Settings.Secure
#ENABLED_ACCESSIBILITY_SERVICES
38

View Slide

スイッチデバイスを持っていなくても 🙆
開発者向けに、Androidデバイスの⾳量ボタンを
割り当てることができるようになっている！
[スイッチアクセス] > [設定] >
> [スキャン⽤のスイッチを割り当てる]
詳細は以下ドキュメント参照
https://developer.android.com/guide/topics/ui/accessibility/test
ing#switch-access
39

View Slide

基本操作① 画⾯要素を移動する
【次へ】を割り当てた
スイッチを押下
例：⾳量⼩ボタン
次の選択可能な画⾯要素へ移動できる
40

View Slide

基本操作② 画⾯要素を選択する
【選択】を割り当てた
スイッチを押下
例：⾳量⼤ボタン
41

View Slide

基本操作③ スクロールをする
選
択
選
択
42

View Slide

TalkBackとスイッチアクセスの⼀番の習得⽅法は
実際に操作してみることです。
本資料やドキュメントを参照しながら、
ぜひまずは触ってみてください 💗
43

View Slide

⽇経電⼦版におけるアクセシビリティ向上施策と
そこから得た気付きをご紹介します
Step 2. 取り組んだ！アクセシビリティ！
44

View Slide

● ⽇本経済新聞社が提供するニュースメディア
● 朝刊‧⼣刊及び電⼦版オリジナル記事
● GooglePlayには、Android版とWear OS版
電⼦版有料会員数 87万⼈
無料登録会員を含む電⼦版会員数 612万⼈
→ 幅広い⼈々に使える必要がある
⽇経電⼦版とは
Step2. 取り組んだ！アクセシビリティ
45

View Slide

施策⽴案⾒積もりリリース
開発&QA
優先度
決め
⽇経電⼦版のアクセシビリティ向上の流れ
46

View Slide

開発&QA
優先度
決め
47

View Slide

取り組みたいアクセシビリティ課題を施策として⽴案
● TalkBackやスイッチアクセスなどで使えるようにしたい
● Android14最⼤⽂字サイズ拡⼤で⽣じる表⽰崩れを修正したい
● ダークモードに対応したい
弊社のフローに従い、資料を作成して施策発表会の場で提案した
Step2. 取り組んだ！アクセシビリティ - ⽇経電⼦版のアクセシビリティ向上の流れ
施策⽴案
48

View Slide

開発&QA
優先度
決め
49

View Slide

優先度決め〜アクセシビリティタスク〜
他にも開発すべきことがあり、
アクセシビリティタスクの全てに今すぐ着⼿することは難しかった。
そこで、以下の観点で優先度を決定。
① 他の開発の合間に進めやすいか？
（画⾯単位、コンポーネント単位での対応 & リリースが可能か）
②Androidで他の代替⼿段を以てアプリを使⽤することができるか？
（Androidユーザー補助機能など）
50

View Slide

TalkBack‧
スイッチアクセス
① OK
② なし
Android14
表⽰崩れ
① OK
② タブレット
拡⼤機能
ダークモード
① 難しい
② ⾊反転機能
① 他の開発の合間に進めやすいかどうか
② Androidで他の代替⼿段を以てアプリを使⽤することができるか
51

View Slide

TalkBack‧
スイッチアクセス
① OK
② なし
Android14
表⽰崩れ
① OK
② タブレット
拡⼤機能
ダークモード
① 難しい
② ⾊反転機能
① 他の開発の合間に進めやすいかどうか
② Androidで他の代替⼿段を以てアプリを使⽤することができるか
最優先
52

View Slide

簡略化のために、このページ以降のスライドでは
「スイッチアクセス」の表記を省略します。
実際には「TalkBack」と並⾏して改善を⾏いました。
53

View Slide

シーン画⾯名現状動作改善案画⾯優先度使える度総合的優先度
初回導線〇〇画⾯
ボタンが「ラ
ベルなし」と
読まれる
ボタン内容を
わかるように
する
個別記事個別記事画⾯
ボトムシート
が開けない
開けるように
する
朝⼣刊⽇付選択画⾯ … …
各画⾯をTalkBackで実際に動かしてみて（⼿動テスト）、
改善点のある画⾯を以下のような表にリストアップしていった
優先度決め〜TalkBackタスク〜
54

View Slide

各項⽬で画⾯的優先度 × 使える度から総合的優先度を決定
初回導線‧
主要画⾯
⾏えない遷移‧
意味の通じない読み上げ
優先度
⾼
× =
PVが少ない画
⾯
操作は可能‧
意味は通じる
優先度
低
× =
55

View Slide

シーン画⾯名現状動作改善案画⾯優先度使える度総合的優先度
初回導線〇〇画⾯ … … ⾼絶望的 S
〇〇〇〇画⾯ … … ⾼⼀応使える B
〇〇〇〇画⾯ … … 中使えない B
〇〇〇〇画⾯ … … 低⼀応使える C
優先度をレベル分け
56

View Slide

開発&QA
優先度
決め
57

View Slide

● 先ほど作成した表を、総合的優先度が⾼い順に並び替え
● チームで⼀項⽬ずつ⾒積もりを実施
● 優先度レベル別の⽬標対応完了時期を設定
（優先度レベル S は ○⽉○⽇までに完了、など）
TalkBackタスク⾒積もり
58

View Slide

開発&QA
優先度
決め
59

View Slide

開発フェーズに到達したら、粛々と対応するのみ💪
開発
Before & After のTalkBackでの挙動を
撮影してPRに添付するルール
対応内容を振り返りやすくすることで、
継続的なアクセシビリティ向上に繋がることを期待
60

View Slide

● TalkBackに関するドキュメントを⽤意し、
QAさんにも基本的な操作⽅法を習得いただいた
● 両端のサポートOSバージョンで実施
○ バージョン差分があるケースもあった
QA
61

View Slide

開発&QA
優先度
決め
62

View Slide

リリース 🎉
⼀刻でも早く、必要とする
ユーザーに届きますように 🙏
改善した画⾯から都度、
次回のリリースに含めていった
63

View Slide

① TalkBack動作を伝えるためには動画が第⼀！
② ハードルが低く、実はめちゃくちゃ取り組みやすかった！
③ （はじめてTalkBackと向き合う場合）
対応案の計画、⾒積もりは段階分けした⽅が良かった！
TalkBack改善で得た気付き３選
64

View Slide

施策⽴案‧⾒積もりフェーズで、
TalkBackの現状動作を伝えることに苦労した。
⼝頭や⽂⾯での説明では伝わりにくく、
実動作をデモや動画で⾒せられるよう準備しておくべきだった。
Step2. 取り組んだ！アクセシビリティ- TalkBack改善で得た気付き3選
65

View Slide

⼀⽅で開発‧QAフェーズでは
IssueやPRに動画を添付してやり取りしていたため
挙動を齟齬なく伝えることができて良かった 🙆
66

View Slide

● 1つの⼩さなUIから単発で取り組める
● 多くの対応⽅法では、ユーザー補助機能⾮利⽤時への影響なし
（デグレしにくい！）
● 様々な画⾯、機能を⾒る機会になるので、
新メンバーオンボーディングにも向いていそう 👀
（実際に私は⼊社半年で、これを機に知る画⾯、機能もあった）
② ハードルが低く、実は取り組みやすかった！
67

View Slide

【失敗】
● ⾃分含め、メンバーはTalkBack初⼼者だった
● 洗い出したタスクの全てについての対応案を事前に検討し
⾒積もりを⾏ったが、膨⼤な時間がかかった
○ 現状や期待動作、実装⽅法のイメージの共有が難しかった
○ ⾒積もりがバラつき、議論の時間を要した
③ 対応案の計画、⾒積もりは段階分けすればよかった！
68

View Slide

【改善】
● 対応案の計画、⾒積もりを「最初に全て⾏う」のではなく
「段階を分けて⾏う」ようにすれば良かった
● ⼀部対応を進めることで、TalkBackそのものや実装への理解が
深まる。TalkBackへの共通認識ができた後に
残りを計画、⾒積もりした⽅が時間的に効率良く、
かつ精度も⾼く議論できたはず
③ 対応案の計画、⾒積もりは段階分けすればよかった！
69

View Slide

Step 3. 今⽇からできる！アクセシビリティ！
今⽇のたった10分からできそう、
そう思えるようなアクセシビリティ向上の
具体的な⼿段を3つご紹介します
70

View Slide

ツールからの指摘を
修正してみる
1
Step3. 今⽇からできる！アクセシビリティ！
71

View Slide

（参考）アクセシビリティチェックの⽅法
● ⼿動テスト
TalkBackやスイッチアクセスなどを実際に操作する⽅法
● ツールを使⽤したテスト
ユーザー補助検証ツールやlintなどに改善点を指摘してもらう⽅法
● ⾃動テスト
Espressoなどのテストフレームワークを使⽤する⽅法
● ユーザテスト
実際にアプリを使⽤したユーザからフィードバックを受ける⽅法
https://developer.android.com/guide/topics/ui/accessibility/testing
Step3. 今⽇からできる！アクセシビリティ！ - ツールからの指摘を修正してみる
72

View Slide

（参考）アクセシビリティチェックの⽅法
こ
れ
● ⼿動テスト
● ⾃動テスト
73

View Slide

ユーザー補助検証ツール
https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor
https://support.google.com/accessibility/android/answer/6376570
任意のアプリ画⾯の写真またはビデオを取ると、
問題点を列挙し、改善提案をドキュメントとともに⽰してくれる
● コンテンツラベル（ ≒ ContentDescription）
● タップターゲットのサイズ
● クリック可能アイテム
● テキストと画像のコントラスト
74

View Slide

ユーザー補助検証ツール
コントラストを
上げた⽅が
良いですよ〜
フォントサイズ拡⼤
で表⽰崩れるかも
しれませんよ〜
75

View Slide

ContentDescriptionを
⾒直してみる
2
76

View Slide

ContentDescription ?
● 主にアクセシビリティ⽬的で使⽤するプロパティ
● 使⽤例
○ 画像やアイコンの代替テキスト（≒ Webのalt属性）
○ TalkBackでの読み上げを理解しやすくする
例えば、UI上では「¥1,000」と表現しているものを
読み上げでは「1,000円」とする
Step3. 今⽇からできる！アクセシビリティ！ - ContentDescriptionを⾒直してみる
77

View Slide

ContentDescription ?
特に「画像やアイコンの代替テキスト」は重要
● Android Viewでは未指定でもビルドできる
● Jetpack Composeでは未指定だとビルドできない
エラー😢
78

View Slide

? ? ? ? 
実装例：画像
contentDescriptionの指定の仕⽅によって、
どのように読み上げられるか確認してみましょう
① null
② 空⽂字
③ 適切な⽂字列
79

View Slide

① contentDescription = null
画像にフォーカスが当たらないので、画像の存在が伝わらない
右へスワイプ
80

View Slide

① contentDescription = null
● null が適している例 🙆
○ 装飾⽬的の画像（画像右）
○ テキストと内容が重複する画像
（画像左）
81

View Slide

② contentDescription = ””（空⽂字）
画像にフォーカスは当たるが、「ラベルなし」と読み上げられる。
※
この例のように、フォーカスは当たるが
適切な読み上げが付与されていない場合、
TalkBackは「ラベルなし」と読み上げる。
ラベルなし
82

View Slide

② contentDescription = ””（空⽂字）
● 「ラベルなし」という読み上げでは理解が困難であり、
アクセシビリティに⽋ける
● ””（空⽂字）は基本的に指定すべきではない
○ 明確に ① null か、③ 適切な⽂字列を指定すべき 🙆
83

View Slide

③ contentDescription = ” {適切な⽂字列} ”
画像にフォーカスが当たり、
contentDescriptionに指定した⽂字列が読み上げられる。
アルパカの⾚ちゃんは、
⽣後3ヶ⽉で
歩けるようになる
84

View Slide

③ contentDescription = ” {適切な⽂字列} ”
● ” {適切な⽂字列} ” とするべき例 🙆
○ ⽂字情報が⼊っている画像（⼀つ前のスライドの例）
○ ボタンとなっている画像やアイコン
（右図の例）
どのような⽂字列を指定すべきか迷った時は、
Webのalt属性を参考にする（検索する）とサンプルが多い💡
85

View Slide

● nullの場合
○ そのnull指定は意図されたもの？
● 空⽂字の場合
○ null or ⽂字列を指定する⽅が適切ではないか？
ContentDescription⾒直しのチェックポイント
86

View Slide

● ⽂字列が指定されている場合
○ nullではなく、⽂字列指定が適切なケース？
○ ローカライズされている？
（英語のみとなっていない？）
○ 指定された⽂字列は適切？
（ファイル名や社内⽤語となっていない？）
ContentDescription⾒直しのチェックポイント
87

View Slide

⼿動テストをしてみる
TalkBack / スイッチアクセス
3
88

View Slide

（参考）アクセシビリティチェック
● ⼿動テスト
● ⾃動テスト
Step3. 今⽇からできる！アクセシビリティ！ - ⼿動テストをしてみる
89

View Slide

（参考）アクセシビリティチェック
こ
れ
● ⼿動テスト
● ⾃動テスト
90

View Slide

⼿動テストの必要性
ツール類を使⽤したテストは効率的 & 簡単に改善する上で、
もちろん積極的に活⽤したい。
⼀⽅で、実動作の確認ではじめてわかる挙動もあるため、
TalkBackとスイッチアクセスでの⼿動テストは是⾮⾏いたい 💪
⼿動テストで判明して、⽇経電⼦版アプリで対応した事例を紹介
91

View Slide

となっていた 🙅
事例1：HTMLのlang属性
⽇本語で書かれたHTMLページをWebViewで表⽰。
読み上げが聞き取れない。
英語や中国語(?)が混ざっているよう。
現象
原因
解決策とすることで、聞き取り可能となった 🙆
92

View Slide

事例2：⾮表⽰のつもりのUIが読み上げられる
朝刊‧⼣刊タブにて、記事⾒出しの
リストアイテムを⼀つずつ読み上げた後に
正体不明の「ラベルなし」の読み上げが発⽣。
朝刊‧⼣刊タブでは、3つのUIを出し分けており、
問題が発⽣する画⾯と発⽣しない画⾯があった。
現象
93

View Slide

無料会員向け画⾯
現象発⽣
有料会員朝⼣刊画⾯
現象発⽣
有料会員休刊画⾯
現象発⽣せず
94

View Slide

休刊画⾯のScrollViewにフォーカスが当たっていた
原因
親ViewGroup
朝⼣刊画⾯
ViewGroup
ViewGroup
休刊画⾯
ViewGroup
ScrollView
LinearLayout
View A View B View C
VISIBLE
のまま
GONE
にセット
95

View Slide

休刊画⾯のScrollViewのVisibilityを切り替えるようにした
解決策
親ViewGroup
朝⼣刊画⾯
ViewGroup
ViewGroup
休刊画⾯
ViewGroup
ScrollView
LinearLayout
View A View B View C
GONE
にセット
96

View Slide

事例3：Overlayされた画⾯が読み上げられる
現象
画⾯A
画⾯B
画⾯Aの上に
画⾯BがOverlayしているケースで、
画⾯AのUI要素が読み上げられていた。
Overlayされている時は、
読み上げられないようにしたい。
97

View Slide

個別記事画⾯（左）と
その上にボトムシートを展開した画⾯（右）
個別記事画⾯の記事⾒出しが
⾒えないのに読み上げられていた 🙅
98

View Slide

BottomSheetBehaviorを使って実装していれば、
setUpdateImportantForAccessibilityonSiblings(true) で
完全にOverlayされた画⾯のAccessibilityを無効化できる。
↑の内部実装は、ボトムシートの状態に応じて
importantForAccessibility 属性を切り替えている
⾒えないUIのimportantForAccessibility属性が有効だった
原因
解決策
99

View Slide

今回は実装の都合上、
setUpdateImportantForAccessibilityonSiblings が
効かなかったため、⾃前でimportantForAccessibilityを切り替え
100

View Slide

できた！
アクセシビリティ向上！
今⽇のたった10分からできるアクセシビリティ向上⼿段
● ツールからの指摘を修正してみる
● ContentDescriptionを⾒直してみる
● ⼿動テストをしてみる
101

View Slide

アクセシビリティ向上で
勉強になったもの
!
最後に...！
102

View Slide

最後に...！アクセシビリティ向上で勉強になったもの
● DroidKaigi 2021, 2022 の Tiphaine さんの発表
DroidKaigi 2021 - 2021年こそアクセシビリティと向き合おう / Tiphaine (ティフェン) [JA]
DroidKaigi 2022 - 社内でのモバイルアクセシビリティ推進 | Tiphaine (ティフェン) [JA]
● freee さんの勉強会
freee Tech Night 「モバイルアプリのアクセシビリティの問題はチームで解決！」
秋だ！モバイルアプリもアクセシビリティーやっていこう！
--freeeのモバイルチェッックリストの紹介--
103

View Slide

最後に...！アクセシビリティ向上で勉強になったもの
● Appt（オランダの⾮営利団体）
https://appt.org/en/docs/android/samples
● Android View
GitHub - android/trackr
● Jetpack Compose
Jetpack Compose のユーザー補助（Codelab）
104

View Slide

おしまい
105

View Slide

https://hack.nikkei.com/jobs/android/
⽇経電⼦版 Androidエンジニア募集中
106

View Slide

おしまい
本発表がアクセシビリティ向上に取り組む
きっかけになったら嬉しいです 😉
最後までご清聴ありがとうございました！
107

View Slide

できる！アクセシビリティ向上/droidkaigi2023-day2

できる！アクセシビリティ向上/droidkaigi2023-day2

日本経済新聞社エンジニア採用事務局

More Decks by 日本経済新聞社エンジニア採用事務局

Other Decks in Technology

Featured

Transcript

できる！アクセシビリティ向上/droidkaigi2023-day2

できる！アクセシビリティ向上/droidkaigi2023-day2

日本経済新聞社 エンジニア採用事務局

More Decks by 日本経済新聞社 エンジニア採用事務局

Other Decks in Technology

Featured

Transcript

日本経済新聞社エンジニア採用事務局

More Decks by 日本経済新聞社エンジニア採用事務局