ページのリージョンを特定するために ARIA ランドマークを使用する

適用 (対象)

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

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

• 達成基準 1.3.1: 情報及び関係性 (十分な達成方法)
• 達成基準 1.3.6: 目的の特定 (十分な達成方法)
• 達成基準 2.4.1: ブロックスキップ (書かれていない達成方法を満たす慣習的な達成方法)

解説

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

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

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

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

• banner: ページの主見出し又は内部タイトルを含む領域。
• complementary: 主要コンテンツをサポートしているが、独立しかつ意味のある、文書の任意のセクション。
• contentinfo: 著作権やプライバシーに関する声明へのリンクなど、親文書に関する情報を含む領域。
• form: フォーム関連要素のコレクションを表す文書の領域であり、その一部は編集可能な、処理するためにサーバーに送信可能な値を表すことができる。
• main: 文書における主要コンテンツ。ほとんどの場合において、一つのページは一つのみの role="main" を持つ。
• navigation: 文書内の、又は関連する文書へのナビゲートに適したリンクのコレクション。
• search: ウェブ文書の検索ツール。

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

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

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

事例

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

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

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

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

参考リソース

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

• WAI-ARIA Authoring Practices 1.1
• Accessible Rich Internet Applications (WAI-ARIA) 1.0, Using WAI-ARIA Roles
• Accessible Rich Internet Applications (WAI-ARIA) 1.0, Supported States and Properties
• Enabling landmark-based keyboard navigation in Firefox
• Not All ARIA Widgets Deserve role="application"
• When Should You Use ARIA Role="Application"?

関連する達成方法

• G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する
• G124: ページの先頭に、コンテンツの各エリアへのリンクを追加する
• H69: コンテンツの各セクションの開始位置に見出し要素を提供する
• SCR28: コンテンツのブロックをバイパスするために、展開可能及び折り畳み可能なメニューを使用する

検証