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=”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日 最終更新日 : 2015年1月8日

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

検索

スポンサードリンク

バージョン

リファレンス