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
160
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.8k
VoiceOverの自動テスト
grgrdkrk
2
430
React Native と アクセシビリティ
grgrdkrk
2
880
DTx と アクセシビリティ
grgrdkrk
0
100
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
720
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
520
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
70
Other Decks in Technology
See All in Technology
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
150
Datasets for Critical Operations by Dataform
kimujun
0
130
MCPと認可まわりの話 / mcp_and_authorization
convto
2
330
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.2k
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
780
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
120
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
330
生成AIによる情報システムへのインパクト
taka_aki
1
220
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
280
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
530
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
300
AWS表彰プログラムとキャリアについて
naoki_0531
1
150
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
How STYLIGHT went responsive
nonsquared
100
5.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
For a Future-Friendly Web
brad_frost
179
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Site-Speed That Sticks
csswizardry
10
730
Being A Developer After 40
akosma
90
590k
Unsuck your backbone
ammeep
671
58k
Faster Mobile Websites
deanohume
308
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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