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
770
DTx と アクセシビリティ
grgrdkrk
0
74
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
620
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
440
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
58
Other Decks in Technology
See All in Technology
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
Autify Company Deck
autifyhq
1
39k
10分でわかるfreeeのQA
freee
1
3.4k
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
APIテスト自動化の勘所
yokawasa
7
4.2k
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Visualization
eitanlees
144
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
A designer walks into a library…
pauljervisheath
202
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Testing 201, or: Great Expectations
jmmastey
38
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
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