ページのリージョンを特定するために region ロールを使用する

適用 (対象)

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

これは達成基準 1.3.1: 情報及び関係性 (十分な達成方法) に関する達成方法である。

解説

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

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

事例

<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>			
            

<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>
            

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

参考リソース

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

• The Roles Model (role=region)

関連する達成方法

• ARIA11: ページのリージョンを特定するために ARIA ランドマークを使用する
• ARIA12: 見出しを特定するために role=heading を使用する
• ARIA13: リージョンとランドマークに名前 (name) を付けるために、aria-labelledby を使用する

検証