diff options
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/list_role/index.html | 37 |
1 files changed, 21 insertions, 16 deletions
diff --git a/files/ja/web/accessibility/aria/roles/list_role/index.html b/files/ja/web/accessibility/aria/roles/list_role/index.html index d3dfaa48f3..7d87b4bbda 100644 --- a/files/ja/web/accessibility/aria/roles/list_role/index.html +++ b/files/ja/web/accessibility/aria/roles/list_role/index.html @@ -7,7 +7,7 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/List_role --- -<p>\{{ariaref}}<span class="seoSummary">ARIA の <code>list</code> ロールは、項目のリスト（list）を識別するために使用できます。 これは、通常、リスト内に含まれるリスト項目（list item）を識別するために使用される <code>listitem</code> ロールと組み合わせて使用されます。</span></p> +<p><span class="seoSummary">ARIA のリスト (<code>list</code>) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (<code>listitem</code>) ロールと組み合わせて使用します。</span></p> <pre class="brush: html"><section role="list"> <div role="listitem">リスト項目 1</div> @@ -18,26 +18,25 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role <h2 id="Description" name="Description">説明</h2> -<p>外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ <code>list</code> と <code>listitem</code> のコンテナを使用して支援技術で識別できます。 <code>list</code> には1つ以上の <code>listitem</code> の子が含まれているか、1つ以上の <code>group</code> が子として存在し、各 <code>group</code> には1つ以上の <code>listitem</code> が子として格納されている必要があります。</p> +<p>外側のコンテナーとその内側の要素のリストで構成されるコンテンツは、それぞれリスト (<code>list</code>) とリスト項目 (<code>listitem</code>) のコンテナーを使用して支援技術で識別できます。 リスト (<code>list</code>) は、1つ以上のリスト項目 (<code>listitem</code>) の子を持つか、代わりに1つ以上のグループ (<code>group</code>) が子として存在し、各グループ (<code>group</code>) が1つ以上のリスト項目 (<code>listitem</code>) を子として持つ必要があります。</p> -<p>リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。</p> +<p>リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。</p> -<div class="warning"> -<p><strong>警告</strong>: 可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> とその <code>listitem</code>（{{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}）をマークアップする必要があります。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +<div class="notecard warning"> +<h4>警告</h4> +<p>可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> </div> -<p> </p> - <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> <dl> <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></dt> <dd> - <p>リストやディレクトリ内の単一項目。 <code>listitem</code> ロールを持つ要素は、<code>list</code> ロールや <code>group</code> ロールを持つ要素内にのみ存在します。</p> + <p>リストやディレクトリー内の単一項目。 リスト項目ロールを持つ要素は、リスト (<code>list</code>) ロールやグループ (<code>group</code>) ロールを持つ要素内にのみ存在します。</p> </dd> <dt><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></dt> <dd> - <p>リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。</p> + <p>ページの目次に掲載されるほど重要ではなく、リスト内にネストされている場合はリスト項目に限定される、関連するオブジェクトのコレクションです。</p> </dd> </dl> @@ -51,13 +50,13 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role <h2 id="Examples" name="Examples">例</h2> -<p> <a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara によるいくつかの有用な例と考え（英語）</p> +<p> <a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara によるいくつかの有用な例と考え (英語)</p> <h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> -<p>例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="list"</code> と <code>role="listitem"</code> のみを使用する必要があります。</p> +<p><code>role="list"</code> と <code>role="listitem"</code> は必要な場合のみ使用してください。 例えば、HTML を制御できなくても、JavaScript で事後に動的にアクセシビリティを向上させることができる場合です。</p> -<p>HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA の <code>list </code>ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト（{{htmlelement("ol")}} と {{htmlelement("ul")}}）とリスト項目（{{htmlelement("li")}}）をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直<span id="result_box" lang="ja"><span>すべきです</span></span>。</p> +<p>HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA のリスト (<code>list</code>) ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト ({{htmlelement("ol")}} と {{htmlelement("ul")}}) とリスト項目 ({{htmlelement("li")}}) をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直すべきです。</p> <pre class="brush: html"><ul> <li>リスト項目 1</li> @@ -65,7 +64,7 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role <li>リスト項目 3</li> </ul></pre> -<p>リスト項目の順序が重要な場合は、順序付きリストを使用します。</p> +<p>また、リスト項目の順序が重要な場合は、順序付きリストを使用します。</p> <pre class="brush: html"><ol> <li>リスト項目 1</li> @@ -74,13 +73,13 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role </ol></pre> <div class="note"> -<p><strong>注</strong>: ARIA の <code>list</code> ロールと <code>listitem</code> ロールでは、順序付きリストと順序無しリストを区別しません。</p> +<p><strong>注</strong>: ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。</p> </div> -<p>仮に、<code>ol</code> または <code>ul</code> という意味論の HTML 要素を使用して <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> ロールを適用する場合、ARIA では <code>listitem</code> 要素に親 <code>list</code> 要素が必要であるため、各子 <code>li</code> 要素は <code>presentation</code> ロールを継承します。 したがって、<code>li</code> 要素は支援技術には見えませんが、これらの要素の内部に含まれる要素（ネストされたリストを含む）は、支援技術に見えます。</p> +<p>余談ですが、意味論的な HTML 要素である <code>ol</code> または <code>ul</code> を使用してプレゼンテーション (<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code>) ロールを適用する場合、ARIA ではリスト項目 (<code>listitem</code>) 要素に親のリスト (<code>list</code>) 要素が必須であるため、各子 <code>li</code> 要素はプレゼンテーション (<code>presentation</code>) ロールを継承することに注意してください。 そのため、<code>li</code> 要素は支援技術には公開されませんが、ネストされたリストを含め、これらの <code>li</code> 要素の内部に含まれる要素は、支援技術からは見えることになります。</p> <div class="note"> -<p><strong>注</strong>: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに <code>tab</code>、<code>tabpanel</code>、<code>tablist</code> ロールを使用するべきです。</p> +<p><strong>注</strong>: タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (<code>tab</code>)、タブパネル (<code>tabpanel</code>)、タブリスト (<code>tablist</code>) のロールを使用するべきです。</p> </div> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -113,3 +112,9 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: listitem ロール</a></li> <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">ARIA: group ロール</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> |