role属性のカテゴリと基本的な使い方①
role属性はいくつかのカテゴリに分類されている。
- ランドマークロール：ページ全体のレイアウトを定義するロール。ナビゲーションの目印として機能する。
（banner／conplementary／contentinfo／form／main／navigation／search／region） - 文書構造ロール：静的な文書構造を定義するロール
（aplication／article／group／list／listitem／math／presentationなど多数） - ウィジェットロール：ユーザーが操作可能なユーザインタフェースを定義するロール
（button／checkbox／radio／searchbox／tab／tablist／tabpanelなど多数）
role属性はスクリーンリーダーに対応するために全ての要素に必ず付けなければならないものではない。例えばnav要素にはrole=”navigation”、main要素にはrole=”main”、button要素にはrole=”button”といった具合に、HTML要素にはもともとそれに対応したrole属性が「暗黙のロール」として設定されているので、そうしたものについてはわざわざrole属性を重複して設定する必要はない。
role属性のカテゴリと基本的な使い方②
role属性を設定したほうが良いケースというのは、例えばシステムの都合など、何らかの事情でセクション要素などが使用できず、レイアウトは全てdivで組まなければならないような場合である。このような時、
<div role=”navigation”>…ナビゲーションメニュー…</div>
このようにrole属性で役割を付与しておけば、
<nav>…ナビゲーションメニュー…</nav>
とマークアップしたのと同等のセマンティクスを与えることができ、スクリーンリーダーもそれを解釈できるようになる。
また、role属性はHTML要素の持つ暗黙のroleを上書きすることができるので、例えばタブUIのようにそもそもHTMLの語彙にないUIを作成する時など、セルのコメントのように書くことでこれが「タブ」であることをスクリーンリーダーに伝えることもできる。
<ul role="tablist">
<li role="presentation"><a href="#tab01" role="tab">タブ1</a></li>
<li role="presentation"><a href="#tab02" role="tab">タブ2</a></li>
<li role="presentation"><a href="#tab03" role="tab">タブ3</a></li>
</ul>
<div id="tab01" role="tabpanel">タブパネル1</div>
<div id="tab02" role="tabpanel">タブパネル2</div>
<div id="tab03" role="tabpanel">タブパネル3</div>【スクリーンリーダーに要素を無視させる】
タブ構造を表現するにはtablist > tabとなっていれば十分で、tablistとtabの間に挟まっているli要素は意味的には不要である。このようにHTMLとしてのマークアップ構造では必要でも、WAI-ARIAで表現する構造としては不要になるものについては、role=”presentation”を設定することでスクリーンリーダーにこの要素を無視させることができる。
ランドマークロール①
ランドマークロールはページ全体のレイアウトを定義するためのロールで、種類も少なく、その多くに暗黙のロールを持つHTML要素が存在するので、理解しやすい。また、これはスクリーンリーダーがページ内を移動する時の目安となるものであり、基本的に設定するだけで要素をアクセシブルにすることができるため、導入の敷居は低いわりに効果が分かりやすいのもポイントである。
search以外のランドマークロールは全て暗黙のロールを持つHTML要素が存在する。基本的にHTML要素が同等の暗黙のロールを持つ場合は、重複してrole属性を記述する必要はない。
何らかの事情で各領域をdiv要素などで代用しなければならない場合に使用するものと覚えておく。
- banner：ページのヘッダー領域（ページ内に1つ）／セクション要素の子孫でないheader要素
- contentinfo：ページのフッター領域（ページ内に1つ）／セクション要素の子孫でないfooter要素
- main：メインコンテンツ領域（ページ内に1つ）／main要素
- complementary：補足のコンテンツ（サイドバーなど）／aside要素
- navigation：ナビゲーション／nav要素
- region：汎用的なランドマーク／section要素
- search：検索フォーム／-
- form：フォーム／form要素
ランドマークロール②
role=”search”は対応する暗黙のロールがないので、ヘッダー内に配置されたフォームを「検索フォーム」として明確に意味付けするにはrole=”search”が必要である。
なお、banner／contentinfo／main以外はページ内に複数設置される可能性があるが、その場合はaria-label属性によって各ロールに対してアクセシブルな名前を付けて区別できるようにしておくことが望ましいとされている。
<!-- aria-labelで複数のロールを名前で区別できるようにした事例 -->
<nav class="gnav" aria-label="メインメニュー">グローバルナビ</nav>
<nav class="lanv" aria-label="カテゴリ内メニュー">ローカルナビ</nav>aria-labelはあくまで使用するユーザに向けた名前になるので、「グローバルナビ」「ローカルナビ」といった専門用語よりも、より一般的な馴染みやすい名称を使った方が良いだろう。
<!-- divでマークアップする場合 -->
<div id="header" class="header" role="banner">
<h1 class="header__logo"><a href="/">ロゴ</a></h1>
<form action="#" method="GET" role="search">検索フォーム</form>
<div class="gnav" role="navigation">グローバルナビ</div>
</div>
<div id="contents" class="contents">
<div id="main" class="main" role="main">メインコンテンツ領域</div>
<div id="sidebar" class="sidebar" role="complementary">サイドバー領域</div>
</div>
<div id="footer" class="footer" role="contentinfo">フッター領域</div>
<!-- HTML5でマークアップする場合 -->
<header id="header" class="header">
<h1 class="header__logo"><a href="/">ロゴ</a></h1>
<form action="#" method="GET" role="search">検索フォーム</form>
<nav class="gnav">グローバルナビ</nav>
</header>
<div id="contents" class="contents">
<main id="main" class="main">メインコンテンツ領域</main>
<aside id="sidebar" class="sidebar">サイドバー領域</aside>
</div>
<footer id="footer" class="footer">フッター領域</footer>使用頻度が高いと思われるその他のロール
- tablist：タブ要素をまとめたリスト／タブ切り替え
- tab：タブ要素／タブ切り替え
- tabpanel：タブパネル要素／タブ切り替え
- dialog：ブラウザ内ウィンドウ／ポップアップ・モーダルウィンドウ・動画プレイヤーなど
- presentation, none：WAI-ARIAの構造から隠す／スクリーンリーダーに読ませる必要のない要素（アイコンなど）
