Skip to content

テクニック ARIA20: ページのリージョンを特定するために region ロールを使用する

このテクニックについて

このテクニックは 1.3.1: 情報及び関係性 (十分なテクニック) に関連する。

このテクニックは、Accessible Rich Internet Applications をサポートする技術に適用される。

解説

このテクニックは、ユーザエージェント及び支援技術がプログラム的にページのセクションを識別できるように、そのページのセクションに汎用的な region ロールを割り当てる方法を示す。region ロールは、重要なコンテンツを含むページの区分を定めるものであり、それによってその部分がより容易に発見及びナビゲートできるようになる。標準の document ランドマークロールを使用してマークアップできないセクションの場合、汎用的なリージョンを使用すべきである (ARIA11を参照)。

リージョンに名前を付けることは重要である。なぜなら、リージョンは汎用的なグループ化要素であり、利用者は自分がどのリージョンにいるのかを知る手段が必要だからである。リージョンには、aria-labelledby、aria-label、又は他の手法を使用して名前を付けることができる。そうすることで、ページ上のコンテンツ及び情報の関係性をより適切に明示する助けとなる。region ロールは慎重に使用すべきである。なぜなら、過剰に使用するとスクリーンリーダーの利用者にとってページが過度に冗長になる可能性があるからである。

事例

事例 1: ニュースサイト上のリージョン

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

<div role="region" aria-labelledby="pollhead">
  <h3 id="pollhead">This week's Poll</h3>
  <form>
    <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 ロールでマークアップされた span の中にある。リージョンの見出しは role=heading を持ち、そのリージョンに名前を付ける aria-labelledby に含まれている。

<ol>
  <li>
    <button aria-controls="block1" aria-expanded="false" id="l1" title="show details"
      type="button">John Henry's Account <img alt="" src="images/panel_expand.gif">
    </button>
    <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. リージョンがプログラムによる解釈が可能な名前を持つことをチェックする。

期待される結果

  • 1 から 3 の結果が真である。
Back to Top