aria-colindex
aria-colindex
属性は table
、grid
、treegrid
内の全列数に対する要素の列インデックスまたは位置を定義します。
解説
表によってはとても大きく、コンテンツの一部しか表示されないものもあります。列の一部だけを読み込むことでユーザー使い勝手を向上させることができますが、コンテンツのどの部分が表示されているのか、また表のコンテンツがすべて存在するわけではないことをすべてのユーザーに知らせる必要があります。
ARIA は table
, grid
, treegrid
構造に関する情報を提供するためにいくつかの属性を指定されました。 aria-colindex
属性は、そのような構造内の部分構造、要素の列インデックス、または列の総数に対する位置を定義します。
aria-colcount
属性と併用することで、 aria-colindex
は、表の列がすべて表示された場合に、その列がいくつあるかを支援技術に通知します。
すべての列が DOM に存在している場合、ユーザーエージェントは各セルまたはグリッドセルの列インデックスを計算することができるため、 aria-colindex
を記載する必要はありません。しかし、いずれかの列がいずれかの時点で DOM から抜けている場合は、aria-colindex
を使用して、表の全列に対する各セルまたはグリッドセルの列を示します。
aria-colindex
の値は 1 以上の整数です。それぞれの値は前回の aria-colindex
より大きく、表の列数以下の値でなければなりません。
セルまたはグリッドセルが複数の列にまたがっている場合、 <td>
と <th>
を使用していない場合は、 aria-colspan
にその列の数を設定します。また、 aria-colindex
にはまたがる範囲の始まりの値を設定します。最初の列のみにまたがる幅が 1 列であった場合の値を示します。
DOM に存在する一連の列が連続しており、複数の行や列にまたがるセルが存在しない場合、 aria-colindex
を各行の 1 行目に設定するだけでよくなります。列が連続していない場合は、各行の子要素または自分自身で所有する要素すべてに aria-colindex
の値を記載します。
次の例は 6 列のグリッドを表示させており、そのうち 1、2、5、6 列目がユーザーに表示されます。表を構成する列の総数は表自体で aria-colcount="6"
として設定します。列は連続していないので、すべての cell
- この場合、columnheader
と gridcell
要素 - には aria-colindex
属性が設定されています。
<div role="grid" aria-colcount="6">
<div role="rowgroup">
<div role="row">
<div role="columnheader" aria-colindex="1">First name</div>
<div role="columnheader" aria-colindex="2">Last name</div>
<div role="columnheader" aria-colindex="5">City</div>
<div role="columnheader" aria-colindex="6">Zip</div>
</div>
</div>
<div role="rowgroup">
<div role="row">
<div role="gridcell" aria-colindex="1">Debra</div>
<div role="gridcell" aria-colindex="2">Burks</div>
<div role="gridcell" aria-colindex="5">New York</div>
<div role="gridcell" aria-colindex="6">14127</div>
</div>
</div>
…
</div>
ARIA 使用の最初のルールは、「要素を再利用し、それをアクセシビリティにするために ARIA ロール、状態、プロパティを追加する代わりに、要求される意味づけと動作がすでに組み込まれたネイティブ機能を使用することができるのであれば、そうすること」です。 <table>
、<th>
、<td>
などでネイティブの HTML の意味づけを採用し、列のサブセクションのみを表示する場合、 aria-colcount
属性と aria-colindex
属性はまだ必要ですが、マークアップはそれほど冗長ではありません。
意味づけされた表のヘッダー要素を使用していて、すべての列が DOM にない場合、aria-colindex
属性は列ヘッダー <th>
の列ごとに一度だけ定義する必要があります。
<table aria-colcount="6">
<thead>
<tr>
<th aria-colindex="1" scope="col">First name</th>
<th aria-colindex="2" scope="col">Last name</th>
<th aria-colindex="5" scope="col">City</th>
<th aria-colindex="6" scope="col">Zip</th>
</tr>
</thead>
<tbody>
<tr>
<td>Debra</td>
<td>Burks</td>
<td>New York</td>
<td>14127</td>
</tr>
…
</tbody>
</table>
すべての列が DOM 内にある場合は、aria-colcount
も aria-colindex
も必要ありません。
値
<integer>
-
すべて表示する場合の、 1 以上、列の総数以下の整数。
関連インターフェイス
Element.ariaColIndex
-
ariaColIndex
プロパティはElement
インターフェイスの一部で、aria-colindex
属性の値を反映します。 ElementInternals.ariaColIndex
-
ariaColIndex
プロパティはElementInternals
インターフェイスの一部で、aria-colindex
属性の値を反映します。
関連付けられたロール
仕様書
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-colindex |
関連情報
aria-colindextext
属性aria-colcount
属性aria-colspan
属性- HTML
<table>
要素 - HTML
<th>
要素 - HTML
<td>
要素