このページでは、React Aria が存在する理由と、それが解決する問題について説明します。
デザインシステムはかつてないほど普及しており、大小を問わず多くの企業が独自のコンポーネントライブラリをゼロから実装しています。Reactのような最新のビューライブラリにより、チームはこれらのコンポーネントをこれまで以上に簡単に構築して保守することができますが、多くの種類のデバイス間で動作するインタラクションを完全にアクセス可能な方法で行うことは、まだ非常に困難です。
ウェブは非常にユニークなプラットフォームです。非常に多様なデバイスとインタラクションモデルで動作し、プラットフォームの美学が明確に定義されていないため、各企業は通常、デザインシステムの各コンポーネントを自社のブランドに合わせてスタイル化する必要があります。ブラウザに内蔵されているUIコントロールは非常に少なく、存在するものはスタイルを整えるのが非常に困難です。そのため、あらゆる企業のウェブ開発者は、すべてのコントロールを一から作り直す必要があります。これは、他の多くの企業が行っている作業を重複して行うために、各企業が何百万ドルもの投資を行っていることを意味します。
ウェブが提供する完全にスタイル可能なプリミティブ(例:<div>)は非常に強力ですが、意味的な意味を欠いています。つまり、コンポーネントを実装するために使用している div スープの意味を支援技術が理解できないため、アクセシビリティが欠落していることが多いということです。ARIAを使用してセマンティクスを提供する場合でも、JavaScriptを使用して各コンポーネントのすべての動作をゼロから実装する必要があり、これを多くのデバイスやインタラクションモデルにまたがって行うのは厄介です。
残念ながら、多くの企業やチームには、アクセシビリティ、国際化、フルキーボードナビゲーション、タッチインタラクションなどの機能を優先させるリソースや時間がありません。このため、多くのウェブアプリではアクセシビリティやインタラクションに劣るものが多く、ウェブがネイティブアプリに比べて劣ったアプリプラットフォームであるという認識につながっています。
React Aria は、多くの一般的な UI コンポーネントのビヘイビアとアクセシビリティの実装を React Hooks に分離しているので、デザインシステム間で簡単に再利用することができます。コンポーネントのレンダリングとスタイリングを完全にコントロールできますが、ビヘイビア、アクセシビリティ、国際化のサポートのほとんどは無料で利用できます。
div だけから始めてすべてを自分で構築するのではなく、意味的な意味、動作、インタラクションが組み込まれた要素から始めます。これにより、コンポーネントをより迅速に構築することができ、マウス、タッチ、キーボード インタラクション、スクリーン リーダーやその他の支援技術での動作を保証します。
開発者が独自のコンポーネントライブラリをゼロから作成する必要がある主な理由は、スタイリングです。組み込みのブラウザ UI コントロールは、カスタマイズが十分ではなく、多くの場合、全く存在しません。このため、React Aria は意図的に非常に低レベルなものになっています。多くのオープンソースのコンポーネントライブラリとは異なり、レンダリングを一切提供せず、動作とアクセシビリティだけを提供します。私たちは特定の DOM 構造やスタイリングの方法論を課していません。フックは小さくて構成可能なので、それらを組み合わせて、コンポーネントに必要な機能だけを使ってデザインを実現することができます。
ほとんどのコンポーネントは、デザインシステムを超えても一貫した動作をします。W3Cが公開しているWAI-ARIAオーサリング・プラクティスでは、ほとんどの一般的なコンポーネントで期待されるキーボードとアクセシビリティの動作が規定されています。さらに、タッチとマウスの動作は、通常、デザインに関係なく一貫しています。ボタンは、多少見た目が違っていても、ボタンであることに変わりはありません。
つまり、デザイン システム間でのカスタマイズが保証されている場合もあります。コンポーネントのレンダリングを完全にコントロールできるので、React Aria フックが返す特定のプロップをオーバーライドして、必要に応じて追加の動作を追加することができます。例えば、コンポーネントにカスタムキーボードショートカットがあるかもしれないので、カスタム onKeyDown ハンドラを React Aria フックが返すものとチェーンさせて実装することができます。
React Ariaが属するアーキテクチャについては、アーキテクチャのページで詳しく知ることができます。
また、以下のReact Europeのトークでは、React Ariaがどのようにして誕生したのか、そのアーキテクチャ、高品質なクロスデバイスインタラクション、デザインシステム間での動作の共有方法などが語られています。