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

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

Transcript

1. grgr-dkrk @ React Native Meetup #12
   React Native アプリで
   
   
   スクリーンリーダーを使ってみる
   

   View Slide

2. 自己紹介
   grgr-dkrk 「ぐるぐる、できるこ」と読みます
   
   
   株式会社 CureApp エンジニア
   
   
   ※発表内容は所属する組織・団体と一切関係ありません
   

   View Slide

3. 今日やること
   React Native のアプリで、VoiceOver, TalkBack を使ってみる
   
   
   

   View Slide

4. VoiceOver, TalkBack について
   画面を見ずにテキストの読み上げ、入力などができる
   
   
   iOS は VoiceOver
   
   
   Android は TalkBack
   

   View Slide

5. 断り書き
   読み上げ方がおかしい箇所も出てきます。
   
   
   だいたい React Native のバグなのでお許しください
   
   
   

   View Slide

6. 1. 基本
   
   
   2. ロールを設定する
   
   
   3. 状態を伝える
   
   
   ※ https://github.com/grgr-dkrk/rnA11yTsurami の Tour を参照
   項目
   

   View Slide

7. 1. 基本
   

   View Slide

8. 基本操作
   ૢ࡞ 7PJDF0WFS 5BML#BDL
   ىಈͱऴྃ
   ϗʔϜϘλϯճԡ͠
   αΠυϘλϯճԡ͠
   ԻྔͱϘλϯಉ࣌ʹ਺ඵ
   ϑΥʔΧεΛҠಈ ͳͧΔ
   ʢલޙͷ߲໨ʹʣ
   ϑΥʔΧεΛҠಈ
   ࠨ·ͨ͸ӈʹεϫΠϓͯ͠཭͢
   λοϓ
   ϑΥʔΧεΛ߹Θͤͨঢ়ଶͰμϒϧλοϓ
   ʢμϒϧλοϓ͢ΔͳΒτϦϓϧλοϓʣ
   εΫϩʔϧ ຊͷࢦͰεϫΠϓ ຊͷࢦͰεϫΠϓ
   

   View Slide

9. フォーカス可能にする
   props で accessible を指定すると、フォーカス可能になる。
   
   
   accessible なコンポーネントの子要素は、グループ化されて読み上げられる。
   
   
   はデフォルトで accessible になっている。
   
   
   ※ Android だけなら次の accessibilityLabel だけでも OK
   

   View Slide

10. ラベルを設定
    文字画像などがあって、画面を見ないと何の画像かわからない時など、
    
    
    代替コンテンツとして、説明用のテキスト（ラベル）を設定する。
    
    
    iOS はフォーカス可能（accessible）でないと読まれない。
    
    
    ※ ユーザー自身がラベルを設定することもできる
    

    View Slide

11. ラベルを設定
    
    
    accessible
    
    
    source={require('kaedama.png')}
    
    
    accessibilityLabel=“ସ͑ۄແྉ"
    
    
    />
    
    
    ʮସ͑ۄແྉʯ
    

    View Slide

12. ラベル注意
    {props.isFoo || ''}
    
    
    iOS は空文字も accessible なのでフォーカスが当たってしまう。
    
    
    空文字が入るかもしれない時は accessible を false に指定しておく
    

    View Slide

13. 2. ロールを設定する
    

    View Slide

14. ロールを設定する
    ロールがあれば「リンク」「ボタン」などの役割を読み上げてくれる。
    
    
    なくても操作はできるが、あった方がわかりやすい。
    
    
    ※ ロールは React Native の概念。 また Web のとは別物
    
    
    

    View Slide

15. 主なロール
    ໊લ ໾ׂ
    JNBHF JNBHFCVUUPO ը૾ɺը૾Ϙλϯ
    MJOL ϦϯΫ
    CVUUPO Ϙλϯ
    ϦϯΫϝχϡʔΛ։͘ ͳ͠
    ※ 詳しくは https://reactnative.dev/docs/accessibility#accessibilityrole
    

    View Slide

16. ロールを設定する
    ʮλΠτϧͰ͢ʯݟग़͠
    λΠτϧͰ͢
    
    
    

    View Slide

17. ロールを設定する
    見出しなどはページ内移動にも使える。
    
    
    

    View Slide

18. ナビゲーション操作
    ૢ࡞ 7PJDF0WFS 5BML#BDL
    φϏήʔγϣϯઃఆ
    ຊࢦͰ
    ยํΛ্ยํΛԼʹ
    ຊࢦͰ
    ্Լ͔ࠨӈʹεϫΠϓ
    φϏήʔγϣϯઃఆʹԊͬͨ
    ϑΥʔΧεͷҠಈ
    ্·ͨ͸ԼʹεϫΠϓͯ͠཭͢
    ը໘্෦ɺԼ෦ʹҠಈ
    ຊࢦͰ
    ը໘ͷ্෦͔Լ෦Λλοϓ
    ͳ͠
    ϦϯΫͳͲͷ
    ϝχϡʔΛ։͘
    ͳ͠ ຊࢦͰճλοϓ
    

    View Slide

19. ロールを設定する時の注意
    0.64 時点では Android でロールの日本語読み上げができない。
    
    
    自分で日本語設定を追加する必要がある。
    
    
    android/app/src/main/res/values-ja/strings.xml
    
    
    仮で作った
    
    
    https://github.com/grgr-dkrk/react-native-japanese-
    accessibility-role/
    

    View Slide

20. ロールを設定する時の注意
    accessible な要素の子は、ロールが無視される。
    
    
    ナビゲーションにも使えない。
    
    
    ※ 0.64 時点の仕様
    
    
    {/* ςΩετ΋ accessible ͳͷͰ NG */}
    
    
    
    
    
    ϦϯΫ͸ ͪ͜Β
    
    
    
    
    
    

    View Slide

21. ロールを設定する時の注意
    ロールだけを設定すると、 Android でロールが先に読み上げられてしまう。
    
    
    ラベルも一緒に設定しないといけない…。
    
    
    ※ TalkBack のバグ
    
    
    
    
    
    ϦϯΫ͸ͪ͜Β
    
    
    
    
    
    

    View Slide

22. 3. 状態を伝える
    

    View Slide

23. 状態を伝える
    React Navigation の現在開いているタブは、「選択済み」と読み上げられる
    
    
    ʮબ୒ࡁΈʯϗʔϜը໘
    

    View Slide

24. 状態を伝える
    `accessibilityState` を渡して状態を変更する
    
    
    CVTZ DIFDLFE
    TFMFDUFE EJTBCMFE
    

    View Slide

25. View Slide