WAI-ARIA のランドマーク (Landmark Roles) を設置する
当サイトでは、Web アクセシビリティ向上の一環として、WAI-ARIA の「ランドマーク (Landmark Roles)」をソースコードの中に記述しています。
WAI-ARIA とは、W3C (World Wide Web Consortium) の WAI (Web Accessibility Initiative) という組織が策定した、Web アクセシビリティ向上のための仕様書のひとつです。RIA (Rich Internet Applications) をアクセシブルなものにするための標準仕様がまとめられています (WAI-ARIA の「ARIA」は、「Accessible Rich Internet Applications」の略です)。
この WAI-ARIA、本来は RIA を対象とするものですが、WAI-ARIA の中で規定されている「ランドマーク」という考えかたは、リッチなユーザーインターフェース (UI) を持たない、ごく一般的な Web サイトでも採り入れることができます。ひとことで言うと、Web ページの中にランドマーク (陸標または目印といった意味です) を打ち込んでおくことで、Web ページの構成要素に関する意味付け (セマンティクス) を高めるはたらきを持っています。
もう少し噛み砕いて言うと、Web ページにランドマークを打ち込むことによって、「ここはナビゲーションだよ」「ここはメインのコンテンツ本文だよ」「ここは補足情報だよ」といった情報が支援技術 (スクリーンリーダーなど) に伝わりやすくなり、支援技術のユーザーが Web ページの構成要素を把握しやすくなる (その結果、Web コンテンツがよりアクセシブルになる)、というものです。
当サイトで設置している Landmark Roles
WAI-ARIA のランドマーク (Landmark Roles) は、HTML/XHTML の各要素に対して「role="xxx"」という属性を加える形で記述します。「xxx」という値は、あらかじめ WAI-ARIA の仕様として決められているオプションがあるので、そこから適切なものを選びます。
ちなみに当サイトでは、以下のランドマークを設置しています。
- role="banner"
- 主に、メインビジュアル (イメージ訴求のための画像) に対して付与される role です。当サイトでは、ヘッダー (サイト名を表記している部分) に対して role="banner" を設置しています。
- role="main"
- ページ内のメインのコンテンツに対して付与される role です。
- role="navigation"
- ナビゲーションに対して付与される role です。当サイトでは、サイト内検索機能および「記事のカテゴリー」に対して role="navigation" を設置しています。
- role="search"
- 検索機能に対して付与される role です。サイト内検索はフォームの形態を採っています (<form> 要素でマークアップされています) が、通常のフォーム (つまり、情報を入力してサイト運営者側に情報を送信するもの) とは意味合いが異なるので、「ここはフォームだけど、実際は検索機能だよ」ということを明示します。
- role="complementary"
- Web ページ内の、(メインではない) 補足的な情報群に対して付与される role です。当サイトでは、「このサイトについて」「アクセシビリティ指針」「お問い合わせ」などに対して、role="complementary" を設置しています。
- role="contentinfo"
- コンテンツに関するメタ情報に対して付与される role です。当サイトでは、フッター (コピーライト表示) に対して role="contentinfo" を設置しています。
当サイトで使用していない Landmark Roles
上記以外でも、以下の role 属性値が、WAI-ARIA の Landmark Roles として用意されています。当サイトでは、さしあたり必須ではないという判断から使用していませんが、その判断が適切かどうか、今後 WAI-ARIA が普及/浸透してゆく中でデファクトスタンダードが形成されることも考えられますし、いろいろなケーススタディを通じて継続的に検討してゆきたいと思います。
- role="application"
- Web ページに埋め込まれたアプリケーション的な機能に対して付与される role です。支援技術によっては、Web ページを読み込む場合と、アプリケーションを読み込む場合とで、モードが切り替わるものがあります。role="application" を設置することで、自動的に、支援技術を適切なモードに切り替えることができます。
- role="form"
- フォームに対して付与される role です。もともとフォームには、<form> という明示的なセマンティクスを持つ HTML 要素があるのですが、<form> 要素で括られているもの以外でフォームの部品として機能する要素がある場合 (たとえばボタンなど) は、role="form" を設置することで、「これはフォームの一要素だよ」ということを示すことができます。
Landmark Roles 設置のススメ
WAI-ARIA Landmark Roles を設置することで、Web ページの構成要素に関するセマンティクスを高めることができ、その結果、支援技術のユーザーが Web ページの構成要素を把握しやすくなる旨、先で述べました。では、Landmark Roles を設置していない場合は、どういう状態なのでしょうか。
従来の HTML 4 や XHTML 1.0 を使って Web ページを制作する場合、<div id="header">、 <div id="navigation"> のような形で、ブロック要素に、その役割を示す id 属性を付与するというのが一般的だと思います。
このままの状態 (id 属性があって role 属性が無い状態) ですと、<div> という要素にそれぞれ「header」「navigation」という名前の id が振られていることしか支援技術は理解できず、そこに「ここはヘッダーだよ」「ここはナビゲーションだよ」という意味が内在していることまでは理解してもらえません。Landmark Roles (role 属性) を加えることで初めて、マシンリーダブルでセマンティックなものになり、支援技術に対して、意味も含めて伝達することができます。
なお、HTML 4 や XHTML 1.0 では role 属性が正式な仕様としては認められていないので、W3C のバリデータで検証すると invalid という結果になってしまいます。ただし、実際の Web ページの表示や使用にあたってはまったく支障が無いですし (むしろユーザーの利便性に寄与します)、ソースコードへの記述も簡単にできるので、ぜひ Landmark Roles の設置を検討されることを、おすすめしたいと思います。
支援技術での利用例 (スクリーンリーダーで試してみる)
WAI-ARIA Landmark Roles は比較的新しい仕様なので、すべての支援技術が対応しているわけではありませんが、今後徐々に普及してゆくものと思われます。無料のスクリーンリーダーである NVDA や VoiceOver がすでに WAI-ARIA に対応しているので、ここでは、これらのスクリーンリーダーにおける、ランドマークの利用方法について、簡単にご紹介したいと思います。
NVDA の場合
NVDAでは、[D] キーを押すと、次のランドマークにジャンプして読み上げてくれます (その際、ランドマークの種類、つまり role 属性値の意味も読み上げてくれます)。[Shift] キーを押しながら [D] キーを押すと、前のランドマークにジャンプします。
また、NVDA キーと併せて [F7] キーを押すと、「要素リスト」画面が開き、ランドマークの一覧を出すことができます。
VoiceOver の場合
iOS の VoiceOver では、ローターで「ランドマーク」を選択後、見出しジャンプと同じ要領でフリック操作すると、ランドマークにジャンプして読み上げてくれます (ただし現時点では、ランドマークの種類、つまり role 属性値の意味までは、読み上げてくれないようです)。
残念ながら、Mac OS X (Snow Leopard) のVoiceOver では、現時点ではランドマークを認識してくれないようです。ただし、Safari 5 では WAI-ARIA をサポートする旨の情報があるので、近いうちに、Mac でもランドマークの読み上げが可能になるかもしれません。