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" を持つ要素は、静的な表形式構造内のグリッド (grid)、表 (table)、またはツリーグリッド (treegrid) 内の、任意で行グループ (rowgroup) 内の、行内のセルです。 可能であれば、ネイティブな HTML <td> 要素を使用することを強く推奨します。
role="row" を持つコンテナー要素内に、role="cell" を持つ各要素をネストしなければなりません (MUST)。 この行は、role="rowgroup" を持つ要素内にネストすることができ、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内にネストするべきです。 セルに列ヘッダーまたは行ヘッダーの情報が含まれている場合は、それぞれ列ヘッダー (columnheader) ロールや行ヘッダー (rowheader) ロールを使用します。 セルにヘッダー情報が含まれておらず、グリッド (grid) やツリーグリッド (treegrid) にネストされている場合、グリッドセル (gridcell) ロールがより適切な場合があります。
セルには、aria-colindex、aria-colspan、aria-rowindex、aria-rowspan など、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。
可能であれば、ネイティブな HTML 表要素 (<table>) を、表の行要素 (<tr>) および表のセル要素 (<td>) と共に使用することを強く推奨します。
role="row" の要素は、表形式構造内のセルの行です。 行には、グリッド (grid)、表 (table)、ツリーグリッド (treegrid) 内において、そして任意で行グループ (rowgroup) 内において、1つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。rowgroup) は、任意のコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表 (table) 要素の thead、tfoot、tbody 要素と構造的に同等です。grid) とツリーグリッド (treegrid) と共に3つの可能なコンテキストのうちの1つ。 表 (table) は、セルを、ネイティブな HTML <table> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として識別します。cell) とグリッドセル (gridcell) を含む行を見つけることができる、表 (table) とツリーグリッド (treegrid) と共に3つの可能なコンテキストのうちの1つ。 グリッド (grid) は、セルを、ネイティブな HTML <table> 要素と同様に、行と列に配置されたデータを含むインタラクティブかもしれない表構造の一部として識別します。grid) に似ていますが、ツリー (tree) と同じ方法で展開や折りたたみができる行があります。grid) やツリーグリッド (treegrid) 内の行内のセル。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、列ヘッダー (columnheader) ロールは、対応する列の全てのセルとの関係を確立します。<th> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、行ヘッダー (rowheader) ロールは、対応する行の全てのセルとの関係を確立します。<th> と <td> 要素の colspan 属性と同様に、セルにまたがる列数を定義します。<th> と <td> 要素の rowspan 属性と同様に、セルにまたがる行数を定義します。aria-colindex 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 から表 (table)、グリッド (grid)、ツリーグリッド (treegrid) 内の総列数の間の整数をとります。 aria-colindex は、行内の総列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。
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 ロールは必要ありません。
無し
| 仕様 | 状態 |
|---|---|
| {{SpecName("ARIA","#cell","ARIA Cell Role")}} | {{Spec2('ARIA')}} |
| {{SpecName("ARIA Authoring Practices","#cell","ARIA Cell Role")}} | {{Spec2('ARIA Authoring Practices')}} |