ARIA: dialog ロール

ダイアログ (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 機能

フォーカス管理

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

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

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

ダイアログ (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>

動作する例

jQuery-UI ダイアログ

注

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

仕様

Specification
Accessible Rich Internet Applications (WAI-ARIA) # dialog
ARIA Authoring Practices # dialog_modal

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

近日公開