ARIA: rowgroup ロール

role="rowgroup" を持つ要素は、表構造内の行（row）のグループです。 行グループ（rowgroup）には、グリッド(grid)、表（table）、またはツリーグリッド（treegrid）内のセル（cell）、グリッドセル（gridcell）、列ヘッダー（columnheader）、または行ヘッダー（rowheader）の1つ以上の行が含まれます。

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

説明

行グループ（rowgroup）は、所有する行（row）の要素間の関係を確立し、HTML の表ヘッダー（<thead>）、表フッター（<tfoot>） 、および表本体（<tbody>）の要素と構造的に同等です。 ただし、異なる種類の行グループを区別することはできません。 それらの要素は、表（table）またはグリッド（grid）のロールを持つ要素に含まれているか、またはそれらの要素によって所有されている必要があります。 可能な限り、ネイティブの <thead>、<tfoot> 、および <tbody> HTML 要素を使用することを強くお勧めします。

ARIA の表ヘッダー、表フッター、または表本体を作成するには、role="rowgroup" を要素に追加します。 その行グループは、1つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストする必要があります。 各行には子セルが含まれています。 これらのセルは、列ヘッダーか行ヘッダーか、プレーンなセルかグリッドセルかによって、さまざまなタイプにすることができます。

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

コンテキストロール

role="table"

行を見つけることができる3つのコンテキスト（グリッドとツリーグリッドを含む）の1つで、ネイティブの <table> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。

role="grid"

行を見つけることができる3つのコンテキスト（表とツリーグリッドを含む）の1つで、ネイティブの <table> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。

role="treegrid"

グリッドと似ていますが、ツリーの場合と同じ方法で行を展開したり折りたたんだりすることができます。

子孫のロール

role="row"

表構造内のセルの行。 行には、1つ以上のセル（cell）、グリッドセル（gridcell）、または列ヘッダー（columnheader）が含まれ、場合によっては行ヘッダー（rowheader）も含まれます。

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

無し

必要な JavaScript 機能

無し。

例

<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 の表で、DOM には81行のうち5行が含まれています。 表ヘッダー内に1行、表本体内に4行あります。 ヘッダー行は、ヘッダーの行グループに単独であり、2つの列ヘッダーを持ちます。 aria-sort プロパティで示されるように、列はソート可能ですが、現在はソートされていません。 表本体は独立した行グループで、現在 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>
   </tbody>
 </table>

上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、display プロパティを flex または grid に設定すると表の行が消されます。
 

追加された利点

無し

仕様

関連情報

• HTML の表
• HTML の表本体
• HTML の表フッター
• HTML の表ヘッダー