メインコンテンツ
ここに主要な内容が入ります。
The role attribute in HTML defines the purpose of an element, helping assistive technologies like screen readers accurately interpret the structure and functionality of a web page.
role属性は、Webページの各要素に対して「役割（Role）」を与えるために使用されます。特に、以下の目的で利用されます。
例えば、ナビゲーションメニューにはrole="navigation"を指定することで、その要素がナビゲーションの役割を持つことを明示できます。
role属性にはさまざまな値がありますが、大きく以下のカテゴリに分けられます。
これらのroleは、Webページのレイアウトを明示的に定義するのに役立ちます。
banner<header role="banner">main<main role="main">complementary<aside role="complementary">contentinfo<footer role="contentinfo">navigation<nav role="navigation">使用例
HTML
<header role="banner">
<p class="head1">サイトのタイトル</p>
</header>
<nav role="navigation">
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社概要</a></li>
</ul>
</nav>
<main role="main">
<p class="head2">メインコンテンツ</p>
<p>ここに主要な内容が入ります。</p>
</main>
<aside role="complementary">
<p class="head3">関連情報</p>
<p>サイドコンテンツです。</p>
</aside>
<footer role="contentinfo">
<p>© 2025 Example Inc.</p>
</footer>サイトのタイトル
メインコンテンツ
ここに主要な内容が入ります。
ボタンやフォームの入力フィールドなど、ユーザーが操作できる要素に適用することで、より適切な情報を提供できます。
button<div role="button">クリック</div>checkbox<div role="checkbox">radio<div role="radio">progressbar<div role="progressbar">slider<div role="slider">HTML
<div role="button" tabindex="0" onclick="alert('クリックされました！')">
カスタムボタン
</div>role属性を使うべき場面<div> や <span> でボタンを作るなど）role属性を使わなくても良い場面<button> や <nav>）NG例（不要なroleの使用）
HTML
<button role="button">送信</button> <!-- 不要: <button> はデフォルトでボタンの役割を持つ -->role属性はWebページのアクセシビリティを向上させるために重要。roleを設定すると、スクリーンリーダーが正しく認識できる。roleの使用は避ける。