HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】

HTMLでrole属性を使ってアクセシビリティを高める方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• role属性とは
• アクセシビリティを高めるには
• role属性を使ってみよう
• HTMLを学習中の方へ

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

role属性を使ってアクセシビリティを高める方法について詳しく説明していくね！

お願いします！

role属性とは

英単語のroleとは「役割」という意味です。

HTMLでのrole属性はタグごとに設定する属性で、「タグごとの役割」という意味になります。

role属性に設定した値は、ブラウザに表示されるものではありません。

「目の不自由な方がブラウザの読み上げ機能を使った場合」などに使用される情報になります。

W3Cと呼ばれるweb技術の標準化をしている非営利団体により、WAI-ARIA（ウェイ エリア）というものが定義されています。
このWAI-ARIA とは、目や耳の不自由な方達にもWebサイトが使いやすくなるよう考慮された、HTMLの補足的な仕様のことを言います。

このような、より多くの人にとっての使いやすさを「アクセシビリティ」と言います。

HTMLにrole属性を適切に設定することにより、読み上げ機能などが正しく動作するため、障害を持った方にとってのアクセシビリティが高まります。

アクセシビリティを高めるには

アクセシビリティとは、身体的な条件や年齢などが様々であっても、みんなが同じように操作性がよくアクセスできるようにすることを言います。

アクセシビリティを高めるためのrole属性の設定として、ランドマークロールと呼ばれるWebサイトの中の大きなカテゴリー分けの設定ができます。

ランドマークロールにより、メインコンテンツエリアやヘッダー、フッターなどの意味づけがされ、Webサイト内のナビゲーションもわかりやすくなり、文書構造を明確にすることでアクセシビリティの向上を図ることができるようになります。

このように、role属性によって要素に意味づけをして役割を与えることで、スクリーンリーダーなどの読み上げソフトでもWebサイトの構造を認識することが可能になります。

同じようなHTMLでの補足としてはalt属性があります。

alt属性はimgタグに使われますが、画像がエラーにより表示されない場合や、その画像を認識をすることができないユーザーのために補足的に使われる属性です。

このように、補足的な属性をHTMLに正しく設定することでユーザーのアクセシビリティは高まります。

[PR] Webデザインで副業する学習方法を動画で公開中

role属性を使ってみよう

<header role="banner">
  ヘッダー部分
</header>
<nav role="navigation">
  <ul>
    <li><a href="#">ナビゲーションメニュ-1</a></li>
    <li><a href="#">ナビゲーションメニュ-2</a></li>
    <li><a href="#">ナビゲーションメニュ-3</a></li>
  </ul>
  <form role="search">
    検索フォーム
  </form>
</nav>

<div id="main" role="main">
  ドキュメントのメインコンテンツ
</div>
<aside role="complementary">
  ドキュメントの補助部分
</aside>

<footer role="contentinfo">
  フッター部分
</footer>

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
• ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
• ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

プログラミングを独学していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する