ARIA: row ロール

行ロール (role="row") を持つ要素は、表形式の構造内に並んだセルの一行です。行には、1 つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。行は、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内に含まれ、任意で行グループ (rowgroup) 内に含まれることもあります。

html

<div role="table" aria-label="人口" aria-describedby="country_population_desc">
  <div id="country_population_desc">国別世界人口</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">国</span>
      <span role="columnheader" aria-sort="none">人口</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">フィンランド</span>
      <span role="cell">550 万</span>
    </div>
    <div role="row">
      <span role="cell">フランス</span>
      <span role="cell">6700 万</span>
    </div>
  </div>
</div>

説明

行ロール (role="row") 要素は、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内の行であり、任意で行グループ (rowgroup) 内の行です。行は、静的な表構造内の 1 つ以上のセル (cell)、グリッドセル (gridcell)、列ヘッダー (columnheader)、行ヘッダー (rowheader) のコンテナーです。可能な限り、ネイティブな HTML の <tr> 要素を使用することを強く推奨します。

ARIA の行を作成するには、コンテナー要素に行ロール (role="row") を追加します。その行は、グリッド、表、ツリーグリッド内にネストするべきです。行のグループは、グリッド、表、ツリーグリッド内に直接ネストすることも、これらのコンテナー内の行グループ内にネストすることもできます。それぞれの行には子のセルが含まれています。これらのセルには、列や行のヘッダー、グリッドや普通のセルとさまざまな種類のセルがあります。

行には、aria-colindex、aria-level、aria-rowindex、aria-selected など、行のロールを明確にする多くの属性を含めることができます。

行がツリーグリッド内にある場合、行には aria-expanded 属性を含めることができ、この属性を使って現在の (展開、折りたたみ) 状態を示すことができます。これは、aria-expanded 属性が存在しない通常の表やグリッドの場合には当てはまりません。

表形式の構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用します。インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションを提供する場合や、ユーザーインターフェイスでセルの順序を入れ替えたり、ドラッグアンドドロップなどで個々のセルの順序を変更したりできる場合は、代わりにグリッド (grid) やツリーグリッド (treegrid) を使用してください。

メモ: 可能な限り、ネイティブな HTML の表要素 (<table>) を表の行要素 (<tr>) と共に使用することを強く推奨します。

キーボードインタラクション

無し

必要な JavaScript 機能

無し。ソート可能な列については、列ヘッダー (columnheader) ロールを参照してください。

メモ: ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを追加することでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。可能な限り、ARIA の表ロールの代わりに HTML の <table> 要素を使用してください。

例

html

<div
  role="table"
  aria-label="意味論的な要素"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <div id="semantic_elements_table_desc">
    ARIA のロールの代わりに使用する意味論的な要素
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="none">ARIA のロール</span>
      <span role="columnheader" aria-sort="none">意味論的な要素</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">dt</span>
    </div>
  </div>
</div>

上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。表のヘッダー内に 1 行、表の本体内に 4 行あります。ヘッダー行は、ヘッダーの行グループ内に単独であり、2 つの列ヘッダーを持ちます。列はソート可能ですが、aria-sort プロパティで示されているように、現在はソートされていません。表の本体は別の行グループにあり、現在 DOM 内に 4 行あります。全ての行が DOM 内にあるわけではないため、全ての行に aria-rowindex プロパティを含めています。

ベストプラクティス

データ表構造には、<table>、<tbody>、<thead>、<tr>、<th>、<td> などのみを使用してください。これらに ARIA ロールを追加することで、CSS などで表のネイティブな意味論が取り除かれても、アクセシビリティを確保することができます。 ARIA の表ロールの関連するユースケースは、display: grid など、CSS の display プロパティによって表のネイティブな意味論がオーバーライドされる場合です。この場合、ARIA の表ロールを使用して意味論を追加し直すことができます。

html

<table
  role="table"
  aria-label="意味論的な要素"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <caption id="semantic_elements_table_desc">
    ARIA のロールの代わりに使用する意味論的な要素
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none">ARIA のロール</th>
      <th role="columnheader" aria-sort="none">意味論的な要素</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
    <tr role="row" aria-rowindex="18">
      <td role="cell">rowgroup</td>
      <td role="cell">thead</td>
    </tr>
    <tr role="row" aria-rowindex="24">
      <td role="cell">term</td>
      <td role="cell">dt</td>
    </tr>
  </tbody>
</table>

上記は、表の意味論的な書き方です。 ARIA のロールが必要になるのは、display プロパティを flex や grid に設定するなどして、表のネイティブな意味論、つまり表の行が完全に破壊されてしまう場合だけです (訳注: ここでの grid は、CSS グリッドレイアウトというグリッドロールとは全く別のものであることに注意してください) 。

追加された利点

無し

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # row
Unknown specification

ARIA: row ロール

説明

関連する WAI-ARIA のロール、ステート、プロパティ

コンテキストロール

子孫のロール

ステートとプロパティ

キーボードインタラクション

必要な JavaScript 機能

例

ベストプラクティス

追加された利点

仕様書

関連情報