【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

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 属性を使用してページに挿入される。属性値は、ランドマークの名前である。ロールの値は次のとおりである:

訳注: HTML5 において、上記のロールは代わりに HTML 要素を使うことでランドマークを支援技術に伝達できる。ARIA in HTML 及び Using ARIA も参照のこと。

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

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

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

事例

訳注: HTML4 及び XHTML 1.0 は Superseded Recommendation としてマークされ、廃止された仕様である。

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

次の例は、同じページで二つ以上の同じ種類のランドマークが存在する状況で、ランドマークがどのように 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

次の例は、同じページで二つ以上の同じ種類のランドマークが存在する状況で、ラベルとして参照できるページでテキストが存在しない場合、ランドマークがどのように 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>

事例 4: 検索フォーム

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

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

参考リソース

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

検証

手順

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

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

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。