path: root/files/ja/web/accessibility/aria/roles/row_role/index.html

---
title: 'ARIA: row ロール'
slug: Web/Accessibility/ARIA/Roles/Row_Role
tags:
  - ARIA
  - ARIA Role
  - Accessibility
translation_of: Web/Accessibility/ARIA/Roles/Row_Role
---
<p>行ロール (<code>role="row"</code>) を持つ要素は、表形式の構造内に並んだセルの一行です。 行には、1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 行は、グリッド (<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><a href="/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_role">treegrid</a></code>) 内に含まれ、任意で行グループ (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code>) 内に含まれることもあります。</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>role="row"</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><a href="/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_role">treegrid</a></code>) 内の行であり、任意で行グループ (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code>) 内の行です。 行は、静的な表構造内の1つ以上のセル (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>)、グリッドセル (<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_role"><code>gridcell</code></a>)、列ヘッダー (<a href="/ja/docs/Web/Accessibility/ARIA/Roles/columnheader_role"><code>columnheader</code></a>)、行ヘッダー (<a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_role"><code>rowheader</code></a>) のコンテナーです。 可能な限り、ネイティブな <a href="/ja/docs/Web/HTML/Element/tr">HTML の <code>&lt;tr&gt;</code></a> 要素を使用することを強く推奨します。</p>

<p>ARIA の行を作成するには、コンテナー要素に行ロール (<code>role="row"</code>) を追加します。 その行は、グリッド、表、ツリーグリッド内にネストするべきです。 行のグループは、グリッド、表、ツリーグリッド内に直接ネストすることも、これらのコンテナー内の行グループ内にネストすることもできます。 それぞれの行には子のセルが含まれています。 これらのセルには、列や行のヘッダー、グリッドや普通のセルとさまざまな種類のセルがあります。</p>

<p>行には、<code>aria-colindex</code>、<code>aria-level</code>、<code>aria-rowindex</code>、<code>aria-selected</code> など、行のロールを明確にする多くの属性を含めることができます。</p>

<p>行がツリーグリッド内にある場合、行には <code>aria-expanded</code> 属性を含めることができ、この属性を使って現在の (展開、折りたたみ) 状態を示すことができます。 これは、<code>aria-expanded</code> 属性が存在しない通常の表やグリッドの場合には当てはまりません。</p>

