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

2021.09.17
html role

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

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

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

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

この記事を読むことで、

  • HTMLのrole属性とは何か
  • 何のためにrole属性が使われているのか
  • 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>

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

「HOME ABOUT WORK SERVICE CONTACT」 という文字列がある。

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

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

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

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

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


「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

role属性の種類は4つ

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

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

1.ランドマークのrole 2.ウィジェットとしてのrole 3.文書構造を担うrole 4.抽象role

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

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アラート。警告するためのメッセージ
switchon/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・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

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

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

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

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

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5