role属性

このエントリーをはてなブックマークに追加

role属性はHTML要素に役割を与える為の属性です。

role属性はWAI-ARIAで定義されており、利用することでサイトのアクセシビリティを高めることができます。

role=”alert”

role=”alert”は警告情報を指定する為の属性です。

<p role="alert" class="error">
  IDが異なります。
</p>

role=”alertdialog”

role=”alertdialog”は警告情報を指定する為の属性です。role=”alert”の機能に加えてユーザーからの応答(確認ボタンなど)を合わせて記述します。

<div role="alertalertdialog" class="error">
  <p>IDが異なります。</p>
  <button>NG</button> <button>OK</button>
</div>

role=”main”

role=”main”はメインコンテンツを指定する為の属性です。次のサンプルではsection要素をメインコンテンツとして指定してます。支援デバイスによってはrole属性「main」が指定された要素の読み上げ機能などが提供されています。

<section role="main">
  メインコンテンツ
</section>

これはmain要素を使ってマークアップしているの同じ意味を持ちます。

<main>
  メインコンテンツ
</main>

音声ブラウザなど多くの支援デバイスはmain要素ではなく先に実装されたrole属性「main」のみ対応しています。main要素を利用する場合もrole属性「main」を合わせて指定するのが良いでしょう。

<main role="main">
  メインコンテンツ
</main>

role=”navigation”

role=”navigation”はnav要素と同じくナビゲーションを示すrole属性です。nav要素とは違いページ内に一つだけ指定を行います。

role=”banner”

role=”banner”はsection要素article要素の子でないheader要素を示しすrole属性です。

role=”contentinfo”

role=”contentinfo”はsection要素article要素の子でないfooter要素を示しすrole属性です。

role=”presentation”

role=”presentation”は視覚表現を行う要素に対して指定する属性です。たとえばtable要素でレイアウトテーブルを行う場合は以下のように指定を行います。

<table role="presentation">
	<tr>
		<td>左上</td>
		<th>右上</th>
	</tr>
	<tr>
		<td>左下</td>
		<td>右下</td>
	</tr>
</table>

これは以下のようにborder属性に0を指定した場合と同じ意味になりますが、HTML5ではborder属性には1もしくは空文字しか指定できません。

<table border="0">
	<tr>
		<td>左上</td>
		<th>右上</th>
	</tr>
	<tr>
		<td>左下</td>
		<td>右下</td>
	</tr>
</table>

参考URL

5. The Roles Model - WAI-ARIA - W3C

登録日 : 2013年09月05日 最終更新日 : 2018年1月7日

同じカテゴリー(WAI-ARIA)のエントリー

検索

スポンサードリンク

バージョン

リファレンス