From adb3289b8c555bc260f6af05c3013fd85f949d37 Mon Sep 17 00:00:00 2001 From: Wind1808 <42607060+Wind1808@users.noreply.github.com> Date: Thu, 6 May 2021 02:36:06 +0900 Subject: ARIA: dialog ロールの更新 (#598) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../aria/roles/dialog_role/index.html | 77 ++++++++++------------ 1 file changed, 33 insertions(+), 44 deletions(-) (limited to 'files/ja/web/accessibility/aria') diff --git a/files/ja/web/accessibility/aria/roles/dialog_role/index.html b/files/ja/web/accessibility/aria/roles/dialog_role/index.html index 283e1d5042..a0a8fc3684 100644 --- a/files/ja/web/accessibility/aria/roles/dialog_role/index.html +++ b/files/ja/web/accessibility/aria/roles/dialog_role/index.html @@ -6,42 +6,40 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/Roles/dialog_role --- -

\{{ariaref}}

- -

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

+

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

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

説明

-

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

+

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

-

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

+

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

-

ラベリング

+

ラベル付け

-

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

+

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

-

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

+

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

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

 

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

 

@@ -51,41 +49,41 @@ translation_of: Web/Accessibility/ARIA/Roles/dialog_role

フォーカス管理 

-

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

+

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

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

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

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

-

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

+

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

-

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

+

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

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

例

-

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

+

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

 <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
    <h2 id="dialog1Title">加入申込書</h2>
@@ -105,7 +103,7 @@ translation_of: Web/Accessibility/ARIA/Roles/dialog_role
      </p>
      <p>
        <input type="checkbox" id="autoLogin"/>
-       <label for="autoLogin">自動ログイン</label>
+       <label for="autoLogin">自動ログイン？</label>
      </p>
      <p>
          <input type="submit" value="情報を保存する"/>
@@ -113,31 +111,15 @@ translation_of: Web/Accessibility/ARIA/Roles/dialog_role
    </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>
-

動作する例

注

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

仕様

@@ -162,5 +144,12 @@ translation_of: Web/Accessibility/ARIA/Roles/dialog_role + + + -- cgit v1.2.3-54-g00ecf