Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native のアプリでスクリーンリーダーを使ってみる
Search
grgr-dkrk
May 21, 2021
Technology
0
130
React Native のアプリでスクリーンリーダーを使ってみる
発表後にテキストが公開される予定です。
grgr-dkrk
May 21, 2021
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
Alternative to Storybook を探す旅
grgrdkrk
3
2.3k
VoiceOverの自動テスト
grgrdkrk
2
350
React Native と アクセシビリティ
grgrdkrk
2
780
DTx と アクセシビリティ
grgrdkrk
0
75
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
630
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
440
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
58
Other Decks in Technology
See All in Technology
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
信頼性に挑む中で拡張できる・得られる1人のスキルセットとは?
ken5scal
2
530
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
130
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
310
強いチームと開発生産性
onk
PRO
34
11k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
140
Lambdaと地方とコミュニティ
miu_crescent
2
370
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
320
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Gamification - CAS2011
davidbonilla
80
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
The Cult of Friendly URLs
andyhume
78
6k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
GitHub's CSS Performance
jonrohan
1030
460k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Thoughts on Productivity
jonyablonski
67
4.3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Transcript
grgr-dkrk @ React Native Meetup #12 React Native アプリで スクリーンリーダーを使ってみる
自己紹介 grgr-dkrk 「ぐるぐる、できるこ」と読みます 株式会社 CureApp エンジニア ※発表内容は所属する組織・団体と一切関係ありません
今日やること React Native のアプリで、VoiceOver, TalkBack を使ってみる
VoiceOver, TalkBack について 画面を見ずにテキストの読み上げ、入力などができる iOS は VoiceOver Android は TalkBack
断り書き 読み上げ方がおかしい箇所も出てきます。 だいたい React Native のバグなのでお許しください
1. 基本 2. ロールを設定する 3. 状態を伝える ※ https://github.com/grgr-dkrk/rnA11yTsurami の Tour
を参照 項目
1. 基本
基本操作 ૢ࡞ 7PJDF0WFS 5BML#BDL ىಈͱऴྃ ϗʔϜϘλϯճԡ͠ αΠυϘλϯճԡ͠ Իྔ ͱϘλϯಉ࣌ʹඵ ϑΥʔΧεΛҠಈ
ͳͧΔ ʢલޙͷ߲ʹʣ ϑΥʔΧεΛҠಈ ࠨ·ͨӈʹεϫΠϓͯ͢͠ λοϓ ϑΥʔΧεΛ߹Θͤͨঢ়ଶͰμϒϧλοϓ ʢμϒϧλοϓ͢ΔͳΒτϦϓϧλοϓʣ εΫϩʔϧ ຊͷࢦͰεϫΠϓ ຊͷࢦͰεϫΠϓ
フォーカス可能にする props で accessible を指定すると、フォーカス可能になる。 accessible なコンポーネントの子要素は、グループ化されて読み上げられる。 <Text> はデフォルトで accessible
になっている。 ※ Android だけなら次の accessibilityLabel だけでも OK
ラベルを設定 文字画像などがあって、画面を見ないと何の画像かわからない時など、 代替コンテンツとして、説明用のテキスト(ラベル)を設定する。 iOS はフォーカス可能(accessible)でないと読まれない。 ※ ユーザー自身がラベルを設定することもできる
ラベルを設定 <Image accessible source={require('kaedama.png')} accessibilityLabel=“ସ͑ۄແྉ" /> ʮସ͑ۄແྉʯ
ラベル注意 <Text accessible={!!props.isFoo}>{props.isFoo || ''}</Text> iOS は空文字も accessible なのでフォーカスが当たってしまう。 空文字が入るかもしれない時は
accessible を false に指定しておく
2. ロールを設定する
ロールを設定する ロールがあれば「リンク」「ボタン」などの役割を読み上げてくれる。 なくても操作はできるが、あった方がわかりやすい。 ※ ロールは React Native の概念。 また Web
のとは別物
主なロール ໊લ ׂ JNBHF JNBHFCVUUPO ը૾ɺը૾Ϙλϯ MJOL ϦϯΫ CVUUPO Ϙλϯ
ϦϯΫϝχϡʔΛ։͘ ͳ͠ ※ 詳しくは https://reactnative.dev/docs/accessibility#accessibilityrole
ロールを設定する ʮλΠτϧͰ͢ʯݟग़͠ <Text accessibilityRole="header">λΠτϧͰ͢</Text>
ロールを設定する 見出しなどはページ内移動にも使える。
ナビゲーション操作 ૢ࡞ 7PJDF0WFS 5BML#BDL φϏήʔγϣϯઃఆ ຊࢦͰ ยํΛ্ ยํΛԼʹ ຊࢦͰ ্Լ͔ࠨӈʹεϫΠϓ
φϏήʔγϣϯઃఆʹԊͬͨ ϑΥʔΧεͷҠಈ ্·ͨԼʹεϫΠϓͯ͢͠ ը໘্෦ɺԼ෦ʹҠಈ ຊࢦͰ ը໘ͷ্෦͔Լ෦Λλοϓ ͳ͠ ϦϯΫͳͲͷ ϝχϡʔΛ։͘ ͳ͠ ຊࢦͰճλοϓ
ロールを設定する時の注意 0.64 時点では Android でロールの日本語読み上げができない。 自分で日本語設定を追加する必要がある。 android/app/src/main/res/values-ja/strings.xml 仮で作った https://github.com/grgr-dkrk/react-native-japanese- accessibility-role/
ロールを設定する時の注意 accessible な要素の子は、ロールが無視される。 ナビゲーションにも使えない。 ※ 0.64 時点の仕様 {/* ςΩετ accessible
ͳͷͰ NG */} <Text> ϦϯΫ <Text accessibilityRole="link">ͪ͜Β</Text> </Text>
ロールを設定する時の注意 ロールだけを設定すると、 Android でロールが先に読み上げられてしまう。 ラベルも一緒に設定しないといけない…。 ※ TalkBack のバグ <Text accessibilityRole="link"
accessibilityLabel="ϦϯΫͪ͜Β"> ϦϯΫͪ͜Β </Text>
3. 状態を伝える
状態を伝える React Navigation の現在開いているタブは、「選択済み」と読み上げられる ʮબࡁΈʯϗʔϜը໘
状態を伝える `accessibilityState` を渡して状態を変更する CVTZ DIFDLFE TFMFDUFE EJTBCMFE
None