ARIA: dialog ロール

{{ariaref}}

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>

必要な JavaScript 機能

フォーカス管理 

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

• ダイアログには常に少なくとも1つのフォーカス可能なコントロールを持つべきです。 多くのダイアログでは、[閉じる]、[OK]、[キャンセル]などのボタンがあります。 必要なコントロールに加えて、ダイアログには、フォーム全体やタブのような他のコンテナウィジェットも含め、任意の数のフォーカス可能な要素を含めることができます。
• ダイアログが画面に表示されたら、キーボードのフォーカス（その制御はダイアログの目的に依存する）を、ダイアログ内のデフォルトのフォーカス可能なコントロールに移動するべきです。 基本的なメッセージのみを提供するダイアログでは、[OK] ボタンになります。 フォームを含むダイアログでは、フォームの最初のフィールドになります。
• ダイアログが閉じられた後、キーボードフォーカスは、ダイアログに移動する前の位置に戻すべきです。 それ以外の場合は、フォーカスをページの先頭にドロップすることができます。
• ほとんどのダイアログでは、ダイアログのタブ順序がラップすることが予想されます。 つまり、ユーザーがダイアログ内のフォーカス可能な要素をタブで移動すると、最後のものに達した後、最初のフォーカス可能な要素にフォーカスが移ります。 言い換えれば、タブ順序は、ダイアログ内に含まれている必要があります。
• ダイアログを移動またはサイズ変更できる場合は、マウスユーザーだけでなくキーボードユーザーもこれらの操作を実行できる必要があります。 同様に、ダイアログがツールバーやコンテキストメニューのような特別な機能を提供する場合、これらはキーボードユーザーが到達可能で操作可能でなければなりません。
• ダイアログはモーダルでも非モーダルでもよい。 モーダルダイアログが画面に表示されると、ダイアログの外にあるページコンテンツと対話することはできません。 つまり、モーダルダイアログが表示されている限り、メインアプリケーションの UI またはページコンテンツは一時的に無効になっているとみなされます。 非モーダルダイアログの場合、ダイアログが表示されている間もダイアログの外のコンテンツと対話することは可能です。 非モーダルダイアログでは、開いているダイアログとメインページの間でフォーカスを移動できるグローバルなキーボードショートカットが必要です。 詳細については、モーダルおよび非モーダルダイアログの管理ガイドを参照してください。

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

aria-labelledby

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

aria-describedby

この属性を使用して、ダイアログの内容を記述します。

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

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

• オペレーティングシステムのアクセシビリティ API でダイアログとして要素を公開します。

ダイアログが正しくラベル付けされ、フォーカスがダイアログ内のコントロールに移動されると、スクリーンリーダーは、フォーカスされた要素をアナウンスする前にダイアログのアクセシブルロール、名前、および任意で説明をアナウンスするべきです。

例

例 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>

例 2: フォールバックコンテンツとしての fieldset に基づくダイアログ

ARIA マークアップをサポートしていないブラウザーや AT 製品をサポートするには、フォールバックコンテンツとして fieldset 要素にダイアログマークアップを適用することもできます。 このようにして、ダイアログのタイトルは正しくアナウンスされます。

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

  <button>閉じる</button>
</fieldset>

動作する例

• jQuery-UI ダイアログ

注

仕様

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

近日公開

関連情報

• ARIA: alertdialog ロール
• alertdialog ロールの使用