ARIA: cell ロール

{{ariaref}}

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

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

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

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

説明

role="cell" を持つ要素は、gridtabletreegrid 内の、row 内のセル(オプションで rowgroup 内のセル)であり、静的な表形式の構造内にあります。 可能であれば、ネイティブな HTML <td> 要素を使用することを強く推奨します。

role="row" を持つコンテナ要素内に、role="cell" を持つ各要素をネストしなければなりません(MUST)。 この行(row)は、role="rowgroup" を持つ要素内にネストすることができ、gridtabletreegrid 内にネストするべきです。 セルに列ヘッダーまたは行ヘッダーの情報が含まれている場合は、それぞれ colheader ロールや rowheader ロールを使用します。 セルにヘッダー情報が含まれておらず、gridtreegrid にネストされている場合、gridcell ロールがより適切な場合があります。

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

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

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

コンテキストロール

role="row"
role="row" の要素は、表形式の構造内のセルの行です。 行には、gridtabletreegrid 内において1つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。 オプションで rowgroup 内にも含まれます。
role="rowgroup"
行はセルの親として必須です。 行グループ(rowgroup)は、オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の theadtfoottbody 要素と構造的に同等です。
role="table"
gridtreegrid と共に3つの可能なコンテキストのうちの1つで、セルを含む行が見つかります。 表(table)は、セルを、ネイティブな <table> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部として識別します。
role="grid"
tabletreegrid と共に3つの可能なコンテキストのうちの1つで、セルとグリッドセル(gridcell)を含む行が見つかります。 グリッド(grid)は、セルを、ネイティブな <table> HTML 要素と同様に、行と列に配置されたデータを含む対話型の可能性のある表構造の一部として識別します。
role="treegrid"
grid に似ていますが、tree と同じ方法で展開や折りたたみができる行があります。

サブクラスロール

role="gridcell"
gridtreegrid 内の行内のセル。
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 と tablegridtreegrid 内の全列数の間の整数をとります。 aria-colindex は、行内の全列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。

aria-rowindex 属性

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

 

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

無し

必要な JavaScript 機能

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 は行の個々のセルではなく行に配置されている可能性があります。

ベストプラクティス

データ表構造には、tabletbodytheadtrthtd などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 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>

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

追加された利点

無し

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
ARIA Cell Role の定義
勧告
WAI-ARIA Authoring Practices
ARIA Cell Role の定義
草案

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,