【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA11 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、ウェブページのセクションに対して、プログラムによるアクセスを提供することである。ランドマークロール (又はランドマーク) は、ページのセクションをプログラムによって識別できるようにする。ランドマークは、支援技術 (AT) 利用者がページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立つ。
ランドマークはまた、支援技術の利用者に、複数ページで繰り返されるコンテンツのブロックをスキップする容易な方法を提供するとともに、ページの構造をプログラムによって理解できるようにする。たとえば、すべてのページに見られる共通のナビゲーションメニューが存在する場合、ランドマークロール (又はランドマーク) は、ナビゲーションメニューをスキップし、セクションからセクションにナビゲートするために使用できる。これは、伝統的な「スキップリンク」メカニズムそっくりに、支援技術利用者とキーボード利用者が、実際に後続にあるものを見つけるために大量のコンテンツの中をタブ移動するための時間と手間を省く (支援技術サポートの詳細については上記のユーザエージェントノートを参照のこと)。ニュースサイトのメニューに精通しているだろう、トップニュースを得ることにのみ関心がある目の不自由な利用者は、より容易に "main" ランドマークにナビゲートして、多数のメニューリンクを無視できる。別の状況で、目の不自由な利用者は、すぐにナビゲーションメニューを検索したいかもしれず、ナビゲーションランドマークにジャンプすることでこれを実現できる。
ランドマークはまた、目の見えるキーボード利用者がブラウザプラグインを使用して、ページのセクションにナビゲートするのを支援することもできる。
ランドマークは、セクションをマークする要素上の role 属性を使用してページに挿入される。属性値は、ランドマークの名前である。ロールの値は次のとおりである:
banner: ページの主見出し又は内部タイトルを含む領域。
complementary: 主要コンテンツをサポートしているが、独立しかつ意味のある、文書の任意のセクション。
contentinfo: 著作権やプライバシーに関する声明へのリンクなど、親文書に関する情報を含む領域。
form: フォーム関連要素のコレクションを表す文書の領域であり、その一部は編集可能な、処理するためにサーバーに送信可能な値を表すことができる。
main: 文書における主要コンテンツ。ほとんどの場合において、一つのページは一つのみの role="main" を持つ。
navigation: 文書内の、又は関連する文書へのナビゲートに適したリンクのコレクション。
search: ウェブ文書の検索ツール。
application: ウェブ文書とは対照的な、ウェブアプリケーションとして宣言された領域。(注記: application ロールは、スクリーンリーダーに対して通常のウェブナビゲーションコントロールをオフにする信号を与えるため、注意して使用すべきである。一般に、単純なウィジェットには application ロールを与えるべきでなく、また、全くウェブページのように利用されておらず、かつ支援技術を用いた利用者のテストが十分に行われている場合を除き、ウェブページの全体に application ロールを与えるべきではない。)
訳注: HTML5 において、上記のロールは代わりに HTML 要素を使うことでランドマークを支援技術に伝達できる。ARIA in HTML 及び Using ARIA も参照のこと。
特定のランドマークロールがページ上で複数回使用できる場合があり、主要及び補助のナビゲーションメニューのようなものを表すことができる。この場合、同一ロールは、領域にラベル付けを行うための有効な技術を用いて、互いに曖昧さをなくすべきである (下記の例を参照)。
ランドマークは、HTML の見出し、リスト、及びその他の構造的マークアップのようなネイティブセマンティックマークアップの補足となるべきである。ランドマークは、WAI-ARIA 対応の支援技術によって解釈可能であり、ブラウザによって利用者に直接公開されるものではない。
ページ上のすべてのコンテンツをランドマークに含めることがベストプラクティスであり、そうすればセクションからセクションへナビゲートするためにランドマークに依存するスクリーンリーダー利用者がコンテンツの経路を見失うことはなくなる。
訳注: HTML4 及び XHTML 1.0 は Superseded Recommendation としてマークされ、廃止された仕様である。
次の例は、ランドマークがどのように 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>次の例は、同じページで二つ以上の同じ種類のランドマークが存在する状況で、ランドマークがどのように 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>次の例は、同じページで二つ以上の同じ種類のランドマークが存在する状況で、ラベルとして参照できるページでテキストが存在しない場合、ランドマークがどのように HTML4 や XHTML 1.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>次の例は、"search" ランドマークをもつ検索フォームを示す。search ロールは一般に、フォームフィールド又は、検索フォームを囲む div に置かれる。
<form role="search">
<label for="s6">search</label><input id="s6" type="text" size="20">
...
</form> この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ランドマークロールをもつ各要素を検査する。
ランドマークロール属性が、そのロールに対応するページのセクションに適用されている (すなわち、"navigation"ロールはナビゲーションセクションで適用され、"main" ロールはメインコンテンツが始まる場所に適用される) かどうかを検査する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。