ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの<table> HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。

<div  role="table"  aria-label="意味論的な表の要素"  aria-describedby="semantic_table_desc">  <div>    ARIA の table ロールの代わりに使用する意味論的な要素  </div>  <div role="rowgroup">    <div role="row">      <span role="columnheader">ARIA の table ロール</span>      <span role="columnheader">意味論的な要素</span>    </div>  </div>  <div role="rowgroup">    <div role="row">      <span role="cell">table</span>      <span role="cell">table</span>    </div>    <div role="row">      <span role="cell">rowgroup</span>      <span role="cell">thead, tbody, or tfoot </span>    </div>  </div></div>

説明

role="table" を持つ要素はセルを含む行を持つ静的な表構造です。 表の個々のセル内のウィジェットはインタラクティブになることがありますが、セルはフォーカス可能または選択可能ではありません。 可能な限りネイティブの HTML<table> 要素を使用することを強くお勧めします。

ARIA の表を作成するには、role="table" をコンテナー要素に追加します。 そのコンテナー内では、各行にrole="row" を設定し、子セルを含ませます。 各セルには、列ヘッダー（columnheader）、行ヘッダー（rowheader）、または単なるセル（cell）のいずれかのロールがあります。 行は、表の子になることも、行グループ（rowgroup）内になることもあります。

表のキャプションは、aria-labelledby、aria-label、またはaria-describeby によって定義できます。<tbody>、<thead>、<tr>、<th>、<td> など、他のすべての意味論的な表の要素は、rowgroup、row、columnheader、cell などの関連するロールを介して追加する必要があります。

表にソート可能な列または行が含まれる場合は、aria-sort 属性をヘッダーのセル要素に追加する必要があります（表自体ではありません）。 ある行または列が隠されている場合は、それぞれのセルのaria-colindex またはaria-rowindex とともに、それぞれ列または行の総数を示すaria-colcount またはaria-rowcount を含める必要があります。aria-colindex またはaria-rowindex は、それぞれ行または列内のセルの位置に設定します。 表に複数行または複数列にわたるセルが含まれる場合は、aria-rowspan またはaria-colspan も含める必要があります。 すべての支援技術でサポートされているすべての関連する意味論的な要素および属性と共に、<table> 要素を単純に使用する方がはるかに簡単です。

表構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用してください。 インタラクションが個々のセルの選択状態を提供する場合、左から右へ、上から下へのナビゲーションを提供する場合、またはユーザーインターフェイスでセルの順序の並べ替えやドラッグアンドドロップなどの個々のセルの順序の変更を許可する場合、代わりにgrid またはtreegrid を使用してください。

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

role="rowgroup"

表のオプションの子である行グループは、<thead>、<tbody>、および<tfoot> と同様に、行のグループをカプセル化します。

role="row"

表内の行、およびオプションで行グループ（rowgroup）内の行、つまり 1 つ以上のセル（cell）、列ヘッダー（columnheader）、または行ヘッダー（rowheader）のコンテナーです。

aria-describedby 属性

値として、表のキャプションとして機能する要素のid を取ります。

aria-label 属性

aria-label は、表にアクセス可能な名前を提供します。

aria-colcount 属性

この属性は、ある列が常に DOM に存在しない場合にのみ必要です。 全表の列数を明示的に示します。 値を全表の列の総数に設定します。 不明な場合は、aria-colcount="-1" を設定してください。

aria-rowcount 属性

この属性は、DOM ノードの数を最小限に抑えるために行を再利用するスクロール可能な表など、ある行が常に DOM に存在しない場合にのみ必要です。 全表の行数を明示的に示します。 値を全表の行の総数に設定します。 不明な場合は、aria-rowcount="-1" を設定してください。

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

無し

必要な JavaScript 機能

無し。 ソート可能な列については、columnheader ロールを参照してください。

例

<div  role="table"  aria-label="意味論的な要素"  aria-describedby="semantic_elements_table_desc"  aria-rowcount="81">  <div>    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>

上記は表の一部です。aria-rowcount プロパティで示されるように、全表には 81 のエントリーがありますが、現在表示されているのは 4 つだけです。 列ヘッダーのaria-sort プロパティで示されるように、列はソート可能ですが、現在はソートされていません。

ベストプラクティス

データ表構造には、<table>、<tbody>、<thead>、<tr>、<th>、<td> などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA のtable ロールの関連するユースケースは、display: grid など、CSS のdisplay プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA のtable ロールを使用して意味論を戻すことができます。

追加された利点

無し

仕様書

関連情報

• HTML の表要素
• ARIA: grid ロール