ARIA: dialog ロール

解説

ダイアログとは、ウェブアプリケーションのメインウィンドウの子ウィンドウのことです。HTML ページの場合、アプリケーションのメインウィンドウはウェブの文書全体、つまり body 要素そのものです。

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

関連する ARIA のロール、状態、プロパティ

aria-labelledby

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

aria-describedby

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

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

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

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

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

例

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

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

メモ

仕様書

関連情報

• ARIA: alertdialog ロール
• The HTML <dialog> element