HTMLのrole属性の役割

HTMLのrole属性は、障がいを持つユーザーのためのウェブコンテンツのアクセシビリティを向上させる強力なツールです。この属性を使うことで、ウェブページの構造や意味を明確に伝え、操作を容易にすることができます。スクリーンリーダーや支援技術を利用するユーザーが、ウェブページを理解しやすくし、円滑に操作できるよう支援する重要な機能です。

また、ウェブサイトの構造や意味を明確に表現できるため、検索エンジンがウェブサイトをより正確に理解できるようになり、その結果、ウェブページはより包括的でアクセスしやすいユーザー体験を提供できます。したがって、HTMLのrole属性を使用することで、ウェブサイトのアクセシビリティ、検索エンジン最適化（SEO）、構造や意味の向上に役立ちます。

以下の目次で説明します。

  1. role属性とは何か
  2. role属性のメリット
  3. role属性の種類と値
  4. role属性を使用する際の注意点

HTML role 属性は、HTML要素（Element）の拡張概念であり、より明確なHTML要素の構造と意味を付与する役割を持つ属性です。

この属性はウェブアクセシビリティを向上させるためにHTML5から導入され、WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）仕様の一部です。この仕様はウェブコンテンツのアクセシビリティ向上のための標準を提供しています。

WAI-ARIAはウェブアクセシビリティを向上させるために開発された標準であり、ウェブコンテンツやウェブアプリケーションのアクセシビリティを高めるための技術仕様です。WAI-ARIAはHTML要素に追加できる属性の集合であり、ウェブコンテンツの意味を支援技術（assistive technologies）に伝えます。

以下は、role属性を使って検索機能を表す例です。

HTML 
<form role="search"><!-- role属性を使用しました。 -->
    <label for="search-input">Search:</label>
    <input type="text" id="search-input" name="search" placeholder="Search...">
    <button type="submit">Submit</button>
</form>

コードの補足説明
<button type="submit">は送信ボタンです。このボタンをクリックすると、該当の要素を含む<form>タグで表されるフォーム内のすべてのコントロールの値が送信されます。

上記の例では、<form>要素にrole属性を追加し、該当の要素が検索機能を持つことを明示しました。これにより、この要素が検索入力フィールドと送信ボタンを含む検索フォームであることを明確に示しています。

role属性を使用して検索機能を定義することで、スクリーンリーダー利用者はこの要素が検索機能を持つフォームであることを理解できます。また、role属性を用いることで、検索エンジンはこの情報を活用し、ウェブページの構造を把握し、検索結果の関連性をより正確に評価できます。

この例では、role属性を使用して検索機能を持つ検索フォームを明示的に定義しています。これはウェブアクセシビリティ、セマンティックマークアップ、および検索エンジン最適化の改善に役立つ例です。

前述の例で確認したように、HTMLのrole属性にはさまざまな利点があります。これらの利点は、ウェブアクセシビリティの向上、セマンティックマークアップの強化、検索エンジン最適化（SEO）の改善など、多方面で現れます。いくつかの主要な利点を見ていきましょう。

ウェブアクセシビリティの向上

role属性を使用すると、障害を持つユーザーがウェブページをより理解しやすく操作しやすくなります。スクリーンリーダーなどの支援技術を利用するユーザーは、role属性によって要素の意味や役割を把握でき、それによりウェブコンテンツへのアクセスが容易になります。

セマンティックマークアップの強化

role属性はHTML要素の意味や役割を明確に定義するために使われます。これにより、開発者はウェブページの構造や意味をより正確に表現できます。コードの可読性や保守性を向上させ、ウェブページの意味的な構造をはっきり伝えることでユーザー体験の改善に役立ちます。これは開発者とユーザーの両方に要素の意味や機能を明確に伝えることができます。

検索エンジン最適化（SEO）の向上

role属性を使ってHTML要素の意味や役割を明示すると、検索エンジンはウェブページの構造をより正確に理解・解釈できます。これにより、検索結果により適切な情報を提供し、検索エンジン最適化（SEO）の向上につながります。role属性を使用することで、ウェブページの構造を明確に伝え、検索可能なコンテンツを効果的に表示できます。

向上したユーザー体験

role属性を使って適切な役割と意味を付与すると、ユーザーはウェブページをより理解しやすく操作しやすくなります。role属性によってアクセシビリティを向上させ、セマンティックマークアップを強化することで、ユーザーはコンテンツにより速くアクセスでき、必要な情報を簡単に見つけられます。これは全体的なユーザー体験の向上に役立ちます。

これらの利点を考慮すると、role属性を適切に活用してウェブページを構成することが重要であり、ウェブアクセシビリティやユーザー体験を向上させるための必須のツールと言えます。

該当のrole属性の値をクリックすると、MDN（Mozilla Developer Network）が提供する関連する詳細情報（英語）を見ることができます。

