ARIA: table ロール

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 を使用してください。

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" を設定してください。

無し

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

<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>

上記は表の一部です。 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 ロール