メインコンテンツへスキップ

React Nativeアプリをアクセシブルにする

·2分で読めます
Georgiy Kassabli
Facebook ソフトウェアエンジニア

Web上のReactとモバイル上のReact Nativeの最近のリリースにより、開発者は製品を構築するための新しいフロントエンドフレームワークを手に入れました。堅牢な製品を構築する上で重要な側面の1つは、視覚障害やその他の障害を持つ人々を含む、誰でもそれを使用できることを保証することです。ReactおよびReact Native用のアクセシビリティAPIを使用すると、あらゆるReact駆動のエクスペリエンスを、視覚障害者や視覚に障がいのある人々のためのスクリーンリーダーなどの支援技術を使用する人でも利用できるようにすることができます。

この投稿では、React Nativeアプリに焦点を当てます。React Accessibility APIは、AndroidおよびiOS APIと同様の外観と操作感を持つように設計されています。これまでAndroid、iOS、またはWeb向けにアクセシブルなアプリケーションを開発した経験がある方なら、React AX APIのフレームワークと用語にすぐに慣れることができるはずです。例えば、UI要素をアクセシブルにし(したがって支援技術に公開し)、accessibilityLabelを使用して要素の文字列記述を提供できます。

<View accessible={true} accessibilityLabel=”This is simple view”>

Facebook自身のReact製プロダクトの一つである広告マネージャアプリを例に、React AX APIのもう少し踏み込んだ応用を見ていきましょう。

これは抜粋です。記事の全文はFacebook Codeでご覧いただけます。