HTML5 + WAI-ARIA: 入門篇

このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。

WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 への導入について「入門篇」としてまとめてみました。

WAI-ARIA ではドキュメントの要素が「どのような役割を持っているか」を「ロール (role)」と呼び、HTML 要素の role 属性 として表現します。仕様には多くのロールが定義されていますが、そのうち Web ページの文書構造を定義したものが Landmark Roles という一連のロールです。Landmark という名前のとおり、ドキュメントの特定の領域に対して「目印」をつけるイメージでしょうか。たとえば、サイト内検索フォームを含む nav 要素に対して、以下のようにロールを示すことができます:

<nav role="search">
  <h2>Search this site</h2>
  <form ...>
    <p><input type="search" ...>...</p>
  </form>
</nav>

では、以下のような「ページヘッダ」「コンテント」「サイドバー」「ページフッタ」からなる典型的な Web ページを想定し、いくつかのロールについてどのようにマークアップに組み込むかを考えてみます:

<body>
  <header class="pageHeader">
    <h1 class="logo">...</h1>
    <nav class="globalNav">
      <ul>...</ul>
    </nav>
  </header>
  <article class="content">
    <header class="contentHeader">
      <h1>...</h1>
      <time pubdate datetime="...">...</time>
    </header>
    <div class="contentBody">
      ...
    </div>
  </article>
  <aside class="sidebar">
    ...
  </aside>
  <footer class="pageFooter">
    <nav class="legal">
      <ul>...</ul>
    </nav>
    <p class="copyrighgt"><small>&#169;...</small></p>
  </footer>
</body>

まず、ロゴやサイト内検索などを含むサイト全体に向けたコンテンツ領域のためのロール、banner を「ページヘッダ」に組み込むことができます:

<header role="banner" class="pageHeader">
  <h1 class="logo">...</h1>
  <nav class="globalNav">
    <ul>...</ul>
  </nav>
</header>

contentinfo は「親となるドキュメントについての情報を含む領域」とされており、そこに含まれる情報の例として「著作権や個人情報についての考え方」が挙げられています。「ページフッタ」が該当しますね:

<footer role="contentinfo" class="pageFooter">
  <nav class="legal">
    <ul>...</ul>
  </nav>
  <p class="copyright"><small>&#169;...</small></p>
</footer>

main はその名のとおり「ドキュメントの主たるコンテント」です。ブログの個別記事ページなら記事本体の artcile 要素がふさわしいでしょう:

<article role="main" class="content">
  <header class="articleHeader">
    <h1>...</h1>
    <time pubdate datetime="...">...</time>
  </header>
  <div class="articleContent">
    ...
  </div>
</article>

以上、主要な Landmark ロールについて簡単な例を挙げてみました。このように HTML のソースコードにちょっと手を加えるだけで、アクセシビリティの強化が図れるだけでなく、たとえばサイトのヘッダには記事のヘッダにはない特別なセマンティクスを与えたように、マークアップをより明確にすることができるのです。

というわけで、HTML5 でのマークアップには WAI-ARIA をぜひおすすめしたいのですが、情報がまだ少ないために導入がためらわれる場合もあると思います。また WAI-ARIA の仕様は小さいものではないので、すべてを把握しようとすると大変です。しかし、今回の例のようにページの基本的な構造に組み込むのは難しいことではないので、フロントエンドに携わる皆さんにはぜひ取り組んでみてもらいたいと思います。そしてより良い使い方についての議論などが活発になって、情報が増えるといいですよね。実際、僕もまだ理解していない部分ばかりですし。たとえば、HTML5 の nav 要素と WAI-ARIA の navigation ロールなど、意味のかぶるものをどう捉えるべきかとか。

最後に今回参考にしたリソースをまとめておきます。まず W3C の文書ですが、技術仕様 WAI-ARIA 1.0 のほか、いくつかの関連文書が公開されています:

加えて上記仕様の邦訳とそのほかにいくつか。とくに Opera の Gez Lemon 氏の記事は WAI-ARIA を今すぐ使い始めるべきとを強くアピールしてくれていて好きです。「Aria のロールやプロパティを追加すると、HTML 4.01 や XHTML 1.0 でバリデートしない。しかしそれでもよいのだ」とか「ARIA を使うことにデメリットは何もない」とか: