🎄

React AriaのTableの挙動をData Gridパターンから理解する

に公開
React
アクセシビリティ
React Aria
tech

この記事は、カオナビ Advent Calendar 2025（シリーズ1）11日目です。

https://qiita.com/advent-calendar/2025/kaonavi

はじめに

React Ariaには、アクセシビリティに配慮した多くのコンポーネントが用意されていて、その1つにTableコンポーネントがあります。

https://react-spectrum.adobe.com/react-aria/Table.html

Tableコンポーネントによって高機能な表形式のUIを実現できますが、HTMLが持つ<table>要素 や一般的なウェブアプリケーションの表形式UI[1]とは異なる振る舞いがあり、基準となるメンタルモデルを持てないとその挙動に戸惑うことがあります。一見<table> に似た構造ですが、その延長線上で理解しようとすると、違和感が生じやすいかと思います。
特に、tab や矢印キーによるフォーカス移動など、一般的な <table> の操作感とは異なるキーボード挙動が戸惑いの原因になりやすいポイントではないでしょうか。
この記事では、React AriaのTableコンポーネントがどのように振る舞うのか、ベースとなっている考え方を学び、その理解の取っ掛かりとなることに焦点をあてます。

ベースにあるData Gridパターン

React AriaのTableコンポーネントは、ベースにARIA gridパターンを採用していることが公式ドキュメントに記載されている以下の1文に示されています。

Accessible – Follows the ARIA grid pattern, with additional selection announcements via an ARIA live region. Extensively tested across many devices and assistive technologies to ensure announcements and behaviors are consistent.

https://react-spectrum.adobe.com/react-aria/Table.html#features

ARIA gridパターンとは、WAI-ARIA Authoring Practices Guide（APG）[2]に記載されている、アクセシブルな表形式のUIを構築するための設計パターンです。
React AriaのTableコンポーネントは、このARIA gridパターンをベースにしているため、一般的な表形式のUIとは異なる振る舞いをします。

関係性を整理すると以下の図のようになるでしょう。

React Aria TableとARIAパターンとの関係図

ひとことに「表」といっても、WAI-ARIAのrole[3]としては、tableとgridという2つの概念があります。

role 概要
table HTMLの<table>要素に相当する。静的な表形式データのUIに使用する。
grid インタラクティブな表形式UIに対応する役割。セルの選択や編集、ソートなどの操作が可能なUIに使用する。

静的な表形式のデータ表示にはtableですが、インタラクションが伴う表形式UIにはgridという分類です。「テーブル」というワードが一般的に使われることが多いため、混同することも多いのではと思いますが、ARIAの観点ではこのように区別されています。

そして、ARIA grid patternでは、gridのパターンを2つのカテゴリーに分けています。

Uses of the grid pattern broadly fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids).

https://www.w3.org/WAI/ARIA/apg/patterns/grid/

カテゴリー 概要
Data Grids 表形式の情報を提示するために使用されるグリッド。セルの選択や編集、ソートなどの操作が可能なUIに使用する。
Layout Grids 他のウィジェットをグループ化するために使用されるグリッド。レイアウト目的で使用され、セルの選択や編集などの操作は通常含まれない。

React AriaのTableは、データ表示に対するコンポーネントなので、ARIA gridパターンの中でも「Data Grids」に該当すると言えるでしょう。
したがって、React AriaのTableコンポーネントを理解するためには、このData Gridパターンについて知ることが必要になります。

Data Gridパターン

では、Data Gridパターンとは具体的にどのようなものなのでしょうか。ツリー構造で見ると以下のようになります。

Data Gridパターンのツリー構造

table要素の構造とおおむね同じような構造になっていますが、

  • gridcell、columnheader、rowheaderといったセル（またはその内部の要素）にはフォーカス可能で、特にgridcellはフォーカス必須
  • columnheaderやrowheaderも基本的にフォーカス可能であるものの、操作可能ではないセルであれば例外的にフォーカス必須ではない
    • フォーカス可能ではないというのは、例えばソートやフィルターといった操作機能を持たないヘッダーセルのような場合

