diff options
Diffstat (limited to 'files/ja/web/accessibility/aria/roles/row_role/index.html')
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/row_role/index.html | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/files/ja/web/accessibility/aria/roles/row_role/index.html b/files/ja/web/accessibility/aria/roles/row_role/index.html new file mode 100644 index 0000000000..8cb4b15f96 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/row_role/index.html @@ -0,0 +1,231 @@ +--- +title: 'ARIA: row ロール' +slug: Web/Accessibility/ARIA/Roles/Row_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Row_Role +--- +<div>\{{ariaref}}</div> + +<p><code>role="row"</code> の要素は、表形式の構造内のセルの行（row）です。 行には、<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> 内の1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内にも含まれます。</p> + +<pre class="brush: html"><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> +</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><tr></code></a> 要素を使用することを強く推奨します。</p> + +<p>ARIA の行を作成するには、コンテナ要素に <code>role="row"</code> を追加します。 その行は、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内にネストするべきです。 行のグループは、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内に直接ネストすることができますし、これらのコンテナ内の <code>rowgroup</code> 内に配置することもできます。 それぞれの行には子のセルが含まれています。 これらのセルは、列ヘッダーや行ヘッダーやグリッドセルや普通のセルの異なるタイプのセルにすることができます。</p> + +<p>行には、<code>aria-colindex</code>、<code>aria-level</code>、<code>aria-rowindex</code>、<code>aria-selected</code> など、行のロールを明確にする属性だけでなく、多くの属性を含めることができます。</p> + +<p>行が <code>treegrid</code> 内にある場合、現在の状態を示す属性を使用して行を展開可能にするため、行に <code>aria-expanded</code> 属性を含めることができます。 これは、<code>aria-expanded</code> 属性が存在しない通常の <code>table</code> や <code>grid</code> の場合には当てはまりません。</p> + +<p>表形式の構造を持つ対話型のウィジェットを作成するには、代わりに <code>grid</code> のパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションが提供されている場合や、ユーザインタフェースがセル順序の再配置を許可する場合や、ドラッグアンドドロップなどで個々のセル順序の変更が可能な場合は、代わりに <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>注: 可能であれば、表の行要素（<code><tr></code>）と共にネイティブな HTML 表要素（<code><table></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><code>grid</code> と <code>treegrid</code> と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd><code>table</code> と <code>treegrid</code> と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridtree_Role">role="treegrid"</a></dt> + <dd><code>grid</code> に似ていますが、<code>tree</code> と同じ方法で展開や折りたたみができる行があります。</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><code>grid</code> 内または <code>treegrid</code> 内の行内のセル。</dd> + <dt>role="columnheader"</dt> + <dd>列スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>columnheader</code> ロールは、対応する列の全てのセルとの関係を確立します。</dd> + <dt>role="rowheader"</dt> + <dd>行スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>rowheader</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> 属性を使用してコンテナを参照するべきです（SHOULD）。</p> + </dd> + <dt>aria-selected ステート</dt> + <dd><code>grid</code> や <code>treegrid</code> などの対話型のコンテナ内に行がある場合のみ関連し、行が <code>table</code> の行の場合は関連しません。 <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>table</code>、<code>grid</code>、<code>treegrid</code> 内の全列数の間の整数をとります。 <code>aria-colindex</code> は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 たとえば、表内に 15 列あり、4、5、6 列のみが DOM にある場合、全ての行に <code>aria-colindex="4"</code> を設定できます。<br> + <br> + DOM に存在する列のセットが連続して<strong>いない</strong>場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子に <code>aria-colindex</code> を配置します。</p> + + <p>全ての列が DOM 内にある場合、この属性は必要ありません。</p> + </dd> + <dt>aria-rowindex 属性</dt> + <dd> + <p><code>aria-rowindex</code> 属性は、行が DOM から隠されている場合にのみ必要で、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 たとえば、テーブル内に 1,500 行があり、47 行目と 52 行目とヘッダーのみが DOM にある場合は、ヘッダー行に <code>aria-rowindex="1"</code> が設定され、47 行目と 52 行目にそれぞれ <code>aria-rowindex="47"</code> と <code>aria-rowindex="52"</code> が設定されます。</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> + +<dl> +</dl> + +<p>無し。 ソート可能な列については、<code>columnheader</code> ロールを参照してください。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の <code>table</code> ロールの代わりに HTML の <code><table></code> 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><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> +</pre> + +<p>上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの <code>rowgroup</code> 内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、<code>aria-sort</code> プロパティで示されているように、現在はソートされていません。 表の本体は別の <code>rowgroup</code> にあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に <code>aria-rowindex</code> プロパティを追加しました。</p> + +<p> </p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、<code>table</code>、<code>tbody</code>、<code>thead</code>、<code>tr</code>、<code>th</code>、<code>td</code> などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の <code>display</code> プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre class="brush: html"><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> + <tr role="row" aria-rowindex="18"> + <td role="cell">rowgroup</td> + <td role="cell">thead</td> + </tr> + <tr role="row" aria-rowindex="24"> + <td role="cell">term</td> + <td role="cell">dt</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display プロパティを flex または grid</a> に設定すると表の行が消されます。</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> |