--- title: 'ARIA: dialog ロール' slug: Web/Accessibility/ARIA/Roles/dialog_role tags: - ARIA - Accessibility translation_of: Web/Accessibility/ARIA/Roles/dialog_role ---

ダイアログ (dialog) ロールは、ウェブアプリケーションやウェブページの残りの部分からコンテンツや UI を分離する HTML ベースのアプリケーションのダイアログやウィンドウをマークアップするために使用します。 ダイアログは通常、オーバーレイを使用して残りのページコンテンツの上に配置されます。 ダイアログはノンモーダル (ダイアログ外のコンテンツともやりとり可能) またはモーダル (ダイアログ内のコンテンツのみとやりとり可能) のいずれかになります。

<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">あなたの個人情報が更新されました</h2>
  <p id="dialog1Desc">情報は、ユーザーアカウントのセクションでいつでも変更できます。</p>
  <button>閉じる</button>
</div>

説明

ダイアログ要素をダイアログ (dialog) ロールでマークアップすると、支援技術がダイアログのコンテンツをページコンテンツの残りの部分からグループ化して分離されたものとして識別するのに役立ちます。 ただし、role="dialog" だけを追加するだけでは、ダイアログをアクセス可能にするには不十分です。 さらに、次のことを行う必要があります。

以下のセクションでは、これら2つの要件をどのように満たすことができるかについて説明します。

ラベル付け

ダイアログ自体がフォーカスを受け取れる必要はありませんが、それでもラベルを付ける必要があります。 ダイアログに与えられたラベルは、ダイアログ内のインタラクティブコントロールのコンテキスト情報を提供します。 つまり、ダイアログのラベルは、その内部のコントロールのグループ化ラベルのように機能します (<legend> 要素が <fieldset> 要素内のコントロールのグループ化ラベルを提供する方法と同様です)。

ダイアログにすでに表示されているタイトルバーがある場合、そのバーの中のテキストを使用してダイアログ自体にラベルを付けることができます。 これを達成する最善の方法は、role="dialog" 要素に aria-labelledby 属性を使用することです。 さらに、ダイアログがダイアログタイトル以外に追加の説明テキストを含んでいる場合、このテキストは aria-describedby 属性を使用してダイアログに関連付けることができます。 このアプローチは、次のコードスニペットに示されています。

<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">あなたの個人情報が更新されました</h2>
  <p id="dialog1Desc">情報は、ユーザーアカウントのセクションでいつでも変更できます。</p>
  <button>閉じる</button>
</div>

 

なお、非仮想モードで動作するスクリーンリーダーが認識するために、ダイアログのタイトルと説明のテキストがフォーカス可能である必要はありません。 ARIA のダイアログロールとラベル付けの手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログに移動したときにダイアログの情報をアナウンスするべきです。

 

必要な JavaScript 機能

 

フォーカス管理 

ダイアログには、キーボードフォーカスをどのように管理するべきかについて、次のような特有の要件があります。

関連する ARIA のロール、ステート、プロパティ

aria-labelledby
ダイアログにラベルを付けるには、この属性を使用します。 多くの場合、aria-labelledby 属性の値は、ダイアログのタイトルに使用される要素の id になります。
aria-describedby
この属性を使用して、ダイアログの内容を説明します。

ユーザーエージェントと支援技術への影響

ダイアログ (dialog) ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。

ダイアログが正しくラベル付けされ、フォーカスがダイアログ内の要素 (多くの場合、ボタンなどのインタラクティブな要素) に移動された時、スクリーンリーダーは、フォーカスされた要素をアナウンスするとともに、ダイアログのアクセス可能なロール、名前、および任意で説明をアナウンスするべきです。

注: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があり、アナウンスの順序は使用する支援技術によって異なる場合があります。 上記の情報はこれらの意見の1つであり、したがって規範的ではありません。

例

フォームを含むダイアログ

 <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
   <h2 id="dialog1Title">加入申込書</h2>
   <p id="dialog1Desc">私たちは、この情報を第三者と共有することはありません。</p>
   <form>
     <p>
       <label for="firstName">名</label>
       <input id="firstName" type="text" />
     </p>
     <p>
       <label for="lastName">姓</label>
       <input id="lastName" type="text"/>
     </p>
     <p>
       <label for="interests">興味</label>
       <textarea id="interests"></textarea>
     </p>
     <p>
       <input type="checkbox" id="autoLogin"/>
       <label for="autoLogin">自動ログイン？</label>
     </p>
     <p>
         <input type="submit" value="情報を保存する"/>
     </p>
   </form>
 </div>

動作する例

注

注: キーボードユーザーがダイアログ外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーのユーザーは、スクリーンリーダーの仮想カーソルを使用してそのコンテンツにナビゲートできるかもしれません。 開発者は、モーダルダイアログがアクティブな間、モーダルダイアログ外のコンテンツに全てのユーザーがアクセスできないようにすることが重要です。

仕様

仕様 状態
{{SpecName("ARIA","#dialog","dialog")}} {{Spec2('ARIA')}}

スクリーンリーダーのサポート

近日公開

関連情報