role="row"
の要素は、表形式の構造内のセルの行(row)です。 行には、grid
、table
、treegrid
内の1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 オプションで rowgroup
内にも含まれます。
<div role="table" aria-label="人口" aria-describedby="country_population_desc">
<div id="country_population_desc">国別世界人口</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="descending">国</span>
<span role="columnheader"aria-sort="none">人口</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">フィンランド</span>
<span role="cell">550 万</span>
</div>
<div role="row">
<span role="cell">フランス</span>
<span role="cell">6700 万</span>
</div>
</div>
</div>
説明
role="row"
を持つ要素は、grid
、table
、treegrid
内の行で、オプションで rowgroup
内の行です。 行は、静的な表構造内の1つ以上の cell
、gridcell
、columnheader
、rowheader
のコンテナです。 可能であれば、ネイティブな HTML <tr>
要素を使用することを強く推奨します。
ARIA の行を作成するには、コンテナ要素に role="row"
を追加します。 その行は、grid
、table
、treegrid
内にネストするべきです。 行のグループは、grid
、table
、treegrid
内に直接ネストすることができますし、これらのコンテナ内の rowgroup
内に配置することもできます。 それぞれの行には子のセルが含まれています。 これらのセルは、列ヘッダーや行ヘッダーやグリッドセルや普通のセルの異なるタイプのセルにすることができます。
行には、aria-colindex
、aria-level
、aria-rowindex
、aria-selected
など、行のロールを明確にする属性だけでなく、多くの属性を含めることができます。
行が treegrid
内にある場合、現在の状態を示す属性を使用して行を展開可能にするため、行に aria-expanded
属性を含めることができます。 これは、aria-expanded
属性が存在しない通常の table
や grid
の場合には当てはまりません。
表形式の構造を持つ対話型のウィジェットを作成するには、代わりに grid
のパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションが提供されている場合や、ユーザインタフェースがセル順序の再配置を許可する場合や、ドラッグアンドドロップなどで個々のセル順序の変更が可能な場合は、代わりに grid
や treegrid
を使用します。
注: 可能であれば、表の行要素(<tr>
)と共にネイティブな HTML 表要素(<table>
)を使用することを強く推奨します。
関連する WAI-ARIA のロール、ステート、プロパティ
コンテキストロール
- role="rowgroup"
- オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の
thead
、tfoot
、tbody
要素と構造的に同等です。 - role="table"
grid
とtreegrid
と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな<table>
HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。- role="grid"
table
とtreegrid
と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな<table>
HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。- role="treegrid"
grid
に似ていますが、tree
と同じ方法で展開や折りたたみができる行があります。
子孫のロール
- role="cell"
- 表形式のコンテナ内の行内のセル。
- role="gridcell"
grid
内またはtreegrid
内の行内のセル。- role="columnheader"
- 列スコープを持つ HTML
<th>
要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、columnheader
ロールは、対応する列の全てのセルとの関係を確立します。 - role="rowheader"
- 行スコープを持つ HTML
<th>
要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、rowheader
ロールは、対応する行の全てのセルとの関係を確立します。
ステートとプロパティ
- aria-expanded ステート
-
行の状態を定義する
aria-expanded
属性は、次の3つの値のいずれかを取るか省略することができます。aria-expanded="true
: 行は現在展開されています。aria-expanded="false"
: 行は現在折りたたまれています。aria-expended="undefined"
、または属性がない: 行は展開も折りたたみもできません。
aria-expanded
属性を持つ要素が、要素が '所有していない' 別のグループ化コンテナの展開を制御する場合、aria-controls
属性を使用してコンテナを参照するべきです(SHOULD)。 - aria-selected ステート
grid
やtreegrid
などの対話型のコンテナ内に行がある場合のみ関連し、行がtable
の行の場合は関連しません。aria-selected
属性は、次の3つの値のいずれかを取るか省略することができます。aria-selected="true
: 行は現在選択されています。aria-selected="false"
: 行は現在選択されていません。aria-selected="undefined"
、または属性がない: 行は選択できません。
- aria-colindex 属性
-
aria-colindex
属性は、列が DOM から隠されている場合にのみ必要であり、一般的に行に置くことができるときに表示される列が連続していない限り、行自体ではなく行の子に配置されます。
この属性は、値として、1 とtable
、grid
、treegrid
内の全列数の間の整数をとります。aria-colindex
は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 たとえば、表内に 15 列あり、4、5、6 列のみが DOM にある場合、全ての行にaria-colindex="4"
を設定できます。
DOM に存在する列のセットが連続していない場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子にaria-colindex
を配置します。全ての列が DOM 内にある場合、この属性は必要ありません。
- aria-rowindex 属性
-
aria-rowindex
属性は、行が DOM から隠されている場合にのみ必要で、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 とtable
、grid
、treegrid
内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 たとえば、テーブル内に 1,500 行があり、47 行目と 52 行目とヘッダーのみが DOM にある場合は、ヘッダー行にaria-rowindex="1"
が設定され、47 行目と 52 行目にそれぞれaria-rowindex="47"
とaria-rowindex="52"
が設定されます。全ての行が DOM に存在する場合、この属性は必要ありません。
キーボードインタラクション
無し
必要な JavaScript 機能
無し。 ソート可能な列については、columnheader
ロールを参照してください。
ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の table
ロールの代わりに HTML の <table>
要素を使用してください。
例
<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 のロール</span>
<span role="columnheader" aria-sort="none">意味論的な要素</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="11">
<span role="cell">header</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">header</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">rowgroup</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">term</span>
<span role="cell">dt</span>
</div>
</div>
</div>
上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの rowgroup
内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、aria-sort
プロパティで示されているように、現在はソートされていません。 表の本体は別の rowgroup
にあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に aria-rowindex
プロパティを追加しました。
ベストプラクティス
データ表構造には、table
、tbody
、thead
、tr
、th
、td
などのみを使用します。 アクセシビリティを確保するために 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 のロール</th>
<th role="columnheader" aria-sort="none">意味論的な要素</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" aria-rowindex="11">
<td role="cell">header</td>
<td role="cell">h1</td>
</tr>
<tr role="row" aria-rowindex="16">
<td role="cell">header</td>
<td role="cell">h6</td>
</tr>
<tr role="row" aria-rowindex="18">
<td role="cell">rowgroup</td>
<td role="cell">thead</td>
</tr>
<tr role="row" aria-rowindex="24">
<td role="cell">term</td>
<td role="cell">dt</td>
</tr>
</tbody>
</table>
上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、display プロパティを flex または grid に設定すると表の行が消されます。
追加された利点
無し
仕様
仕様 | 状態 |
---|---|
Accessible Rich Internet Applications (WAI-ARIA) 1.1 ARIA row role の定義 |
勧告 |
Unknown ARIA row role の定義 |
不明 |