React Native のアプリでスクリーンリーダーを使ってみる

発表後にテキストが公開される予定です。

Transcript

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