Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
grgr-dkrk @ React Native Meetup #12 React Native アプリで スクリーンリーダーを使ってみる
Slide 2
Slide 2 text
自己紹介 grgr-dkrk 「ぐるぐる、できるこ」と読みます 株式会社 CureApp エンジニア ※発表内容は所属する組織・団体と一切関係ありません
Slide 3
Slide 3 text
今日やること React Native のアプリで、VoiceOver, TalkBack を使ってみる
Slide 4
Slide 4 text
VoiceOver, TalkBack について 画面を見ずにテキストの読み上げ、入力などができる iOS は VoiceOver Android は TalkBack
Slide 5
Slide 5 text
断り書き 読み上げ方がおかしい箇所も出てきます。 だいたい React Native のバグなのでお許しください
Slide 6
Slide 6 text
1. 基本 2. ロールを設定する 3. 状態を伝える ※ https://github.com/grgr-dkrk/rnA11yTsurami の Tour を参照 項目
Slide 7
Slide 7 text
1. 基本
Slide 8
Slide 8 text
基本操作 ૢ࡞ 7PJDF0WFS 5BML#BDL ىಈͱऴྃ ϗʔϜϘλϯճԡ͠ αΠυϘλϯճԡ͠ ԻྔͱϘλϯಉ࣌ʹඵ ϑΥʔΧεΛҠಈ ͳͧΔ ʢલޙͷ߲ʹʣ ϑΥʔΧεΛҠಈ ࠨ·ͨӈʹεϫΠϓͯ͢͠ λοϓ ϑΥʔΧεΛ߹Θͤͨঢ়ଶͰμϒϧλοϓ ʢμϒϧλοϓ͢ΔͳΒτϦϓϧλοϓʣ εΫϩʔϧ ຊͷࢦͰεϫΠϓ ຊͷࢦͰεϫΠϓ
Slide 9
Slide 9 text
フォーカス可能にする props で accessible を指定すると、フォーカス可能になる。 accessible なコンポーネントの子要素は、グループ化されて読み上げられる。 はデフォルトで accessible になっている。 ※ Android だけなら次の accessibilityLabel だけでも OK
Slide 10
Slide 10 text
ラベルを設定 文字画像などがあって、画面を見ないと何の画像かわからない時など、 代替コンテンツとして、説明用のテキスト（ラベル）を設定する。 iOS はフォーカス可能（accessible）でないと読まれない。 ※ ユーザー自身がラベルを設定することもできる
Slide 11
Slide 11 text
ラベルを設定 ʮସ͑ۄແྉʯ
Slide 12
Slide 12 text
ラベル注意 {props.isFoo || ''} iOS は空文字も accessible なのでフォーカスが当たってしまう。 空文字が入るかもしれない時は accessible を false に指定しておく
Slide 13
Slide 13 text
2. ロールを設定する
Slide 14
Slide 14 text
ロールを設定する ロールがあれば「リンク」「ボタン」などの役割を読み上げてくれる。 なくても操作はできるが、あった方がわかりやすい。 ※ ロールは React Native の概念。 また Web のとは別物
Slide 15
Slide 15 text
主なロール ໊લ ׂ JNBHF JNBHFCVUUPO ը૾ɺը૾Ϙλϯ MJOL ϦϯΫ CVUUPO Ϙλϯ ϦϯΫϝχϡʔΛ։͘ ͳ͠ ※ 詳しくは https://reactnative.dev/docs/accessibility#accessibilityrole
Slide 16
Slide 16 text
ロールを設定する ʮλΠτϧͰ͢ʯݟग़͠ λΠτϧͰ͢
Slide 17
Slide 17 text
ロールを設定する 見出しなどはページ内移動にも使える。
Slide 18
Slide 18 text
ナビゲーション操作 ૢ࡞ 7PJDF0WFS 5BML#BDL φϏήʔγϣϯઃఆ ຊࢦͰ ยํΛ্ยํΛԼʹ ຊࢦͰ ্Լ͔ࠨӈʹεϫΠϓ φϏήʔγϣϯઃఆʹԊͬͨ ϑΥʔΧεͷҠಈ ্·ͨԼʹεϫΠϓͯ͢͠ ը໘্෦ɺԼ෦ʹҠಈ ຊࢦͰ ը໘ͷ্෦͔Լ෦Λλοϓ ͳ͠ ϦϯΫͳͲͷ ϝχϡʔΛ։͘ ͳ͠ ຊࢦͰճλοϓ
Slide 19
Slide 19 text
ロールを設定する時の注意 0.64 時点では Android でロールの日本語読み上げができない。 自分で日本語設定を追加する必要がある。 android/app/src/main/res/values-ja/strings.xml 仮で作った https://github.com/grgr-dkrk/react-native-japanese- accessibility-role/
Slide 20
Slide 20 text
ロールを設定する時の注意 accessible な要素の子は、ロールが無視される。 ナビゲーションにも使えない。 ※ 0.64 時点の仕様 {/* ςΩετ accessible ͳͷͰ NG */} ϦϯΫ ͪ͜Β
Slide 21
Slide 21 text
ロールを設定する時の注意 ロールだけを設定すると、 Android でロールが先に読み上げられてしまう。 ラベルも一緒に設定しないといけない…。 ※ TalkBack のバグ ϦϯΫͪ͜Β
Slide 22
Slide 22 text
3. 状態を伝える
Slide 23
Slide 23 text
状態を伝える React Navigation の現在開いているタブは、「選択済み」と読み上げられる ʮબࡁΈʯϗʔϜը໘
Slide 24
Slide 24 text
状態を伝える `accessibilityState` を渡して状態を変更する CVTZ DIFDLFE TFMFDUFE EJTBCMFE
Slide 25
Slide 25 text
No content