ウェブアクセシビリティに必要なrole属性の種類と値の一覧表
role="toolbar" ツールバーの役割を示します。通常、ボタンや入力フィールド、ツールバーなどの操作バーを表します。
role="tooltip" ツールチップの役割を示します。ユーザーが特定の要素にマウスを重ねたりフォーカスを当てたりした際に表示される情報を提供する小さなポップアップ要素を表します。
role="feed" フィードの役割を示します。動的に変化するコンテンツのストリームを表し、一般的にニュース、ブログ、ソーシャルメディアなどのコンテンツストリームを表現する際に使用されます。
role="math" 数学的な内容を示す役割を表します。数式や数学記法、数学的な表現などを含む要素を示すために使用されます。
role="presentation" 要素が視覚的な表現を持たないことを示します。つまり、視覚的なスタイルやレイアウトに影響を与えない要素であることを示します。
role="none" 要素の役割を削除し、アクセシビリティツリーに表示されないようにします。
role="note" コメントの役割を示します。補足情報や説明を提供するコメント要素を表します。
role="application" アプリケーションを示します。ウェブアプリケーションのメインコンテナまたはアプリケーション要素に適用できます。
role="article" 独立したドキュメント、ページ、またはセクションを示します。記事、ブログ投稿、フォーラムの投稿など、独立して構成可能なコンテンツに使用されます。
role="cell" テーブルのセルを示します。データテーブルの個別のセルに使用されます。
role="columnheader" テーブルの列ヘッダーを示します。データテーブルの列タイトルに使用されます。
role="definition" 定義を示します。用語の定義や説明に使用されます。
role="figure" 独立した画像、写真、図表などを示します。
role="group" 関連する要素のグループを示します。
role="heading" 見出しを示します。
role="img" 画像を示します。
role="list" リストを示します。
role="listitem" リストの項目を示します。
role="meter" 測定単位を持つ数値を示します。
role="row" テーブルの行を示します。
role="rowgroup" テーブルの行グループを示します。
role="rowheader" テーブルの行ヘッダーを表します。
role="separator" 区切り線を表します。
role="table" テーブルを表します。
role="term" 用語を表します。
role="scrollbar" スクロールバーを表します。一般的にスクロール可能な領域に使用されます。
role="searchbox" 検索入力ボックスを表します。検索機能を提供する入力ボックスに使用されることがあります。
role="separator" フォーカス可能な区切り線を表します。ユーザーがキーボード操作で区切り線にフォーカスを移動できる場合に使用されます。
role="slider" スライダーを表します。値を選択または調整するためのスライダーコントロールに使用されます。
role="spinbutton" スピンボタンを表します。値を増減させるボタンがあるスピンコントロールに使用されます。
role="switch" スイッチを表します。二つの状態を切り替える機能を持つスイッチコントロールに使用されます。
role="tab" タブを表します。タブ形式のナビゲーションやインターフェース要素に使用されることがあります。
role="button" ボタンの役割を表します。この役割を持つ要素は、ユーザーがクリックまたはタップして特定の動作や機能を実行できるボタンを示します。
role="tabpanel" タブパネルを表します。タブと関連付けられたパネルを提供する要素に使用されます。
role="treeitem" ツリーアイテムを表します。ツリー構造の各項目を示す要素に使用されます。
role="combobox" コンボボックスを表します。テキスト入力欄とドロップダウンリストが結合された入力コントロールに使用されます。
role="menu" メニューを表します。ドロップダウンメニューやコンテキストメニューに使用されます。
role="menuitem" メニュー項目を表します。この役割を持つ要素は、メニュー内で選択可能な項目を意味します。
role="tablist" タブリストを表します。複数のタブで構成されるインターフェースにおいて、タブリストを提供する要素に使用されます。
role="tree" ツリー構造を表します。階層的な項目で構成されたツリー形式のインターフェースで使用されます。
role="banner" ウェブページのグローバルヘッダーであるヘッダー領域を表します。通常、ウェブページの上部に位置し、サイトタイトル、ロゴ、主要なナビゲーションなどが含まれます。
role="contentinfo" ウェブページのグローバルフッターであるフッター領域を表します。通常、ウェブページの下部に位置し、著作権情報、ナビゲーションリンク、プライバシーポリシーなどの識別情報が含まれます。
role="complementary" 補助（または付加）コンテンツ領域を表します。主要コンテンツと直接関わらず、補助的（付加的）な役割を持つ内容が含まれます。主にウェブページのサイドバーを指します。
role="form" フォームを表します。入力フィールド、ボタン、ラベルなどが含まれるユーザー入力領域に使用されます。
role="main" 主要コンテンツ領域を表します。ページの核心的な内容が含まれる領域であり、HTML文書内でhidden属性が指定されていないrole="main"は二つ以上使用できません。
role="navigation" ナビゲーション領域を表します。サイトの主要なナビゲーションメニューやリンクが含まれます。
role="region" 意味的な区画を表します。該当区画がそれぞれ独立したコンテンツ領域であることを示します。
role="search" 検索領域を表します。検索フィールドや検索ボタンなどが含まれる検索インターフェースに使用されます。
role="alert" 警告やエラーを示す重要なメッセージを表示する役割です。ユーザーの注意を喚起し、重要な情報を伝達するために使用されます。
role="log" システムログまたは記録を表します。主に作業記録やイベントログなどを表示するために使用されます。
role="marquee" 領域を、頻繁に更新される非必須情報を提供するライブ領域の種類として定義します。一般的な用途としては、株価ティッカーや広告バナーなどがあります。
role="status" 状態情報を示す役割を持ちます。主にアプリケーションの現在の状態や進行状況を表示するために使用されます。
role="timer" 時間を示す役割を持ちます。タイマーやカウントダウンなど、時間に関連する情報を表示するために使用されます。
role="alertdialog" 警告メッセージを表示するダイアログ(Dialog)を表します。この役割を持つ要素は、ユーザーに重要な情報や警告を伝え、ユーザーの注意を引くためにモーダル(Modal)形式で表示されます。ユーザーは該当ダイアログへの応答を待つまで、他の操作を行うことができません。
role="dialog" ダイアログ(Dialog)を表します。この役割を持つ要素は、ユーザーと対話して情報を求めたり、追加の選択肢を提供したりする役割を果たします。ダイアログはモーダルまたはモーダルレスの形式であり、ユーザーの注意を該当ダイアログに集中させます。

