Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

grgr-dkrk

May 21, 2021
Tweet

More Decks by grgr-dkrk

Other Decks in Technology

Transcript

  1. grgr-dkrk @ React Native Meetup #12
    React Native アプリで


    スクリーンリーダーを使ってみる

    View full-size slide

  2. 自己紹介
    grgr-dkrk 「ぐるぐる、できるこ」と読みます


    株式会社 CureApp エンジニア


    ※発表内容は所属する組織・団体と一切関係ありません

    View full-size slide

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


    View full-size slide

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


    iOS は VoiceOver


    Android は TalkBack

    View full-size slide

  5. 断り書き
    読み上げ方がおかしい箇所も出てきます。


    だいたい React Native のバグなのでお許しください


    View full-size slide

  6. 1. 基本


    2. ロールを設定する


    3. 状態を伝える


    ※ https://github.com/grgr-dkrk/rnA11yTsurami の Tour を参照
    項目

    View full-size slide

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

    View full-size slide

  8. フォーカス可能にする
    props で accessible を指定すると、フォーカス可能になる。


    accessible なコンポーネントの子要素は、グループ化されて読み上げられる。


    はデフォルトで accessible になっている。


    ※ Android だけなら次の accessibilityLabel だけでも OK

    View full-size slide

  9. ラベルを設定
    文字画像などがあって、画面を見ないと何の画像かわからない時など、


    代替コンテンツとして、説明用のテキスト(ラベル)を設定する。


    iOS はフォーカス可能(accessible)でないと読まれない。


    ※ ユーザー自身がラベルを設定することもできる

    View full-size slide

  10. ラベルを設定


    accessible


    source={require('kaedama.png')}


    accessibilityLabel=“ସ͑ۄແྉ"


    />


    ʮସ͑ۄແྉʯ

    View full-size slide

  11. ラベル注意
    {props.isFoo || ''}


    iOS は空文字も accessible なのでフォーカスが当たってしまう。


    空文字が入るかもしれない時は accessible を false に指定しておく

    View full-size slide

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

    View full-size slide

  13. ロールを設定する
    ロールがあれば「リンク」「ボタン」などの役割を読み上げてくれる。


    なくても操作はできるが、あった方がわかりやすい。


    ※ ロールは React Native の概念。 また Web のとは別物


    View full-size slide

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

    View full-size slide

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


    View full-size slide

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


    View full-size slide

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

    View full-size slide

  18. ロールを設定する時の注意
    0.64 時点では Android でロールの日本語読み上げができない。


    自分で日本語設定を追加する必要がある。


    android/app/src/main/res/values-ja/strings.xml


    仮で作った


    https://github.com/grgr-dkrk/react-native-japanese-
    accessibility-role/

    View full-size slide

  19. ロールを設定する時の注意
    accessible な要素の子は、ロールが無視される。


    ナビゲーションにも使えない。


    ※ 0.64 時点の仕様


    {/* ςΩετ΋ accessible ͳͷͰ NG */}





    ϦϯΫ͸ ͪ͜Β





    View full-size slide

  20. ロールを設定する時の注意
    ロールだけを設定すると、 Android でロールが先に読み上げられてしまう。


    ラベルも一緒に設定しないといけない…。


    ※ TalkBack のバグ





    ϦϯΫ͸ͪ͜Β





    View full-size slide

  21. 3. 状態を伝える

    View full-size slide

  22. 状態を伝える
    React Navigation の現在開いているタブは、「選択済み」と読み上げられる


    ʮબ୒ࡁΈʯϗʔϜը໘

    View full-size slide

  23. 状態を伝える
    `accessibilityState` を渡して状態を変更する


    CVTZ DIFDLFE
    TFMFDUFE EJTBCMFE

    View full-size slide