レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】

role属性

role 属性は、HTML5の新たに追加された属性です。ですが、HTML5から使えるというわけではなく、現行バージョンのHTML/XHTMLでも使うことができます。

ただ、role属性（厳密にいうとARIAなわけですが・・）は、XHTML1.1のモジュールとして考えられていため、HTML4.01/XHTML1.0で使うと文法エラーが起こってしまいます。しかし、この文法エラーが起こってもとくに問題はありません。

さて、roleは日本語に訳すと、「役割」です。その意味通りに要素に役割を持たせる働きをします。それはどううことかというと、HTMLは、例えば、オブジェクトに「大見出しの意味を持たせる」とか「箇条書きリストの意味を持たせる」という働きをします。

role属性は、さらにそのオブジェクトに「そのリストにナビゲーションの役割を持たせる」などの働きをします。つまり、UAに「役割」と「状態（aria-*属性）」の情報を渡す事ができるようにするのがARIAの実装です。

参考

• WAI-ARIAの誕生と現状 | コラム | ミツエーリンクス

レイアウトの役割

HTML5 からはheader要素やfooter要素などが新たに追加されることになり、「ここはヘッダーのリージョン」という明確な位置づけができるようになります。しかし、これまではアウトラインが明確になっていなかったため、「ここのリージョンはヘッダーのつもり」という位置づけしかできませんでした。

ARIAを実装することで、リージョンも明確にすることができるようになります。

ランドマークのrole属性

ページのリージョンとして役割を果たすのが下記です。

• application
• banner
• complementary
• contentinfo
• main
• navigation
• search

参考

• 4.3.6. ランドマークのロール（role）

レイアウトを作成

例として下記図のようなシンプルですが、定番のレイアウトがあった場合のマークアップは下記のようになるかと思います。

HTML4.01/XHTML1.0

<div id="header">
ヘッダー
</div>

<ul id="globalnavi">
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

<div id="main">
メイン
</div>

<div id="submenu">
サブメニュー
</div>

<div id="footer">
フッター
</div>

HTML5

<header>
ヘッダー
</header>

<nav id="globalnavi">
  <ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</nav>

<div id="main">
メイン
</div>

<aside>
サブメニュー
</aside>

<footer>
フッター
</footer>

ランドマークrole属性の使い方

レイアウトとしてマークアップした上記のようなHTMLにランドマークrole属性を加えていきます。使い方は特別なことはなにもありません。

ヘッダーならば、サイトのロゴやサイトのタイトルなどを設置します。そのリージョンを示すのが『banner』であり、グローバルナビゲーションなどのナビゲーション要素の場合は『navigation』を用います。ですのでこれらに当てはまる部分に使っていけばいいわけです。

HTML4.01/XHTML1.0 + role属性

<div id="header" role="banner">
ヘッダー
</div>

<ul id="globalnavi" role="navigation">
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

<div id="main" role="main">
メイン
</div>

<div id="submenu" role="complementary">
サブメニュー
</div>

<div id="footer" role="contentinfo">
フッター
</div>

HTML5 + role属性

<header role="banner">
ヘッダー
</header>

<nav id="globalnavi" role="navigation">
  <ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</nav>

<div id="main" role="main">
メイン
</div>

<aside role="complementary">
サブメニュー
</aside>

<footer role="contentinfo">
フッター
</footer>

ちょっとした説明

詳しい内容は、下記リンクのドキュメントを参考にしていただければいいと思いますが、ちょっとだけ説明をすると....

• application
• banner
• complementary
• contentinfo
• main
• navigation
• search

role="banner"

ドキュメントからの引用ですが、大見出し（標題）またはウェブサイトのタイトルを含むリージョンなので、ヘッダーに使うのが適していると思います。そのため、<div id="header" role="banner">や<header role="banner">で使います。

role="complementary"

ドキュメントからの引用ですが、メインのコンテンツから切り離しても意味を持つ、文書の補足的なセクションですので、サブメニューで使うのが適しているかと思います。HTML5では<aside>がありますので、<aside role="complementary">

role="contentinfo"

ドキュメントからの引用ですが、親の文書に適用されるメタデータ。例えば、脚注、著作権の記載、プライバシーポリシーへのリンクが、これに当てはまる。ですので、フッターで使うのが適しているかと思います。そのため、<div id="footer" role="contentinfo">や<footer role="contentinfo">で使います。

role="main"

値の名称からも想像できるかと思いますが、メインのコンテンツで使われます。HTML4.01/XHTML1.0でもHTML5でもdiv要素で使うことになるかと思います。

role="navigation"

ドキュメントからの引用ですが、ナビゲーション要素（通常はリンク）の集合ですので、グローバルナビゲーションなどに使うことになると思います。そのため、<ul role="navigation">や<nav role="navigation">で使います。

role="search"

検索ツールでので、form要素などに使うことになるかと思います。

まとめ

Webコンテンツのセマンティックスの不足を補うのもARIAです。ARIAも勧告に近づいてきました。また、ARIAに対応したATもすでにあります。HTML5が勧告されてからとかARIAが勧告されてからとかではなく、ARIAを用いることは何もデメリットはありませんので、バンバン使っていってほしいと思います。

Tweet Check