といったあたりの特徴に違いがみられます。
基本的に全てのセルがフォーカス可能であることで、キーボード操作でセル間を移動したり、セルの内容を編集したりといった操作が可能なものへとつながります。

キーボード操作

gridへのフォーカスは、tabキーで可能ですが、tabキーでセル間を移動することはできません。tabキーでフォーカスし、フォーカスしている状態でtabキーを押すとフォーカスが外れます。

tabキーでフォーカスする
tabキーでフォーカスを外す

tabキーによる移動はgrid全体へのフォーカスの付与と解除という形であり、gridの中のセル間の移動は矢印キー等で行う、というのがData Gridパターンのキーボード操作となります。
おそらくtabキーによる移動を想定していると、ここで戸惑うことになるでしょう。

セル間移動は矢印キーで可能

tab キーは “グリッドという一塊のウィジェット全体の出入り” に使い、 セル間の移動は矢印キーに統一する、というのが Grid パターンの基本的な思想だと理解すると良いかもしれません。

一方、セル間移動の挙動は以下のように「右端まで右矢印キーで移動したらフォーカスはそれ以上移動しない」とありますが、

Right Arrow: Moves focus one cell to the right. If focus is on the right-most cell in the row, focus does not move.

https://www.w3.org/WAI/ARIA/apg/patterns/grid/#datagridsforpresentingtabularinformation

この点はReact AriaのTableコンポーネントでは異なり、右端まで移動した後に右矢印キーを押すと同一行の左端へフォーカスが移動するように公式ドキュメントのサンプルでは動きます。
このような差異を踏まえると、React AriaのTableは「Data Gridパターンのコアとなる構造やフォーカスモデルには従っている。ただし、その全ての記述に従っているわけでない」と言えそうです。

なお、ARIA Authoring Practices Guide にはより高度なセル内部のフォーカス制御も定義されていますが、React Ariaの Table の基本的な振る舞いの理解の範疇からは離れるので割愛します。

Data Gridパターンをふまえて見るReact AriaのTableコンポーネント

ここまで見てきたように、名前こそ “Table” ですが、実態としては ARIA Grid パターンに基づく“インタラクティブな表形式のUI” の性質を持っています。
そのため、HTML table や一般的なTableライブラリーと比べると、挙動に戸惑いを感じる場合があると思います。
コンポーネント名自体を“Data Grid” としていれば、Data Gridパターンに基づくものであることが直感的に理解できたかもしれませんが、"Table"という名前が広く使われていることもあり、命名上のジレンマがあったのかもしれないと憶測で考えています。

コンポーネント名についてはさておき、React Aria の Table を理解するうえで重要なのは、これが “HTML table のアクセシブル版” ではなく、“Data Grid の考え方を土台にしたインタラクティブな表形式 UI” であるという点だと考えられます。
この視点を持つことで、セルのフォーカスや tab と矢印キーの扱いの違いといったポイントが腑に落ちやすくなると思います。
また、Data Gridパターンを理解することで、React AriaのTableコンポーネントの挙動を予測しやすくなると考えられます。

参考

脚注

  1. 主観的な観測に基づくものですが、一般的なウェブアプリケーションの表形式UIとは、例えばGoogleスプレッドシート、あるいはNotionのカレンダーやGitHubのプロジェクトなどのUIを指します。 ↩︎

  2. ARIA Authoring Practices Guideは、WAI-ARIAを活用してアクセシブルなUIを実装するためのガイドとなるW3Cのドキュメントです。 https://www.w3.org/WAI/ARIA/apg/ ↩︎

  3. roleとは、ユーザーインターフェースの要素種別を示す属性です。 https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA ↩︎

GitHubで編集を提案

Discussion