ランドマークのrole属性について調べてみた

最近見かけるrole=””って何?

たまに向学のためにWebサイトのソースを見ることがあります。そんな中で「<main>」タグというのが採用されたのを知ったり日頃の不勉強を補っています。
その中で一部のタグの中に見慣れない「role =”◯◯◯”」というのがありました。
jQuery Mobileで、「data-role」というのがあったので似たようなものかなと思っていましたが、、、。
先日、こちらで偶然再会したのでメモしておこうと思います。

ランドマークのrole属性

まず、参考にしたページから該当部分を抜粋すると

<header  role="banner">
<nav role="navigation">
<main role="main">
<footer role="contentinfo">

となっており、タグと名前が同じだったり似てたりするものもあります。これらはrole属性の中でもランドマークをあらわすもののようです。こちらのブログで知りました。
HTML5から追加になったようですね。

主なランドマークのrole属性

banner … 大見出し（標題）またはウェブサイトのタイトルを含むリージョン。
navigation … 文書または関連する文書をナビゲートするためのナビゲーション要素（通常はリンク）の集合。
main … 文書内のメインのコンテンツ。
complementary … メインのコンテンツから切り離しても意味を持つ、文書の補足的なセクション。
contentinfo … 親の文書に適用されるメタデータ。
search … ウェブ文書の検索ツール。

アクセシブル・リッチ・インターネット・アプリケーション（WAI-ARIA）1.0より

これらをレイアウトするとこんなイメージになります。