grgr-dkrk @ React Native Meetup #11 React Native とアクセシビリティ

自己紹介 grgr-dkrk 株式会社 CureApp エンジニア ※ 発表内容は所属する組織・団体と一切関係ありません

アクセシビリティ 誰もがどんな状況や環境でも不自由なくアクセスできること。 目視できる、読めると同時に、 マシンリーダブル（ユーザーエージェントが解読可能）であることも大事。 今回はマシンリーダブルのほう。 ※ アクセシビリティの定義について議論する回ではありません

マシンリーダブル マシンが読み取れるデータであること。 アプリ上の目視可能なコンテンツでも、 端末側では情報を読み取れていなかったり、 誤って認識されている可能性がある。

マシンリーダブルでない例

マシンリーダブルでない例 Ϙλϯͱೝࣝ͞Εͳ͍ 3FBDU/BUJWFͷ࢓༷ ԡͯ͠Կ͕ى͜Δ͔Θ͔Βͳ͍ Կͷը૾͔Θ͔ΒΜ

マシンリーダブルでないと？ 補助機能にコンテンツの情報を提供できなくなる。 画面が見えないので、「スクリーンリーダー」を使って読み上げようとするが… コンテンツが読み上げられない、無視される、操作できないなど。

スクリーンリーダー • iOS の VoiceOver • ホームボタン、またはロックボタンをトリプルタップ • 左右スワイプでコンテンツ移動、読み上げる • Android の TalkBack • 音量+、音量- ボタンを同時に 3 秒以上押す • 左右スワイプでコンテンツ移動、読み上げる

1. 標準のコンポーネントに乗っかる（RN では困難なので割愛） 2. 追加の情報を与える マシンリーダブルにするために

追加の情報を与える 名前 役割 Label コンポーネントの名前を示すもの Traits コンポーネントの特性や状態を説明するもの Hint アクションした（ボタン押下など）時に 何が起こるかを説明するもの ※ Frame, Value というのもあるよ J04ͷ֓೦͕ͩ"OESPJE΋͍͍ͩͨಉ͡

React Native とのやりとり 専用の Props や AccessibilityInfo API など ネイティブ側の プロパティにマッピング AccessibilityDelegate View からオーバーライド いい感じヘルパー

React Native とのやりとり • accessible : フォーカス可能にする • accessibilityRole : 「特性」のトレイト • accessibilityLabel : ラベル • accessibilityState : 「状態」のトレイト • accessibilityHint : ヒント • AccessibilityInfo (API) : アクセシビリティ関連の情報をやり取りする React Native が提供する Props や API を使用して対応

マシンリーダブルにしてみる例 ΋ͲΔɺCVUUPOɺલͷϖʔδʹ໭Γ·͢ -BCFM )JOU 3PMF 5SBJUT

※ iOSでしか録れなかった

チェックツール FTMJOUQMVHJOSOBZ IUUQTHJUIVCDPNHSHSELSLFTMJOUQMVHJOSOBZ w KTY UTY্ͷΞΫηγϏϦςΟରԠΛνΣοΫ w ։ൃத w ελʔ͕ཉ͍͠

React Native とアクセシビリティ React Native はアクセシビリティのサポートが良くない http://www.takingnotes.co/blog/2018/11/09/react-native-accessibility/

2015: React Native が掲げる目標 https://github.com/facebook/react-native/releases/tag/v0.5.0-rc 0VSHPBMXJUI3FBDU/BUJWFJTUIBUJGZPVXSJUFZPVSBQQXJUIPVUUIJOLJOHBCPVUɹ BDDFTTJCJMJUZJUXJMMCFUIFSF 【意訳】 React Native の目標は、アクセシビリティのことを考えずにアプリを作っても 80% の（アクセシビリティ）対応ができることです。

2018: Airbnb のお言葉 https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838 )PXFWFS UIFSFXFSFNBOZIPMFTJOUIF3FBDU/BUJWFBDDFTTJCJMJUZ"1*T*OPSEFS UPNFFUFWFOBNJOJNVNBDDFQUBCMFBDDFTTJCJMJUZCBS XFIBEUPNBJOUBJOPVS PXOGPSLPG3FBDU/BUJWFXIFSFXFDPVMENFSHF fi YFT 【意訳】 （中略）しかし、React Native のアクセシビリティ API には多くの欠陥がありました。 最低限のアクセシビリティ対応のために修正を fork にマージして メンテナンスしなければなりませんでした。

React Native 問題点 • OS のアクセシビリティ API に対応しきれてない • クロスプラットフォーム故のつらみ • Native になりきれていないことの弊害 • アクセシビリティ API や Props がこなれていない • OS で役割が同じなのに全く別の属性、値が必要 • 組み込みコンポーネント、ライブラリのアクセシビリティ対応が良くない • そもそもテキストを認識させない • 自分を Button と思い込んでいる View とか

改善の動き • 2018: インターンの活動で RN のアクセシビリティ辺りが見直された • 各 OS の差異を可能な限り吸収し、一貫性を担保した(Hint, Role など) • https://www.linkedin.com/pulse/react-native-a11y-ziqi-chen • 最近: RN アクセシビリティチームの GitHub project • https://github.com/facebook/react-native/projects/15

それでも… まだまだ不具合が多く、80%の対応は難しい。 組み込みコンポーネントでさえ、十分な機能を持っていない。 そもそも本体だけの話ではなく UI ライブラリとかもある。 アクセシビリティ観点だと現状 React Native の採用はつらい…。 今後に期待。

今でもできること 1. UI の説明が、見た目に依存してないかを意識する シグニファイア（認知に依存する UI）ではなく、コードで説明可能か？ 2. Label, Traits, Hint を思い出してみる ネイティブの振る舞いは再現してないが、ある程度はいけるはず。 ただし、日本語圏では微妙なものもある（Role など） 3. 改善を祈る。または Contribute

（補足）React Native のドキュメント 忘れてた https://reactnative.dev/docs/accessibility https://reactnative.dev/docs/accessibilityinfo

参考 Starting A11Y in iOS (Label, Traits, Hint) https://speakerdeck.com/ra1028/starting-a11y-in-ios React Native at Airbnb: The Technology (つらい話1) https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology- dafd0b43838 React Native Accessibility Is Pretty Bad （つらい話2） http://www.takingnotes.co/blog/2018/11/09/react-native-accessibility/

No content