WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA20: ページの領域を特定するために region ロールを使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。

これは、次の達成基準に関連する達成方法である:

解説

この達成方法は、ユーザエージェント及び支援技術がプログラム的にページのセクションを識別できるように、そのページのセクションに一般的なregionロールを割り当てる方法を示す。regionロールは、より容易に発見可能かつナビゲート可能であるように、重要なコンテンツを含むページの区切りを定める。一般的な領域は、セクションが標準の文書ランドマークロールによってマークアップできない場合に使用されるべきである(ARIA11: ページの領域を特定するために ARIA ランドマークを使用する (ARIA) を参照)。

領域は一般的なグループ化された要素であり、かつ利用者がどの領域にいるのかを伝えるための手段が必要になるため、領域に名前を付けることは重要である。領域には、aria-labelledbyaria-label、その他の手法を使用して名前を付けることができる。そうすることで、ページ上のコンテンツと情報の関係をより良く公開する助けとなる。過剰に使用した場合、スクリーンリーダーの利用者に対してページを過度に冗長にすることがあるので、regionのロールは、慎重に使用するべきである。

事例

事例 1: ニュースサイト上の領域

毎週変更する世論調査を含むニュースサイトのホームページ上のセクションが、role="region"でマークアップされている。フォーム上部のh3テキストは、aria-labelledbyを使うことで領域の名前として参照されている。


<div role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This week's Poll</h3>
<form method="post" action="#">
  <fieldset>
    <legend>Do you believe the tax code needs to be overhauled?</legend>
    <input type="radio" id="r1" name="poll" />
    <label for="r1">No, it's fine the way it is</label>
    <input type="radio" id="r2" name="poll" />
    <label for="r2">Yes, the wealthy need to pay more</label>
    <input type="radio" id="r3" name="poll" />
    <label for="r3">Yes, we need to close corporate loopholes</label>
    <input type="radio" id="r4" name="poll" />
    <label for="r4">Changes should be made across the board</label>
  </fieldset>
</form>
<a href="results.php">See Poll Results</a>
</div>			
            

事例 2: 銀行サイト上の領域を識別する

利用者は、銀行のウェブサイトにログインした後、リンクを展開することで定期預金口座の詳細を確認できるようになっている。詳細は、regionロールでマークアップされた範囲の中にある。その領域の見出しはrole=headingを持ち、その領域に名前を付けるaria-labelledbyの中に含まれている。


<ol>
	<li><a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" >John Henry's Account</a><img src="images/panel_expand.gif" alt="" />
		 <div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"><span id="cd1" role="heading" aria-level="3">Certificate of  Deposit:</span>
		 <table>
			 <tr><th scope="row">Account:</th> <td>25163522</td></tr>
			 <tr><th scope="row">Start date:</th> <td>February 1, 2014</td></tr>
			 <tr><th scope="row">Maturity date:</th><td>February 1, 2016</td></tr>
			 <tr><th scope="row">Deposit Amount:</th> <td>$ 3,000.00</td></tr>
			 <tr><th scope="row">Maturity Amount:</th> <td>$ 3,072.43</td></tr>
		 </table>
		 </div>
	 </li>
 </ol>
            

事例 3: 一般的な領域とポートレットを同一視する

次の例は、気象ポートレットに一般的な"region"ランドマークがどのように追加されうるのかを示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-labelでラベル付けされている。

コード例:


<div role="region" aria-label="weather portlet"> 
	...
</div>            

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

role="region"でマークアップされる各セクションに対して:

  1. コンテンツが、独立したランドマークを持つのに十分なほど重要である。

  2. 標準のランドマークロールがこのコンテンツに適さない。

  3. 領域がプログラムによって解釈される名前を持つ。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。