Webアクセシビリティが向上する！HTMLのrole属性の使い方を解説

皆さんは「Webアクセシビリティ」という言葉ご存知でしょうか？

街中で点字やスロープなど、障碍者や高齢者に優しい設備を見かけたことはあるでしょう。

そのようなユニバーサルデザインや、バリアフリーのように誰もが使いやすいWebコンテンツを意味するのが「Webアクセシビリティ」です。

今回は、そんなWebアクセシビリティを向上させる「role属性」について解説していきます。

この記事を読むことで、

といったことを理解することができます。

現代は、障碍者もお年寄りも、小さな子供でさえパソコンやスマートフォンでWebサイトやアプリを見るのが当たり前です。

誰もが利用しやすいWebアクセシビリティを向上させるために、HTMLにおける「role属性」について、しっかり学びましょう！

HTMLのrole属性とは？W3Cの定義WAI-ARIAについても解説

HTMLで利用することができる「role属性」は、Web技術の標準化を定めているW3Cの定義の「WAI-ARIA」の仕様に組み込まれている属性の一つです。

WAI-ARIAとは、障碍者や高齢者がWebサイトやアプリを利用しやすくするために定められたHTMLの補足的な仕様のことです。

role属性の役割は、HTMLタグのそれぞれの要素の役割を明確に示すことで、Webサイトの読み上げ機能などで操作性に大きな影響を与えます。

なぜrole属性がHTMLの仕様に必要なのか

元々、コンピューター側ではHTML内で使われいる<div>などタグの意味は理解できません。

例えば、divタグを使ってナビゲーションを記述するとします。

<div>
 <ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">WORK</a></li>
   <li><a href="#">SERVICE</a></li>
   <li><a href="#">CONTACT</a></li>
</nav>

上記の場合、コンピューター側では、

というようにしか認識されず、この要素がナビゲーションであることを理解できないのです。

コンピューター側が理解できるようになるためには、どの要素がどんな役割を担っているのか明確にするrole属性は欠かせません。

しかし、すでに意味づけがされいるタグも多くあります。

上記の場合、navタグを使えばrole属性を使わなくてもコンピューター側が「ナビゲーション」であることを理解できます。

きちんと各タグの意味を理解して適切に使用し、必要に応じてroel属性を使用するのが望ましいと言われています。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

role属性の種類は4つ

role属性には多くの値があり、それぞれ大切な役割を担っています。

全部で約60個の値がありますが、すべて覚えるのは大変なので、今回は主に使用する4つの種類のみをご紹介します。

では、それぞれの主な役割と、各種類ごとによく使用される値の一部を紹介していきます。

1.ランドマークのrole

ナビゲーションランドマークとして意図されたページ内の領域のことで、最もよく利用されているrole属性の種類です。

navigation	ナビゲーション（nav要素と同様の意味）。複数回の使用は望ましくない。
banner	ヘッダー。1回のみ使用可能。
search	検索。サイトコンテンツの検索などに利用可能。複数回の使用も可能。
mian	メインコンテンツ。1回のみ使用可能。
contentinfo	連絡先や著作権など、ページやWebサイトについての情報。1回のみ使用可能。
complementary	補足のコンテンツ。1回のみの使用が望ましい。
form	フォーム。form要素に関する属性。

2.ウィジェットとしてのrole

ボタンやリンクなど、見た目を表現するのに関係しているrole属性の種類です。

複合と単独がありますが、今回は使う機会が多い単独のみご紹介します。

button	ボタン
link	リンク
radio	ラジオボタン
searchbox	検索テキストボックス
alert	アラート。警告するためのメッセージ
switch	on/offを表すチェックボックス

3.文書構造を担うrole

ランドマークよりも細かい構造を表す種類。ページのコンテンツを体系付ける構造の記述を行います。

application	アプリケーションとしてのコンテンツ
img	画像
none、presentation	意味をもたないことを示す
article	文書、ページ
table	テーブル

4.抽象role

一般的な役割の概念を定義する目的で使用するものですが、Webページ作成者が使うことは基本的にはありません。

抽象roleの一部は、スーパークラス（親クラス）とされていて、1～3で紹介したroleの元になっているため、利用していはいけないという暗黙のルールがあります。

HTMLにおけるrole属性の使い方

ここでは、代表的なrole属性の使い方を1つ紹介します。

どのrole属性も、基本的な使い方は同じで

<指定したい要素 role ="roleの値">入力内容</指定したい要素>

というようにHTML内に記述します。

role=”alert”

ボタンを押した後に「エラーメッセージを」伝えたい場合を想定して、role属性を使うと以下のようになります。

<div role ="alert">入力にエラーがあります。</div>

上記の記述の場合で

「テキストを入力する→送信ボタンにマウスをフォーカスする→ボタンを押す」という行動をとった場合、

コンピューターの読み上げ機能をつかうと「（入力したテキスト）→送信ボタン→アラート。入力にエラーがあります

という内容が読み上げられます。

まとめ：HTMLのrole属性を使用してアクセシビリティを高めよう

今回は、HTMLのrole属性の役割や使い方について解説しました。

IT技術が発達している現代で、Webアクセシビリティを高めることが大切であるということもご理解いただけたでしょうか。

SEOに直結するわけでもなく、見た目が変わるわけでもないrole属性は、使わなくてもWebサイトに支障はありません。

しかし、Webアクセシビリティの向上が求められている今、role属性はHTMLで必須であると言えるのではないでしょうか。

暗黙のルールを守りつつ、必要な時にrole属性を正しく使用して、「誰もが使いやすいWebサイトやアプリケーション」を作っていきましょう！