「role属性」の使い方

10月に入ってだいぶ経ちますが、9月と比べて気温の変化もだんだん変わってきましたね。

でも、世界の情勢からみるとほとんどマスクなしの生活が増えてますが、日本ではまだまだマスク生活のままですね。

いつになったらCOVID-19の終息はいつくるの？

マスク生活がホンマにしんどい！

そろそろ、マスク生活から抜け出したい気持ちが強いこのころです…

海外規制も緩和されつつ、感染者を増えないことを…

さてと本題に入りましょう。

「role属性」の使い方

今のHTML5の時代の中、アクセシビリティ向上が求められる時代になっています！

しかも、今の時代では高齢者や障害を持った人がWebサイトやWebアプリケーションを閲覧したり、利用する人が増えてます。

なぜ、「role属性」が必要なのか、みんなで一緒に考えながら一緒に技術の成長をしていきましょう。

role属性とはなにか？

「role」はHTML5で追加された新しい属性です。

「role」を使うことで、「この要素にはこういった役割がある」と明示的に示すことができます。

HTML5時代になりつつ、ページの要素が明確的に機械が読み取れるようになってきてます。

例えば、ナビケーションの明確を表示するためにはどうしたらいいか？

こちらはHTML4時代の時の記述方法です。

<div id="navigation">
	<ul id="navimenu">
		<li><a href="./" title="HOME">HOME</a></li>
		<li><a href="./menu01.html" title="">Menu01</a></li>
		<li><a href="./menu02.html" title="">Menu02</a></li>
		<li><a href="./menu03.html" title="">Menu03</a></li>
		<li><a href="./contact.html" title="">Contact</a></li>
	</ul>
</div>

上記のコードでは「ナビゲーションです」という機械的に認識されないので、下記でrole属性を追加する必要があります。

<nav id="navigation" role="navigation">
	<ul id="navimenu">
		<li><a href="./" title="HOME">HOME</a></li>
		<li><a href="./menu01.html" title="">Menu01</a></li>
		<li><a href="./menu02.html" title="">Menu02</a></li>
		<li><a href="./menu03.html" title="">Menu03</a></li>
		<li><a href="./contact.html" title="">Contact</a></li>
	</ul>
</nav>

現在では、当たり前のようにHTML5時代なので、こういう記述が必要になります。

HTML5時代になってから新しいタグがどんどん増えてきてますが、その意味合いのあるページを構築しとかないとだめです。

role属性はあくまで補助的な役割をするものです。