【STINGER5対応】 Webアクセシビリティのためrole属性を実装しよう!

点字ブロックの画像

HTML5にて新たに追加された『role属性』。role属性はWebページのドキュメントや要素の役割を設定・明示するために使用します。使用することによってWebにおけるアクセスのしやすさアクセス性の良さ(=Webアクセシビリティ)の向上を図ります。

[adsense]
[toc]

Webアクセシビリティとは

点字ブロックの画像

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。

ウェブは、高齢者や障害者にとっても、重要な情報源になりつつあります。しかし、実際に提供されているウェブページにはバリアがあり、高齢者や障害者にとって使いにくい、あるいは使えない作りになっているために、内容を知ることさえできないことが少なくありません。

role属性をサイトに設置することで目の不自由な方も音声読み上げソフトなどを利用しWebページから情報を得ることができます。 Webのバリアフリー化を目指すためにもrole属性は設置しておきたいものです。

role属性の種類とSTINGER5に追加する方法

role=”banner” ヘッダー部分

header.phpの<header>を<header role=”banner”>に書き換え

role=”navigation” ナビゲーション

header.phpの<nav>を<nav role=”navigation”>に書き換え

role=”contentinfo” コンテンツ情報、メタ情報

footer.phpの<footer>を<footer role=”contentinfo”>に書き換え

STINGER5では<footer id=”footer” role=”contentinfo”>となるように書き換えます。

role=”complementary” 補助的情報部分

sidebar.phpの<aside>を<aside role=”complementary”>に書き換え

role=”search” 検索機能

searchform.phpの<form>を<form role=”search”>に書き換え

STINGER5では<form method=”get” id=”searchform” action=”/” role=”search”となるように書き換えます。

role=”main” メインコンテンツ

single.php、page.php、archive.php、home.php、index.php、search.php、404.phpの<main>を<main role=”main”>に書き換え

※<>は大文字で記載していますが、コードを記述する際は半角変えてください。

role属性の詳しい説明は以下のサイトがとてもわかりやすておススメです

まとめ

Webのバリアフリー化はWebの世界でもどんどん押し進んでいくことと思われます。role属性は簡単な記述のみだけですし、ブラウザの見た目上も全く変わりません。早いうちに対策をとるに越したことはありませんよね?

それではちゅんこ@shufulifeがお送りしましたー

ちゅんこ

ちゅんこ

日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘(小1)と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。

こちらの記事もおすすめです

関連するキーワード

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です