files/ja/web/accessibility/aria/roles/rowgroup_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

---
title: 'ARIA: rowgroup ロール'
slug: Web/Accessibility/ARIA/Roles/Rowgroup_Role
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Rowgroup_Role
---
<div>\{{ariaref}}</div>

<p>role="rowgroup" を持つ要素は、表構造内の行（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code>）のグループです。 行グループ（<code>rowgroup</code>）には、グリッド(<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>)、表（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>）、またはツリーグリッド（<code>treegrid</code>）内のセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）、グリッドセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code>）、列ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code>）、または行ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_Role">rowheader</a></code>）の1つ以上の行が含まれます。</p>

<pre class="brush: html">&lt;div role="table" aria-label="人口" aria-describedby="country_population_desc"&gt;
   &lt;div id="country_population_desc"&gt;国別世界人口&lt;/div&gt;
   &lt;div role="rowgroup"&gt;
      &lt;div role="row"&gt;
         &lt;span role="columnheader" aria-sort="descending"&gt;国&lt;/span&gt;
         &lt;span role="columnheader" aria-sort="none"&gt;人口&lt;/span&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div role="rowgroup"&gt;
     &lt;div role="row"&gt;
        &lt;span role="cell"&gt;フィンランド&lt;/span&gt;
        &lt;span role="cell"&gt;550 万&lt;/span&gt;
     &lt;/div&gt;
     &lt;div role="row"&gt;
        &lt;span role="cell"&gt;フランス&lt;/span&gt;
        &lt;span role="cell"&gt;6700 万&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<h2 id="Description" name="Description">説明</h2>

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

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

<div class="note">
<p><strong>注</strong>: 可能であれば、ネイティブの HTML 表要素（<code>&lt;table&gt;</code>）を表ヘッダー（<code>&lt;thead&gt;</code>）、表フッター（<code>&lt;tfoot&gt;</code>）、および表本体（<code>&lt;tbody&gt;</code>）の要素と共に使用することを強くお勧めします。</p>
</div>

<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3>

<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4>

<dl>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt>
 <dd>行を見つけることができる3つのコンテキスト（グリッドとツリーグリッドを含む）の1つで、ネイティブの <code>&lt;table&gt;</code> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。</dd>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt>
 <dd>行を見つけることができる3つのコンテキスト（表とツリーグリッドを含む）の1つで、ネイティブの <code>&lt;table&gt;</code> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。</dd>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">role="treegrid"</a></dt>
 <dd>グリッドと似ていますが、ツリーの場合と同じ方法で行を展開したり折りたたんだりすることができます。</dd>
</dl>

<h4 id="Descendant_Roles" name="Descendant_Roles">子孫のロール</h4>

<dl>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt>
 <dd>表構造内のセルの行。 行には、1つ以上のセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）、グリッドセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code>）、または列ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code>）が含まれ、場合によっては行ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_Role">rowheader</a></code>）も含まれます。</dd>
</dl>

<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3>

<p>無し</p>

<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3>

<p>無し。</p>

<div class="note">
<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを<strong>追加して</strong>アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code> ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。</p>
</div>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html">&lt;div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"&gt;
  &lt;div id="semantic_elements_table_desc"&gt;ARIA のロールの代わりに使用する意味論的な要素&lt;/div&gt;
  &lt;div role="rowgroup"&gt;
     &lt;div role="row"&gt;
       &lt;span role="columnheader" aria-sort="none"&gt;ARIA のロール&lt;/span&gt;
       &lt;span role="columnheader" aria-sort="none"&gt;意味論的な要素&lt;/span&gt;
     &lt;/div&gt;
   &lt;/div&gt;
   &lt;div role="rowgroup"&gt;
    &lt;div role="row" aria-rowindex="11"&gt;
       &lt;span role="cell"&gt;header&lt;/span&gt;
       &lt;span role="cell"&gt;h1&lt;/span&gt;
    &lt;/div&gt;
    &lt;div role="row"  aria-rowindex="16"&gt;
      &lt;span role="cell"&gt;header&lt;/span&gt;
      &lt;span role="cell"&gt;h6&lt;/span&gt;
    &lt;/div&gt;
    &lt;div role="row"  aria-rowindex="18"&gt;
      &lt;span role="cell"&gt;rowgroup&lt;/span&gt;
      &lt;span role="cell"&gt;thead&lt;/span&gt;
    &lt;/div&gt;
    &lt;div role="row"  aria-rowindex="24"&gt;
      &lt;span role="cell"&gt;term&lt;/span&gt;
      &lt;span role="cell"&gt;dt&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<p>上記は、表ヘッダーと表本体を持つ非意味論的な ARIA の表で、DOM には81行のうち5行が含まれています。 表ヘッダー内に1行、表本体内に4行あります。 ヘッダー行は、ヘッダーの行グループに単独であり、2つの列ヘッダーを持ちます。 <code>aria-sort</code> プロパティで示されるように、列はソート可能ですが、現在はソートされていません。 表本体は独立した行グループで、現在 DOM には4行あります。 すべての行が DOM 内にあるわけではないので、すべての行に <code>aria-rowindex</code> プロパティを含めました。</p>

<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2>

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

<pre class="brush: html">&lt;table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"&gt;
  &lt;caption id="semantic_elements_table_desc"&gt;ARIA のロールの代わりに使用する意味論的な要素&lt;/caption&gt;
  &lt;thead role="rowgroup"&gt;
     &lt;tr role="row"&gt;
       &lt;th role="columnheader" aria-sort="none"&gt;ARIA のロール&lt;/th&gt;
       &lt;th role="columnheader" aria-sort="none"&gt;意味論的な要素&lt;/th&gt;
     &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody role="rowgroup"&gt;
     &lt;tr role="row" aria-rowindex="11"&gt;
       &lt;td role="cell"&gt;header&lt;/td&gt;
       &lt;td role="cell"&gt;h1&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr role="row" aria-rowindex="16"&gt;
       &lt;td role="cell"&gt;header&lt;/td&gt;
       &lt;td role="cell"&gt;h6&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
 &lt;/table&gt;</pre>

<p>上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns"><code>display</code> プロパティを <code>flex</code> または <code>grid</code> に</a>設定すると表の行が消されます。<br>
  </p>

<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3>

<p>無し</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
  </tr>
  <tr>
   <td>{{SpecName("ARIA","#rowgroup","ARIA rowgroup role")}}</td>
   <td>{{Spec2('ARIA')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/HTML/Element/table">HTML の表</a></li>
 <li><a href="/ja/docs/Web/HTML/Element/tbody">HTML の表本体</a></li>
 <li><a href="/ja/docs/Web/HTML/Element/tfoot">HTML の表フッター</a></li>
 <li><a href="/ja/docs/Web/HTML/Element/thead">HTML の表ヘッダー</a></li>
</ul>