role属性を使用する際に考慮すべきいくつかのポイントがあります。

適切な役割の選択

各要素に最も適した役割を選択する必要があります。WAI-ARIA仕様で提供されている役割の中から、最も意味に合った役割を選んで要素に適用しなければなりません。

誤用と乱用の防止

role属性はアクセシビリティを向上させるためのツールですが、誤用や乱用してはいけません。要素自体がすでに該当する役割を持っている場合や、HTML要素だけで十分に意味を伝えられる場合は、role属性を使用すべきではありません。例を挙げて説明します。

HTML role="region"は<section>要素と同じ意味で使用されるため、重複した不要なマークアップです。 
<section role="region">
    <h2>区画要素section</h2>
    <p>
        HTMLのsection要素は、HTML文書の独立した区画を表す際に使用されます。
    </p>
</section>

標準と互換性の維持

role属性を使用する際にも、HTML標準との互換性を維持する必要があります。role属性はHTML要素の意味や役割を補完する補助的な手段として使用されるべきであり、HTML要素の基本的な動作を無視したり変更したりしてはいけません。

例を見てみましょう。
<button>要素は基本的にユーザーと対話可能なボタンの役割を持っています。そのため、<button>要素を使ってボタンを作成する場合、追加のrole属性を使用する必要はありません。

HTML 
<button type="button" onclick="alert('ボタンがクリックされました。')">クリックしてください。
</button>

上記のコードでは、<button>要素を使ってボタンを生成し、type属性でボタンの動作タイプを指定しています。onclick属性を使用して、ボタンがクリックされたときに実行されるJavaScriptコードを指定しています。このように基本的なHTML要素を使用することで、ボタンの意味と役割が明確に伝わります。

一方、次の例のコードでは、<div>要素にrole="button"属性を追加してボタンの役割を付与しています。

HTML 
<div role="button" tabindex="0" onclick="alert('ボタンがクリックされました。')">クリックしてください。</div>

このコードは、<div>要素にrole="button"属性を使ってボタンの役割を指定しています。しかし、これはHTML標準との互換性の観点から推奨されない方法です。<div>要素は元々意味的な役割を持っておらず、role="button"属性を追加してもその意味や基本動作を変更したり制御したりすることはできません。したがって、HTML要素の意味や役割を補完するためには、<button>要素を使用する方がより適切です。

上記の例のコードから、HTML要素の意味と役割を保持し、HTML標準との互換性を維持することが重要であることがわかります。role属性は既存のHTML要素に追加の意味や役割を付与する補助的な手段として使用されるべきであり、HTML要素の基本的な動作を変更したり無視したりしてはいけません。

注意してください！
role="button"は<div>要素をスクリーンリーダーやその他の支援技術に対してボタンとして認識させます。しかし、ユーザーにボタンの操作機能を提供するわけではありません。ボタンの操作機能を追加するには、tabindex属性やJavaScript、CSSの追加が必要です。

まとめ

  • role属性は、HTML要素の意味や役割を補完するために使用される属性です。
  • role属性を使用することで、ウェブコンテンツのアクセシビリティを向上させることができます。
  • role属性は、障害を持つユーザーがコンテンツを理解し、操作できる方法を提供します。
  • role属性を使用することで、セマンティックなHTML構造を保持しながら、追加の意味や役割を付与することができます。
  • role属性はWAI-ARIA仕様の一部であり、ウェブ標準との互換性を維持する必要があります。
  • 正しい役割の選択、誤用や乱用の防止、標準との互換性の維持などを考慮して、role属性を使用する必要があります。

このようにrole属性を使用することで、ウェブコンテンツのアクセシビリティを向上させ、障害を持つユーザーにより良いユーザー体験を提供することができます。

role属性の仕様書
仕様書
role Accessible Rich Internet Applications (WAI-ARIA)
#WAI-ARIA Roles

参考資料

関連項目