<p>表形式の構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションを提供する場合や、ユーザーインターフェイスでセルの順序を入れ替えたり、ドラッグアンドドロップなどで個々のセルの順序を変更したりできる場合は、代わりにグリッド (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>) やツリーグリッド (<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_role">treegrid</a></code>) を使用してください。</p>

<div class="note">
<p>注: 可能な限り、ネイティブな HTML の表要素 (<code>&lt;table&gt;</code>) を表の行要素 (<code>&lt;tr&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/Rowgroup_Role">role="rowgroup"</a></dt>
 <dd>任意のコンテキスト上の行の親であり、子孫の行の間の関係を確立します。 これは、HTML の表要素の <code>thead</code>、<code>tfoot</code>、<code>tbody</code> 要素と構造的に同等です。</dd>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt>
 <dd>グリッドとツリーグリッドと並んで、行を見つけることができる3つのコンテキストの1つであり、ネイティブな HTML の <code>&lt;table&gt;</code> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として行を識別します。</dd>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt>
 <dd>表とツリーグリッドと並んで、行を見つけることができる3つのコンテキストの1つであり、ネイティブな HTML の <code>&lt;table&gt;</code> 要素と同様に、行と列に配置されたデータを含むインタラクティブでない表構造の一部として行を識別します。</dd>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_role">role="treegrid"</a></dt>
 <dd>グリッドに似ていますが、ツリー (<code>tree</code>) と同じ方法で展開と折りたたみができる行があります (訳注: <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/treegrid/treegrid-1.html">W3C のツリーグリッドによるメール受信ボックスの例</a>では、行単位でのインタラクションも可能となっています) 。</dd>
</dl>

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

<dl>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">role="cell"</a></dt>
 <dd>表形式のコンテナー内の行にあるセル。</dd>
 <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">role="gridcell"</a></dt>
 <dd>グリッドやツリーグリッド内の行にあるセル。</dd>
 <dt>role="columnheader"</dt>
 <dd>列スコープを持つ HTML の <code>&lt;th&gt;</code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、列ヘッダーロールは、対応する列の全てのセルとの関係を確立します。</dd>
 <dt>role="rowheader"</dt>
 <dd>行スコープを持つ HTML の <code>&lt;th&gt;</code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、行ヘッダーロールは、対応する行の全てのセルとの関係を確立します。</dd>
</dl>

<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4>

<dl>
 <dt>aria-expanded ステート</dt>
 <dd>
 <p>行の状態を定義する <code>aria-expanded</code> 属性は、次の3つの値のいずれかを取るか省略することができます。</p>

 <ul>
  <li><code>aria-expanded="true</code>: 行は現在展開されています。</li>
  <li><code>aria-expanded="false"</code>: 行は現在折りたたまれています。</li>
  <li><code>aria-expended="undefined"</code>、または属性がない: 行は展開も折りたたみもできません。</li>
 </ul>

 <p><code>aria-expanded</code> 属性を持つ要素が、その要素が「所有」していない別のグループ化コンテナーの展開を制御する場合、作成者は <code>aria-controls</code> 属性を使用してそのコンテナーを参照する<strong>べき</strong>です。</p>
 </dd>
 <dt>aria-selected ステート</dt>
 <dd>グリッドやツリーグリッドなどのインタラクティブなコンテナー内に行がある場合にのみ関連し、表内に行がある場合は関連しません。 <code>aria-selected</code> 属性は、次の3つの値のいずれかを取るか省略することができます。
 <ul>
  <li><code>aria-selected="true</code>: 行は現在選択されています。</li>
  <li><code>aria-selected="false"</code>: 行は現在選択されていません。</li>
  <li><code>aria-selected="undefined"</code>、または属性がない: 行は選択できません。</li>
 </ul>
 </dd>
 <dt>aria-colindex 属性</dt>
 <dd>
 <p><code>aria-colindex</code> 属性は、列が DOM から隠されている場合にのみ必要です。 一般的に、行自体ではなく、行の子に配置されます。 表示される列が連続している場合は、行に配置できます。<br>
  <br>
  この属性は、値として、1 と表、グリッド、ツリーグリッド内の全列数の間の整数をとります。 <code>aria-colindex</code> は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 例えば、表内に 15 列あり、4、5、6 の列のみが DOM にある場合、全ての行に <code>aria-colindex="4"</code> を設定できます。<br>
  <br>
  DOM に存在する列のセットが連続して<strong>いない</strong>場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子に <code>aria-colindex</code> を配置します (訳注: 全ての列を 1 から昇順に数えたものを昇順に配置します) 。</p>

 <p>全ての列が DOM にある場合、この属性は必要ありません。</p>
 </dd>
 <dt>aria-rowindex 属性</dt>
 <dd>
 <p><code>aria-rowindex</code> 属性は、行が DOM から隠されている場合にのみ必要であり、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と表、グリッド、ツリーグリッド内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 例えば、1,500 行ある表で、ヘッダーと 47 行目と 52 行目のみが DOM に存在する場合、ヘッダー行に <code>aria-rowindex="1"</code> が設定され、47 行目と 52 行目にそれぞれ <code>aria-rowindex="47"</code> と <code>aria-rowindex="52"</code> が設定されます (訳注: ヘッダー行も含んだ全ての行を 1 から昇順に数えたものを昇順に配置します) 。</p>

 <p>全ての行が DOM に存在する場合、この属性は必要ありません。</p>
 </dd>
</dl>

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

<p>無し</p>

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

<p>無し。 ソート可能な列については、列ヘッダー (<a href="/ja/docs/Web/Accessibility/ARIA/Roles/columnheader_role"><code>columnheader</code></a>) ロールを参照してください。</p>

<div class="note">
<p>ARIA の使用の第一のルールは、要素を転用して ARIA のロール、ステート、プロパティを<strong>追加する</strong>ことでアクセス可能にするのではなく、必要としている意味論と振る舞いがすでに組み込まれているネイティブな機能を使用できることです。 可能な限り、ARIA の表ロールの代わりに HTML の <code>&lt;table&gt;</code> 要素を使用してください。</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>上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの行グループ内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、<code>aria-sort</code> プロパティで示されているように、現在はソートされていません。 表の本体は別の行グループにあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に <code>aria-rowindex</code> プロパティを含めています。</p>

<p> </p>

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

<p>データ表構造には、<code>&lt;table&gt;</code>、<code>&lt;tbody&gt;</code>、<code>&lt;thead&gt;</code>、<code>&lt;tr&gt;</code>、<code>&lt;th&gt;</code>、<code>&lt;td&gt;</code> などのみを使用してください。 これらに ARIA ロールを追加することで、CSS などで表のネイティブな意味論が取り除かれても、アクセシビリティを確保することができます。 ARIA の表ロールの関連するユースケースは、<code>display: grid</code> など、CSS の <code>display</code> プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の表ロールを使用して意味論を追加し直すことができます。</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;tr role="row" aria-rowindex="18"&gt;
       &lt;td role="cell"&gt;rowgroup&lt;/td&gt;
       &lt;td role="cell"&gt;thead&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr role="row" aria-rowindex="24"&gt;
       &lt;td role="cell"&gt;term&lt;/td&gt;
       &lt;td role="cell"&gt;dt&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> に設定するなどして、表のネイティブな意味論、つまり表の行が完全に破壊されてしまう場合だけです (訳注: ここでの grid は、CSS グリッドレイアウトというグリッドロールとは全く別のものであることに注意してください) 。</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","#row","ARIA row role")}}</td>
   <td>{{Spec2('ARIA')}}</td>
  </tr>
  <tr>
   <td>{{SpecName("ARIA Authoring Practices","#row","ARIA row role")}}</td>
   <td>{{Spec2('ARIA Authoring Practices')}}</td>
  </tr>
 </tbody>
</table>

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

<ul>
 <li><a href="/ja/docs/Web/HTML/Element/tr">HTML の表の行要素</a></li>
</ul>

<section id="Quick_links">
    <ol>
        <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA ロール</strong></a>{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/ARIA/Roles")}}</li>
    </ol>
</section>