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
150
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.7k
VoiceOverの自動テスト
grgrdkrk
2
410
React Native と アクセシビリティ
grgrdkrk
2
860
DTx と アクセシビリティ
grgrdkrk
0
94
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
700
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
510
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
63
Other Decks in Technology
See All in Technology
AIとSREの未来 / AI and SRE
ymotongpoo
2
1.4k
いまさら聞けない Git 超入門 〜Gitって結局なに?から始める第一歩〜
devops_vtj
0
170
継続戦闘能⼒
sansantech
PRO
0
220
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
120
Digitization部 紹介資料
sansan33
PRO
1
3.8k
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
190
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
220
2025advance01
minamizaki
0
130
Data Hubグループ 紹介資料
sansan33
PRO
0
1.8k
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
やさしいClaude Code入門
minorun365
PRO
33
25k
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
710
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Statistics for Hackers
jakevdp
799
220k
Bash Introduction
62gerente
614
210k
Writing Fast Ruby
sferik
628
61k
Practical Orchestrator
shlominoach
188
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
What's in a price? How to price your products and services
michaelherold
245
12k
Gamification - CAS2011
davidbonilla
81
5.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
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