---
title: "React Ariaとは？Adobe製アクセシビリティライブラリの構成・使い方・スタイリングを解説"
url: "https://www.issoh.co.jp/tech/details/2392/"
published: 2024-06-11
updated: 2026-09-27
categories: ["React"]
publisher: "株式会社一創"
---

# 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 Spectrum        | 完成品コンポーネント | あり（Adobe仕様）  | Adobeのデザインシステムをそのまま使う |
| react-aria-components | 高レベル部品     | なし（unstyled） | 独自デザインでアクセシブルなUIを組む   |
| react-aria            | 低レベルフック    | なし           | DOM構造から自作、細かい制御       |
| react-stately         | 状態管理フック    | ―            | 選択・開閉などの状態ロジック        |

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

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

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

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

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

## 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)](https://www.issoh.co.jp/tech/details/3773/)のようなクラス整理ツールと併用すると保守しやすくなります。「振る舞いはReact Aria、見た目はTailwind」という分担は、同じくヘッドレス志向の[Headless UI](https://www.issoh.co.jp/tech/details/9449/)とも共通する考え方です。

## 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  | Adobe         | 振る舞いの網羅性と国際化が最も手厚い。フック＋コンポーネントの二層 |
| Headless UI | Tailwind Labs | Tailwindと相性が良く軽量。部品数は絞られる         |
| Base UI     | MUI           | MUIの後継となる非スタイル部品群                 |
| Radix UI    | WorkOS（買収）    | コンポジション設計が明快。Web中心                |

選び方の指針はこうです。**アクセシビリティと多言語対応を最重視し、細部までフックで作り込む余地が欲しい**ならReact Aria。**Tailwind中心で軽く済ませたい**ならHeadless UI。**MUIからの移行や将来性**を見るなら[Base UI](https://www.issoh.co.jp/tech/details/10350/)が候補になります。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連携・主要ライブラリ比較](https://www.issoh.co.jp/tech/details/9449/)
- [Base UI（React）とは？特徴・Radix UI／MUIとの違い・使い方をわかりやすく解説](https://www.issoh.co.jp/tech/details/10350/)
- [Tailwind Variants(tv)の使い方｜slots・compoundVariants・レスポンシブとTailwind CSS v4対応](https://www.issoh.co.jp/tech/details/3773/)
- [ReactのuseRefの使い方｜useStateとの違い・DOM参照・値の保持を実例で解説](https://www.issoh.co.jp/tech/details/3279/)
- [ReactのPropsとChildrenの違いを活かした効果的なコンポーネント設計](https://www.issoh.co.jp/tech/details/4116/)

---

出典: [React Ariaとは？Adobe製アクセシビリティライブラリの構成・使い方・スタイリングを解説](<https://www.issoh.co.jp/tech/details/2392/>)（株式会社一創）