Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

role 属性

『role』属性はWAI-ARIAの仕様に基づき、HTML要素の役割をスクリーンリーダーなどの支援技術に伝えるための属性です。

構文

<!-- divをボタンとして機能させる -->
<div role="button" tabindex="0">送信</div>

<!-- ナビゲーション領域を明示する -->
<div role="navigation" aria-label="メインナビゲーション">
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/about">について</a></li>
  </ul>
</div>

主なrole値

値	概要
button	ボタンとして機能する要素に指定します。Enterキーまたはスペースキーで操作できることをスクリーンリーダーに伝えます。
navigation	ナビゲーションリンクのまとまりであることを示します。『nav』要素と同等の意味を持ちます。
dialog	モーダルダイアログやポップアップであることを示します。ダイアログが開いた際にスクリーンリーダーがユーザーに通知します。
alert	重要なメッセージや警告を示します。要素が挿入されると、スクリーンリーダーが即座に読み上げます。
main	ページのメインコンテンツ領域を示します。『main』要素と同等の意味を持ちます。
banner	サイト全体のヘッダー領域を示します。『header』要素（body直下）と同等の意味を持ちます。
complementary	メインコンテンツを補完するサイドバー等の領域を示します。『aside』要素と同等の意味を持ちます。
contentinfo	著作権情報や連絡先などのフッター情報を示します。『footer』要素（body直下）と同等の意味を持ちます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>role属性サンプル</title>
  <style>
    [role="button"] {
      display: inline-block;
      padding: 8px 16px;
      background: #0066cc;
      color: white;
      border-radius: 4px;
      cursor: pointer;
    }
    [role="alert"] {
      padding: 12px;
      background: #ffe0e0;
      border: 1px solid #cc0000;
      border-radius: 4px;
    }
    [role="dialog"] {
      border: 2px solid #ccc;
      padding: 16px;
      background: white;
      border-radius: 8px;
      max-width: 400px;
    }
  </style>
</head>
<body>

  <!-- divにrole="button"を付けてボタンとして機能させる -->
  <div role="button" tabindex="0" aria-pressed="false" id="myBtn">
    クリックしてください
  </div>

  <!-- エラーメッセージにrole="alert"を指定 -->
  <div role="alert" id="errorMsg" aria-live="assertive">
    入力値に誤りがあります。確認してください。
  </div>

  <!-- モーダルダイアログにrole="dialog"を指定 -->
  <div role="dialog" aria-modal="true" aria-labelledby="dialogTitle">
    <h2 id="dialogTitle">確認</h2>
    <p>本当に削除しますか？</p>
    <div role="button" tabindex="0">はい</div>
    <div role="button" tabindex="0">いいえ</div>
  </div>

</body>
</html>

実行結果

視覚的にはスタイルが適用された各要素が表示されます。スクリーンリーダーを使うと、それぞれの要素がボタン・警告・ダイアログとして読み上げられます。

[クリックしてください]  ← 青いボタン

┌─────────────────────────────────────┐
│  入力値に誤りがあります。確認して...  │  ← 赤い警告ボックス
└─────────────────────────────────────┘

┌──────────────────────┐
│  確認                │
│  本当に削除しますか？ │
│  [はい] [いいえ]     │  ← ダイアログ
└──────────────────────┘

概要

WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）は、Webアクセシビリティを向上させるための仕様です。『role』属性はその中核をなすもので、スクリーンリーダーや音声認識ソフトなどの支援技術に対して要素の意味・役割を伝える役割を担います。

『role』属性はあくまで意味の補完であり、「ネイティブのHTMLセマンティクスを優先する」という原則があります。例えば、ボタンには『div role="button"』ではなく『button』要素を、ナビゲーションには『div role="navigation"』ではなく『nav』要素を使うのが最善です。HTMLのセマンティック要素ではカバーできないカスタムUIコンポーネントを作る場合に『role』属性を使いましょう。

『role』属性と組み合わせてよく使われるARIA属性には、ラベルを付ける『aria-label』・状態を伝える『aria-expanded』や『aria-pressed』・動的な変更を通知する『aria-live』などがあります。アクセシブルなUI実装には、これらを適切に組み合わせることが重要です。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス