From 24b027f6b9c82a4a73880f7a548c88ce0aed265a Mon Sep 17 00:00:00 2001 From: Wind1808 <42607060+Wind1808@users.noreply.github.com> Date: Wed, 26 May 2021 23:16:35 +0900 Subject: ARIA: list ロールの更新 (#857) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../accessibility/aria/roles/list_role/index.html | 37 ++++++++++++---------- 1 file changed, 21 insertions(+), 16 deletions(-) (limited to 'files/ja/web/accessibility/aria') 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 --- -

\{{ariaref}}ARIA の list ロールは、項目のリスト（list）を識別するために使用できます。 これは、通常、リスト内に含まれるリスト項目（list item）を識別するために使用される listitem ロールと組み合わせて使用されます。

+

ARIA のリスト (list) ロールは、項目のリストを識別するために使用できます。 これは通常、リスト内に含まれるリスト項目を識別するために使用するリスト項目 (listitem) ロールと組み合わせて使用します。

<section role="list">
   <div role="listitem">リスト項目 1</div>
@@ -18,26 +18,25 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role
 
 
説明

 
-
外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ list と listitem のコンテナを使用して支援技術で識別できます。 list には1つ以上の listitem の子が含まれているか、1つ以上の group が子として存在し、各 group には1つ以上の listitem が子として格納されている必要があります。

+
外側のコンテナーとその内側の要素のリストで構成されるコンテンツは、それぞれリスト (list) とリスト項目 (listitem) のコンテナーを使用して支援技術で識別できます。 リスト (list) は、1つ以上のリスト項目 (listitem) の子を持つか、代わりに1つ以上のグループ (group) が子として存在し、各グループ (group) が1つ以上のリスト項目 (listitem) を子として持つ必要があります。

 
-
リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。

+
リストとリスト項目をマークアップするためにどの要素を使用するべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです (例えば、買い物リスト、料理の手順、運転の指示) 。

 
-

-
警告: 可能な限り、適切な意味論の HTML 要素を使用して、list とその listitem（{{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}）をマークアップする必要があります。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。

+

+
警告

+
可能な限り、適切な意味論の HTML 要素を使用して、リストとそのリスト項目 ({{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}) をマークアップするべきです。 詳しい例は、{{anch("Best practices","ベストプラクティス")}}を参照してください。

 

 
-
 

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

 
 

  
listitem

  

- 
リストやディレクトリ内の単一項目。 listitem ロールを持つ要素は、list ロールや group ロールを持つ要素内にのみ存在します。

+ 
リストやディレクトリー内の単一項目。 リスト項目ロールを持つ要素は、リスト (list) ロールやグループ (group) ロールを持つ要素内にのみ存在します。

  

  
group

  

- 
リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。

+ 
ページの目次に掲載されるほど重要ではなく、リスト内にネストされている場合はリスト項目に限定される、関連するオブジェクトのコレクションです。

  

 

 
@@ -51,13 +50,13 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role
 
 
例

 
-
 ARIA Lists — Scott O'Hara によるいくつかの有用な例と考え（英語）

+
 ARIA Lists — Scott O'Hara によるいくつかの有用な例と考え (英語)

 
 
ベストプラクティス

 
-
例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、role="list" と role="listitem" のみを使用する必要があります。

+
role="list" と role="listitem" は必要な場合のみ使用してください。 例えば、HTML を制御できなくても、JavaScript で事後に動的にアクセシビリティを向上させることができる場合です。

 
-
HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA の list ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト（{{htmlelement("ol")}} と {{htmlelement("ul")}}）とリスト項目（{{htmlelement("li")}}）をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直すべきです。

+
HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA のリスト (list) ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト ({{htmlelement("ol")}} と {{htmlelement("ul")}}) とリスト項目 ({{htmlelement("li")}}) をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直すべきです。

 
 
<ul>
   <li>リスト項目 1</li>
@@ -65,7 +64,7 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role
   <li>リスト項目 3</li>
 </ul>

 
-
リスト項目の順序が重要な場合は、順序付きリストを使用します。

+
また、リスト項目の順序が重要な場合は、順序付きリストを使用します。

 
 
<ol>
   <li>リスト項目 1</li>
@@ -74,13 +73,13 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role
 </ol>

 
 

-
注: ARIA の list ロールと listitem ロールでは、順序付きリストと順序無しリストを区別しません。

+
注: ARIA のリストロールとリスト項目ロールでは、順序付きリストと順序無しリストを区別しません。

 

 
-
仮に、ol または ul という意味論の HTML 要素を使用して presentation ロールを適用する場合、ARIA では listitem 要素に親 list 要素が必要であるため、各子 li 要素は presentation ロールを継承します。 したがって、li 要素は支援技術には見えませんが、これらの要素の内部に含まれる要素（ネストされたリストを含む）は、支援技術に見えます。

+
余談ですが、意味論的な HTML 要素である ol または ul を使用してプレゼンテーション (presentation) ロールを適用する場合、ARIA ではリスト項目 (listitem) 要素に親のリスト (list) 要素が必須であるため、各子 li 要素はプレゼンテーション (presentation) ロールを継承することに注意してください。 そのため、li 要素は支援技術には公開されませんが、ネストされたリストを含め、これらの li 要素の内部に含まれる要素は、支援技術からは見えることになります。

 
 

-
注: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに tab、tabpanel、tablist ロールを使用するべきです。

+
注: タブ付きインターフェイスとして機能する項目のリストをマークアップする場合は、代わりにタブ (tab)、タブパネル (tabpanel)、タブリスト (tablist) のロールを使用するべきです。

 

 
 
仕様

@@ -113,3 +112,9 @@ translation_of: Web/Accessibility/ARIA/Roles/List_role
  
  • ARIA: listitem ロール
    • 
  
  • ARIA: group ロール
    • 
 
+
+
-- 
cgit v1.2.3-54-g00ecf