【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
この達成方法は、ユーザエージェント及び支援技術がプログラム的にページのセクションを識別できるように、そのページのセクションに一般的な region ロールを割り当てる方法を示す。region ロールは、より容易に発見可能かつナビゲート可能であるように、重要なコンテンツを含むページの区切りを定める。一般的な領域は、セクションが標準の文書ランドマークロールによってマークアップできない場合に使用されるべきである (ARIA11: ページのリージョンを特定するために ARIA ランドマークを使用する (ARIA)
を参照)。
領域は一般的なグループ化された要素であり、かつ利用者がどの領域にいるのかを伝えるための手段が必要になるため、領域に名前を付けることは重要である。領域には、aria-labelledby や aria-label、その他の手法を使用して名前を付けることができる。そうすることで、ページ上のコンテンツと情報の関係をより良く公開する助けとなる。過剰に使用した場合、スクリーンリーダーの利用者に対してページを過度に冗長にすることがあるので、region のロールは、慎重に使用するべきである。
毎週変更する世論調査を含むニュースサイトのホームページ上のセクションが、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>
利用者は、銀行のウェブサイトにログインした後、リンクを展開することで定期預金口座の詳細を確認できるようになっている。詳細は、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>
次の例は、気象ポートレットに一般的な "region" ランドマークがどのように追加されうるのかを示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-label でラベル付けされている。
コード例:
<div role="region" aria-label="weather portlet">
...
</div> この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
role="region"で マークアップされる各セクションに対して:
コンテンツを調べ、独立したランドマークを持つのに十分なほど重要であることを確認する。
標準のランドマークロールがこのコンテンツに適さないことを確認する。
領域がプログラムによる解釈が可能な名前を持つことを確認する。
1. から 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。