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
140
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.6k
VoiceOverの自動テスト
grgrdkrk
2
390
React Native と アクセシビリティ
grgrdkrk
2
830
DTx と アクセシビリティ
grgrdkrk
0
84
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
660
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
480
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
62
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
160
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
140
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
390
AIエージェント元年@日本生成AIユーザ会
shukob
1
240
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
490
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
340
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.8k
Pwned Labsのすゝめ
ken5scal
2
520
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.3k
OPENLOGI Company Profile
hr01
0
60k
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
170
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Become a Pro
speakerdeck
PRO
26
5.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Visualization
eitanlees
146
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Gamification - CAS2011
davidbonilla
80
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Site-Speed That Sticks
csswizardry
4
410
The Pragmatic Product Professional
lauravandoore
32
6.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
A designer walks into a library…
pauljervisheath
205
24k
Building Adaptive Systems
keathley
40
2.4k
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