ARIA: cell ロール

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

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

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

コンテキストのロール

role="row"

role="row" の要素は、表形式構造内のセルの行です。 行には、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内において、そして任意で行グループ (rowgroup) 内において、1 つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。

role="rowgroup"

行はセルの親として必須です。 行グループ (rowgroup) は、任意のコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表 (table) 要素の thead, tfoot, tbody 要素と構造的に同等です。

role="table"

セルを含む行を見つけることができる、グリッド (grid) とツリーグリッド (treegrid) と共に 3 つの可能なコンテキストのうちの 1 つ。 表 (table) は、セルを、ネイティブな HTML の <table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として識別します。

role="grid"

セル (cell) とグリッドセル (gridcell) を含む行を見つけることができる、表 (table) とツリーグリッド (treegrid) と共に 3 つの可能なコンテキストのうちの 1 つ。 グリッド (grid) は、セルを、ネイティブな HTML <table> 要素と同様に、行と列に配置されたデータを含むインタラクティブかもしれない表構造の一部として識別します。

role="treegrid"

グリッド (grid) に似ていますが、ツリー (tree) と同じ方法で展開や折りたたみができる行があります。

サブクラスのロール

role="gridcell"

グリッド (grid) やツリーグリッド (treegrid) 内の行内のセル。

role="columnheader"

列スコープを持つ HTML <th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、列ヘッダー (columnheader) ロールは、対応する列の全てのセルとの関係を確立します。

role="rowheader"

行スコープを持つ HTML <th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、行ヘッダー (rowheader) ロールは、対応する行の全てのセルとの関係を確立します。

ステートとプロパティ

aria-colspan

HTML の <th> と <td> 要素の colspan 属性と同様に、セルにまたがる列数を定義します。

aria-rowspan

HTML の <th> と <td> 要素の rowspan 属性と同様に、セルにまたがる行数を定義します。

aria-colindex 属性

aria-colindex 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 から表 (table)、グリッド (grid)、ツリーグリッド (treegrid) 内の総列数の間の整数をとります。 aria-colindex は、行内の総列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。

aria-rowindex 属性

aria-rowindex 属性は、行が DOM から隠されている場合にのみ必要で、現在のセルが総ての行のリスト内のどの行かを示します。 この属性は、値として 1 から表 (table)、グリッド (grid)、ツリーグリッド (treegrid) 内の総行数の間の整数をとり、セルの位置またはインデックスを示します。 たとえば、最初のヘッダーの最初の行のセルは aria-rowindex="1" と設定され、47 行目のセルは、DOM 内に全ての行が存在しないために aria-rowindex が必要な場合は、aria-rowindex="47" となるでしょう。 表示されている行が連続していて、colspan や rowspan が 1 より大きいセルがない場合、このプロパティは行の全てのセルの代わりに親の行に追加できます。

無し

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

<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) ロールを使用して意味論を戻すことができます。

<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; などで意味づけが削除された場合に、その要素にセルの意味づけを返します。

• role="row"
• role="gridcell"
• HTML <td> 要素
• HTML <th> 要素
• HTML 表の高度な機能とアクセシビリティ
• HTML の表の基本