React Ariaとは？Adobe製アクセシビリティライブラリの構成・使い方・スタイリングを解説

React Ariaは、Adobeが開発するReact向けのアクセシビリティ実装ライブラリです。キーボード操作・フォーカス管理・スクリーンリーダー対応・国際化といった「実装が面倒でバグりやすい振る舞い」を肩代わりし、見た目（CSS）は開発者に委ねる点が最大の特徴です。名前が似ているためHTMLのaria-*属性（WAI-ARIA）と混同されがちですが、両者は別物です。この記事では、React Aria（フック）とReact Aria Components（コンポーネント）の違い、React Spectrumとの関係、2026年時点のパッケージ構成、実装例、Tailwind連携、React Native対応の実態までを整理します。

まとめ：React Ariaの要点

• React AriaはAdobe製の「スタイルを持たない（unstyled）」アクセシビリティ実装ライブラリ。振る舞いだけを提供し、デザインは自由に付けられる。
• 提供形態は2つ。低レベルのフック（react-aria）と、その上に載る高レベルのコンポーネント（react-aria-components）。
• HTMLのaria-*属性（WAI-ARIA）とは別物。React AriaはそのARIA属性の配線まで含めて自動化するライブラリ。
• 2026年6月時点でreact-ariaは3.50.0系、react-aria-componentsは1.19.0系。旧来の@react-aria/buttonのような個別パッケージはモノパッケージへ統合済み。
• 迷ったらreact-aria-componentsから始め、細かい制御が要る箇所だけフックに降りるのが定石。
• Adobe製React AriaはWeb（DOM）専用。React Nativeは対象外（別プロジェクトreact-native-ariaが存在）。

React Ariaとは — アクセシビリティの「振る舞い」を提供するライブラリ

React Ariaは、AdobeのオープンソースプロジェクトReact Spectrumの一部として公開されているReact向けライブラリです。ボタンやスライダーといったUI部品に必要な操作の振る舞い（マウス・タッチ・キーボードの統一処理、フォーカスの制御、適切なroleやaria-*属性の付与、30以上の言語のローカライズ）を提供します。一方で色やレイアウトなどの見た目は一切持ちません。つまり「アクセシブルな挙動」だけを部品化し、デザインシステムの土台に使う設計です。

WAI-ARIA（HTML属性）とReact Aria（ライブラリ）の違い

「aria」という語の読み方は「アリア」。ここで混同しやすいのが、WAI-ARIAとReact Ariaです。WAI-ARIAはW3Cが定める仕様で、role="button"やaria-expanded="true"のようにHTML要素へ付ける属性そのものを指します。属性を正しく付け、キーボード操作やフォーカスを自前で実装するのは開発者の責任です。対してReact Ariaは、その属性の付与と操作ロジックをまとめて肩代わりするライブラリです。「aria とは何か」を調べて属性の一覧に行き着いた人が、実装の手間を減らす手段としてReact Ariaに至る、という関係になります。

React Ariaが引き受ける「実装の難所」

アクセシブルなコンポーネントを自作すると、次のような細部で必ずつまずきます。React Ariaはこれらを標準で吸収します。

• フォーカス管理：モーダル内のフォーカストラップ、閉じたときの復帰、メニューやリストのroving tabindex（矢印キーでの移動）。
• 入力デバイスの差異：マウス・タッチ・ペン・キーボードで挙動が食い違う問題を統一（例：ホバーとフォーカスリングの出し分け）。
• スクリーンリーダー対応：ブラウザ×支援技術の組み合わせごとの癖を吸収し、正しい読み上げを担保。
• 国際化：日付・数値の書式、RTL（右から左に書く言語）レイアウトへの対応。

React Spectrumエコシステムの全体像

React Ariaは単体のライブラリではなく、Adobeのモノレポadobe/react-spectrumが抱える階層構造の一部です。役割の異なる4つの層を区別すると、ドキュメントを読み解きやすくなります。

react-aria-componentsはreact-ariaとreact-statelyのフックを内部で組み合わせた高レベル部品で、<Button>や<Slider>などをそのまま置くだけで動きます。より深くカスタマイズしたい箇所だけフックへ降りる、という二段構えが公式の推奨です。なお、React Aria Componentsは合成（コンポジション）を前提にした設計で、childrenやコンテキストを通じて部品を組み上げます。この考え方はReactのPropsとChildrenの違いを活かしたコンポーネント設計と地続きです。

