WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA11: ページの領域を特定するために ARIA ランドマークを使用する

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

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

適用(対象)

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

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

ユーザエージェント及び支援技術によるサポート

ARIA11 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

この達成方法の目的は、ウェブページのセクションに対して、プログラムによるアクセスを提供することである。ランドマークロール(又はランドマーク)は、ページのセクションをプログラムによって識別できるようにする。ランドマークは、支援技術(AT)利用者がページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立つ。

ランドマークはまた、支援技術の利用者に、複数ページで繰り返されるコンテンツのブロックをスキップする容易な方法を提供するとともに、ページの構造をプログラムによって理解できるようにする。たとえば、すべてのページに見られる共通のナビゲーションメニューが存在する場合、ランドマークロール(又はランドマーク)は、ナビゲーションメニューをスキップし、セクションからセクションにナビゲートするために使用できる。これは、伝統的な「スキップリンク」メカニズムそっくりに、支援技術利用者とキーボード利用者が、実際に後続にあるものを見つけるために大量のコンテンツの中をタブ移動するための時間と手間を省く(支援技術サポートの詳細については上記のユーザエージェントノートを参照のこと)。ニュースサイトのメニューに精通しているだろう、トップニュースを得ることにのみ関心がある目の不自由な利用者は、より容易に"main"ランドマークにナビゲートして、多数のメニューリンクを無視できる。別の状況で、目の不自由な利用者は、すぐにナビゲーションメニューを検索したいかもしれず、ナビゲーションランドマークにジャンプすることでこれを実現できる。

ランドマークはまた、目の見えるキーボード利用者がブラウザプラグインを使用して、ページのセクションにナビゲートするのを支援することもできる。

ランドマークは、セクションをマークする要素上のrole属性を使用してページに挿入される。属性値は、ランドマークの名前である。ロールの値は次のとおりである:

特定のランドマークロールがページ上で複数回使用できる場合があり、主要及び補助のナビゲーションメニューのようなものを表すことができる。この場合、同一ロールは、領域にラベル付けを行うための有効な技術を用いて、互いに曖昧さをなくすべきである(下記の例を参照)。

ランドマークは、HTMLの見出し、リスト、及びその他の構造的マークアップのようなネイティブセマンティックマークアップの補足となるべきである。ランドマークは、WAI-ARIA対応の支援技術によって解釈可能であり、ブラウザによって利用者に直接公開されるものではない。

ページ上のすべてのコンテンツをランドマークに含めることがベストプラクティスであり、そうすればセクションからセクションへナビゲートするためにランドマークに依存するスクリーンリーダー利用者がコンテンツの経路を見失うことはなくなる。

事例

事例 1: 単純なランドマーク

次の例は、ランドマークがどのようにHTML4やXHTML 1.0文書に追加され得るのかを示している:

<div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>

事例 2: 同じ種類の複数のランドマークとaria-labelledby

次の例は、同じページで2つ以上の同じ種類のランドマークが存在する状況で、ランドマークがどのようにHTML4やXHTML1.0文書に追加されうるのかのベストプラクティスを示している。たとえば、navigationロールがウェブページ上で複数回使用される場合、各インスタンスはaria-labelledbyを使用して、指定された一意のラベルを持ってもよい:

<div id="leftnav" role="navigaton" aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation" aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div>

事例 3: 同じ種類の複数のランドマークとaria-label

次の例は、同じページで2つ以上の同じ種類のランドマークが存在する状況で、ラベルとして参照できるページでテキストが存在しない場合、ランドマークがどのようにHTML4やXHTML1.0文書に追加されうるのかのベストプラクティスを示している。

<div id="leftnav" role="navigaton" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>

事例 4: 検索フォーム

次の例は、"search"ランドマークをもつ検索フォームを示す。searchロールは一般的に、フォームフィールドや、検索フォームを囲むdivに適用する。

<form role="search">
<label for="s6">search</label><input id="s6" type="text" size="20">
...
</form> 

参考リソース

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

検証

チェックポイント

  1. ランドマークロールをもつ各要素を検査する。

  2. ランドマークロール属性が、そのロールに対応するページのセクションに適用されている(すなわち、"navigation"ロールはナビゲーションセクションで適用され、"main"ロールはメインコンテンツが始まる場所に適用される)。

判定基準

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