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

初心者向けにHTMLでrole属性を使ってアクセシビリティを高める方法について解説しています。WAI-ARIAの基本とrole属性の役割、role属性を使ったアクセシビリティ確保のための設定方法を紹介します。ぜひ役立ててください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

role属性とは

W3Cと呼ばれるweb技術の標準化をしている非営利団体により、WAI-ARIAというものが定義されています。このWAI-ARIA とは目や耳の不自由な方達がwebやアプリにアクセスし、利用をしやすくなるようしたHTMLの補足的な仕様のことを言います。この操作性・アクセシビリティはHTML5ではrole属性を入れることで補完することができるようになります。

たとえばdivタグは汎用性があり使用しやすいですが、コンピュータ側ではそのような意味で使われているタグなのかが理解できません。障害を持ったユーザーはこのrole属性が詳細に設定されているサイトでは読み上げ機能などで操作性が大きく変わることになります。

 

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

アクセシビリティとは身体的な条件や年齢などが様々であっても、皆が同じように操作性がよくアクセス出来るようにすることを言います。アクセシビリティを高めるためのrole属性の設定として、ランドマークロールと呼ばれるwebサイトの中の大きなカテゴリー分けの設定をすることができます。

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

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

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

role属性を使ってみよう

<header role="banner">header</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>

  <divid="main"role="main">

    ドキュメントのメインコンテンツ

  </div>

<aside role="complementary">

  ドキュメントの補助部分

</aside>

<footer role="contentinfo">footer</footer>

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。