diff --git a/techniques/aria/ARIA20.html b/techniques/aria/ARIA20.html index 4a5592aaf..e87db7e00 100644 --- a/techniques/aria/ARIA20.html +++ b/techniques/aria/ARIA20.html @@ -1,6 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
- This technique relates to - -1.3.1: Info and Relationships -(Sufficient).
This technique applies to technologies that support Accessible Rich Internet Applications.
このテクニックは、Accessible Rich Internet Applications をサポートする技術に適用される。
This technique demonstrates how to assign a generic region role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The region role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11).
region
It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using aria-labelledby, aria-label, or another technique. Doing so helps to better expose content and information relationships on the page. The role of region should be used prudently, because if overused they can make the page overly verbose for screen reader users.
aria-labelledby
aria-label
このテクニックは、ユーザエージェント及び支援技術がプログラム的にページのセクションを識別できるように、そのページのセクションに汎用的な region ロールを割り当てる方法を示す。region ロールは、重要なコンテンツを含むページの区分を定めるものであり、それによってその部分がより容易に発見及びナビゲートできるようになる。標準の document ランドマークロールを使用してマークアップできないセクションの場合、汎用的なリージョンを使用すべきである (ARIA11を参照)。
リージョンに名前を付けることは重要である。なぜなら、リージョンは汎用的なグループ化要素であり、利用者は自分がどのリージョンにいるのかを知る手段が必要だからである。リージョンには、aria-labelledby、aria-label、又は他の手法を使用して名前を付けることができる。そうすることで、ページ上のコンテンツ及び情報の関係性をより適切に明示する助けとなる。region ロールは慎重に使用すべきである。なぜなら、過剰に使用するとスクリーンリーダーの利用者にとってページが過度に冗長になる可能性があるからである。
A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 above the form is referenced as the region's name using aria-labelledby.
role="region"
h3
ニュースサイトのホームページ上にある、毎週変わる世論調査を含むセクションが、role="region" でマークアップされている。フォーム上部の h3 は、そのリージョンの名前として aria-labelledby で参照されている。
<div role="region" aria-labelledby="pollhead"> <h3 id="pollhead">This week's Poll</h3> <form> @@ -123,9 +116,9 @@ Example 1: Region on a news website
A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with region role. The heading for the region has role=heading and is included in the aria-labelledby that names the region.
span
role=heading
利用者は、銀行のウェブサイトにログインした後、リンクを展開して定期預金口座の詳細を確認できるようになっている。詳細は、region ロールでマークアップされた span の中にある。リージョンの見出しは role=heading を持ち、そのリージョンに名前を付ける aria-labelledby に含まれている。
<ol> <li> <button aria-controls="block1" aria-expanded="false" id="l1" title="show details" @@ -163,9 +156,9 @@ Example 2: Identifying a region on a banking site
This example shows how a generic region landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label. +
この例では、気象ポートレットに汎用的な region ランドマークを追加する方法を示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-label でラベル付けされている。
<div role="region" aria-label="weather portlet"> @@ -174,8 +167,8 @@ Example 3: Identifying a portlet with a generic region
No endorsement implied.
推奨を意味するものではない。
For each section marked up with role="region":
role="region" でマークアップされた各セクションについて:
Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub
あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。
この文書は、2025 年 5 月 21 日付けの Techniques for WCAG 2.2 を、ウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。 +
この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。