フック版とコンポーネント版、どちらを使うべきか

結論から言えば、まずreact-aria-componentsを選ぶべきです。50以上のアクセシブルな部品が揃い、状態は後述のデータ属性で公開されるため、多くのプロジェクトはフックを直接触らずに完結します。フック（react-aria）へ降りるべきなのは、次のような明確な理由があるときだけです。

• コンポーネントが提供しない独自のDOM構造や独自要素にアクセシビリティを付けたい。
• 既存のデザインシステムの内部実装に、振る舞いだけを差し込みたい。
• 提供コンポーネントの構造では実現できない、特殊なインタラクションを作る。

逆に、「なんとなく低レベルの方が柔軟そう」という理由でフックから始めるのは避けるべきです。フックはuseRefで参照した要素へprops群を展開する使い方が基本で、配線量が増え、コンポーネント版なら自動で担保される部分を自前で守る必要が生じます（useRefの基礎はReactのuseRefの使い方を参照）。

React Ariaの導入と最新パッケージ構成

インストール方法（2026年はモノパッケージが基本）

かつては@react-aria/buttonのように部品ごとに個別パッケージをインストールする方式でした。現在はこれらが統合され、react-aria（フック）とreact-stately（状態）、そしてreact-aria-components（コンポーネント）の3つに集約されています。まずはコンポーネント版を入れるのが手軽です。

npm install react-aria-components

