発表後にテキストが公開される予定です。
grgr-dkrk @ React Native Meetup #12React Native アプリでスクリーンリーダーを使ってみる
View Slide
自己紹介grgr-dkrk 「ぐるぐる、できるこ」と読みます株式会社 CureApp エンジニア※発表内容は所属する組織・団体と一切関係ありません
今日やることReact Native のアプリで、VoiceOver, TalkBack を使ってみる
VoiceOver, TalkBack について画面を見ずにテキストの読み上げ、入力などができるiOS は VoiceOverAndroid は TalkBack
断り書き読み上げ方がおかしい箇所も出てきます。だいたい React Native のバグなのでお許しください
1. 基本2. ロールを設定する3. 状態を伝える※ https://github.com/grgr-dkrk/rnA11yTsurami の Tour を参照項目
1. 基本
基本操作ૢ࡞ 7PJDF0WFS 5BML#BDLىಈͱऴྃϗʔϜϘλϯճԡ͠αΠυϘλϯճԡ͠ԻྔͱϘλϯಉ࣌ʹඵϑΥʔΧεΛҠಈ ͳͧΔʢલޙͷ߲ʹʣϑΥʔΧεΛҠಈࠨ·ͨӈʹεϫΠϓͯ͢͠λοϓϑΥʔΧεΛ߹Θͤͨঢ়ଶͰμϒϧλοϓʢμϒϧλοϓ͢ΔͳΒτϦϓϧλοϓʣεΫϩʔϧ ຊͷࢦͰεϫΠϓ ຊͷࢦͰεϫΠϓ
フォーカス可能にするprops で accessible を指定すると、フォーカス可能になる。accessible なコンポーネントの子要素は、グループ化されて読み上げられる。 はデフォルトで accessible になっている。※ Android だけなら次の accessibilityLabel だけでも OK
ラベルを設定文字画像などがあって、画面を見ないと何の画像かわからない時など、代替コンテンツとして、説明用のテキスト(ラベル)を設定する。iOS はフォーカス可能(accessible)でないと読まれない。※ ユーザー自身がラベルを設定することもできる
ラベルを設定accessiblesource={require('kaedama.png')}accessibilityLabel=“ସ͑ۄແྉ"/>ʮସ͑ۄແྉʯ
ラベル注意{props.isFoo || ''}iOS は空文字も accessible なのでフォーカスが当たってしまう。空文字が入るかもしれない時は accessible を false に指定しておく
2. ロールを設定する
ロールを設定するロールがあれば「リンク」「ボタン」などの役割を読み上げてくれる。なくても操作はできるが、あった方がわかりやすい。※ ロールは React Native の概念。 また Web のとは別物
主なロール໊લ ׂJNBHF JNBHFCVUUPO ը૾ɺը૾ϘλϯMJOL ϦϯΫCVUUPO ϘλϯϦϯΫϝχϡʔΛ։͘ ͳ͠※ 詳しくは https://reactnative.dev/docs/accessibility#accessibilityrole
ロールを設定するʮλΠτϧͰ͢ʯݟग़͠λΠτϧͰ͢
ロールを設定する見出しなどはページ内移動にも使える。
ナビゲーション操作ૢ࡞ 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 */}ϦϯΫ ͪ͜Β
ロールを設定する時の注意ロールだけを設定すると、 Android でロールが先に読み上げられてしまう。ラベルも一緒に設定しないといけない…。※ TalkBack のバグϦϯΫͪ͜Β
3. 状態を伝える
状態を伝えるReact Navigation の現在開いているタブは、「選択済み」と読み上げられるʮબࡁΈʯϗʔϜը໘
状態を伝える`accessibilityState` を渡して状態を変更するCVTZ DIFDLFETFMFDUFE EJTBCMFE