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>

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

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

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

HTMLを学習中の方へ

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

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

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

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

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

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

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