フックを直接使う場合はモノパッケージのreact-ariaを入れます。個別の@react-aria/*を新規に入れる必要はありません。

npm install react-aria react-stately

個別パッケージの統合と最新バージョン

2026年6月時点で、react-ariaは3.50.0系、react-aria-componentsは1.19.0系が公開されています（正確な最新版はnpmや公式リリースノートで確認してください）。近年の大きな変更は依存関係の統合で、@react-aria/buttonや@react-stately/tableといった個別フックパッケージがreact-aria・react-statelyへまとめられ、react-aria-componentsの依存数は約90%削減されました。古い記事やAI生成のサンプルには@react-aria/button単体をインストールする手順が残っていますが、新規実装ではモノパッケージを使うのが正解です。

主要コンポーネントの実装例

フックで作る（useButton）

低レベルフックの典型がuseButtonです。useRefで参照した要素に、返り値のbuttonPropsを展開します。インポート元が個別パッケージではなくモノパッケージreact-ariaである点に注意してください。

import {useButton} from 'react-aria';
import {useRef} from 'react';

function MyButton(props) {
  let ref = useRef(null);
  let {buttonProps} = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

これだけで、キーボードのEnter/Spaceでの発火、押下状態、フォーカスリングの制御などがまとめて付きます。

コンポーネント版で作る（Button・Slider・Checkbox・Link）

コンポーネント版なら、フックの配線を書かずに部品を置くだけです。ButtonやSlider、Checkbox、Linkなど、単体で問い合わせの多い部品がひととおり揃っています。

import {Button, Checkbox, Link, Slider, Label, SliderTrack, SliderThumb}
  from 'react-aria-components';

function Example() {
  return (
    <div>
      <Button onPress={() => alert('pressed')}>送信</Button>
      <Checkbox>規約に同意する</Checkbox>
      <Link href="/docs">ドキュメント</Link>
      <Slider defaultValue={30}>
        <Label>音量</Label>
        <SliderTrack><SliderThumb /></SliderTrack>
      </Slider>
    </div>
  );
}

クリックではなくonPressを使う点に注意します。これはマウス・タッチ・キーボードを統一的に扱うためのReact Aria独自のイベントです。Sliderのように内部が複数要素で構成される部品は、SliderTrackやSliderThumbといった子コンポーネントを組み合わせて構造とスタイルを自分で決めます。

スタイリング — 見た目を持たない前提とTailwind連携

React Aria Componentsは意図的にスタイルを持ちません（headless / unstyled）。その代わり、各部品は現在の状態をDOMの属性として公開します。可能な限りARIA属性を使い、対応する属性がない状態はdata-*属性で表します。例えばホバー中はdata-hovered、押下中はdata-pressedが付き、これらはマウス・タッチ・キーボードで一貫して動きます。CSSではこの属性セレクタを狙ってスタイルを当てます。

.react-aria-Button[data-pressed] {
  background: #005b9f;
}

Tailwind CSSを使う場合は、これらの状態をdata-*修飾子として書けます。公式のtailwindcss-react-aria-componentsプラグインを入れると、pressed:のような短いバリアントとエディタ補完が使え、状態別スタイルが書きやすくなります。状態ごとに複雑なクラスを組む場面では、Tailwind Variants(tv)のようなクラス整理ツールと併用すると保守しやすくなります。「振る舞いはReact Aria、見た目はTailwind」という分担は、同じくヘッドレス志向のHeadless UIとも共通する考え方です。

React NativeでReact Ariaは使えるか

「react native aria」で検索する人が一定数いますが、ここは誤解の多いところです。Adobe製のReact AriaはWeb（DOM）専用で、React Nativeのネイティブアプリ（iOS / Android）はサポート対象外です。React Native向けには、名前の似た別プロジェクトreact-native-aria（GeekyAnts / gluestack が開発）が存在し、React Aria相当のフックをReact Native上で使えるようにしています。両者は開発元も対象プラットフォームも異なるため、導入時は「AdobeのReact Aria（Web）」なのか「react-native-aria（RN）」なのかを取り違えないよう注意してください。

他のヘッドレスUIライブラリとの比較と選択基準

スタイルを持たないアクセシブルなUIライブラリは複数あります。React Ariaの立ち位置を、代表的な選択肢と対比して整理します。

選び方の指針はこうです。アクセシビリティと多言語対応を最重視し、細部までフックで作り込む余地が欲しいならReact Aria。Tailwind中心で軽く済ませたいならHeadless UI。MUIからの移行や将来性を見るならBase UIが候補になります。React Ariaは学習コストがやや高く、単純なフォーム程度なら過剰になり得ますが、規模の大きいデザインシステムを一から起こす場面では、振る舞いの完成度が投資に見合います。

よくある質問

React Ariaの読み方は？

「リアクト・アリア（aria＝アリア）」と読みます。ariaはWAI-ARIA（Accessible Rich Internet Applications）に由来する語です。

React AriaとReact Spectrumの違いは？

React SpectrumはAdobeのデザインシステムを実装した見た目付きの完成品コンポーネントです。React Aria（フック）はその土台となるスタイルを持たない振る舞い部分で、React SpectrumはReact Ariaの上に構築されています。自社デザインで作りたいならReact Aria（Components）、Adobe仕様のUIをそのまま使うならReact Spectrumです。

react-aria と react-aria-components はどちらを使うべき？

多くの場合は高レベルのreact-aria-componentsを推奨します。部品を置くだけでアクセシビリティが効き、状態はデータ属性で公開されるためスタイルも当てやすいためです。提供部品で足りない独自構造を作るときだけ、低レベルのreact-ariaフックへ降ります。

React Ariaにデザイン（CSS）は付いていますか？

付いていません。React Aria / React Aria Componentsはunstyled（headless）で、見た目は開発者がCSSやTailwindで付けます。状態はdata-hoveredやdata-pressedなどの属性で公開されるので、それをセレクタで狙ってスタイルします。

React NativeでReact Ariaは使えますか？

Adobe製のReact AriaはWeb専用で、React Nativeのネイティブアプリには対応しません。React Native向けには別プロジェクトのreact-native-ariaがあり、名前が似ていますが開発元も対象も異なります。

関連記事

• Headless UIとは？React／Vueでの使い方・Tailwind連携・主要ライブラリ比較
• Base UI（React）とは？特徴・Radix UI／MUIとの違い・使い方をわかりやすく解説
• Tailwind Variants(tv)の使い方｜slots・compoundVariants・レスポンシブとTailwind CSS v4対応
• ReactのuseRefの使い方｜useStateとの違い・DOM参照・値の保持を実例で解説
• ReactのPropsとChildrenの違いを活かした効果的なコンポーネント設計