ARIA: cell ロール

cell は ARIA の role 属性の値で、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナー内のセルとして識別します。サポートされるには、セルが行 (row) ロールを持つ要素内にネストされている必要があります。

html

<div role="row">
  <span role="cell">フランス</span>
  <span role="cell">6700 万</span>
</div>

上のセルの書き方のより良い、より意味論的な方法は、意味論的な <td> 要素を使うことです。

html

<tr role="row">
  <td role="cell">フランス</td>
  <td role="cell">6700 万</td>
</tr>

解説

role="cell" を持つ要素は、表 (table) の中にあり、任意で行グループ (rowgroup)の中にある、行の中のセルです。セルがグリッド (grid) またはツリーグリッド (treegrid (en-US)) 内にある場合は、グリッドセル (gridcell) を選択してください。可能であれば、ネイティブの HTML の <td> 要素を使用することを強く推奨します。

role="cell" を持つ各要素は、 role="row" を持つコンテナー要素内に入っていなければなりません (MUST)。この行は、role="rowgroup" を持つ要素内に入れることができ、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) のいずれかの中に入れてください。セルに列または行のヘッダーの情報が含まれている場合は、それぞれ列ヘッダー (columnheader) ロールや行ヘッダー (rowheader) ロールを使用してください。セルにヘッダー情報が含まれておらず、グリッド (grid) やツリーグリッド (treegrid) の中に入っている場合は、グリッドセル (gridcell) ロールの方が適切な場合があります。

セルには、 aria-colindex, aria-colspan (en-US), aria-rowindex (en-US), aria-rowspan (en-US) など、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。

メモ: 可能であれば、ネイティブな HTML 表要素 (<table> を、表の行要素 (<tr> および表のセル要素 (<td> と共に使用することを強く推奨します。

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

無し

必要な JavaScript 機能

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

例

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-rowindex="1"
        >ARIA ロール</span
      >
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
        >意味論的な要素</span
      >
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell" aria-rowindex="11">header</span>
      <span role="cell" aria-rowindex="11">h1</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="16">header</span>
      <span role="cell" aria-rowindex="16">h6</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="18">rowgroup</span>
      <span role="cell" aria-rowindex="18">thead</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="24">term</span>
      <span role="cell" aria-rowindex="24">dt</span>
    </div>
  </div>
</div>

上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。表のヘッダー内に 1 行、表の本体内に 4 行あります。全ての行が DOM 内にあるわけではないので、全てのセルに aria-rowindex プロパティを含めています。複数の行や列にまたがるセルがない場合、aria-rowindex は行の個々のセルではなく行に配置されている可能性があります。

ベストプラクティス

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

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-rowindex="1">
        ARIA ロール
      </th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        意味論的な要素
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>

上記は、表を作成する意味論的な方法です。表のネイティブな意味論、つまり表の行が、display プロパティなどを介して変更されていない場合、ARIA ロールは必要ありません。

追加された利点

<td> に適用すると、display: grid; などで意味づけが削除された場合に、その要素にセルの意味づけを返します。

仕様

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

ARIA: cell ロール

解説

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

コンテキストのロール

サブクラスのロール

ステートとプロパティ

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

必要な JavaScript 機能

例

ベストプラクティス

追加された利点

仕様

関連情報