From 784a0f3de1a56e4748e2945e2e24ef44ffc91c20 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:31 +0000 Subject: [PATCH 01/18] Translate aria.html via GitLocalize --- publishing/ja/script/aria.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 publishing/ja/script/aria.html diff --git a/publishing/ja/script/aria.html b/publishing/ja/script/aria.html new file mode 100644 index 00000000..5e6a3b20 --- /dev/null +++ b/publishing/ja/script/aria.html @@ -0,0 +1,15 @@ + + + + + ARIA + + + + + +
+

このページはcontrols.htmlに移動しました。

+
+ + From ab1fc47d6d010cc13144df1f1234d48a3e92e92e Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:34 +0000 Subject: [PATCH 02/18] Translate autocomplete.html via GitLocalize --- publishing/ja/script/autocomplete.html | 102 +++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 publishing/ja/script/autocomplete.html diff --git a/publishing/ja/script/autocomplete.html b/publishing/ja/script/autocomplete.html new file mode 100644 index 00000000..540d46be --- /dev/null +++ b/publishing/ja/script/autocomplete.html @@ -0,0 +1,102 @@ + + + + + オートコンプリート + + + + + + +
+
+

要約

+ +

Setting the HTML autocomplete attribute on form fields simplifies the comprehension and completion of these fields for users with cognitive and physical disabilities.

+
+ +
+

テクニック

+ +
    +
  • プリセット値のいずれかに一致するフォームフィールドにautocomplete属性を追加します。[[WCAG-1.3.5]]
    • +
+
+ +
+

例

+ +
+
+
例 1 — 電話番号のオートコンプリート
+

次の例では、電話番号を入力するための三つのフィールド（市外局番用一つと市内番号用一つずつ) を示しています。各フィールドの目的は、 autocomplete属性から識別できます。

+
+ 
<fieldset
+   <label>Telephone:</label>
+   (<input type="text" autocomplete="tel-area-code" id="area-code" aria-label="Area code"/>)
+   <input type="text" autocomplete="tel-local-prefix" id="local-prefix" aria-label="Local number prefix"/> -
+   <input type="text" autocomplete="tel-local-suffix" id="local-suffix" aria-label="Local number suffix"/>
+</fieldset>
+
+ +
+
+
例 2 — 生年月日のオートコンプリート
+
+ 
<fieldset
+   <label>Birth Date:</label>
+   <select autocomplete="bday-year" id="birth-year" aria-label="Year">
+   	…
+   </select>
+   <select autocomplete="bday-month" id="birth-month" aria-label="Month">
+   	…
+   </select>
+   <select autocomplete="bday-day" id="birth-day" aria-label="Day">
+   	…
+   </select>
+</fieldset>
+
+
+ +
+

よくある質問

+ +
+
入力ラベルでは不十分なのはなぜですか?
+
+

同じ情報に対する入力ラベルはサイトや言語によって異なるため、機械処理では信頼できません。 autocompleteの制御キーワードにより、ユーザーエージェントと支援技術は言語やスペルの特殊性を解析することなく目的を判断できます。

+
+
+
+ +
+

解説

+ +

リーディングシステムではウェブブラウザほど一般的ではありませんが、個人情報を保存しておくと、ユーザーが次回同じフィールドに遭遇したときにユーザーエージェントが自動的にその情報を入力できるようになります。出版物では、教育プログラムのコンテキストで、または出版社からの更新情報を受け取るためにサインアップする際に、この種の情報を求めることがあります。

+ +

To provide this functionality, the user agent needs to understand the information the user inputs as well as when it is relevant to use again. The autocomplete attribute is the key to this machine understanding. It allows authors to assign a precise machine-readable semantic to form fields so that the user agent understands where what information goes in what field.

+ +

属性のHTML定義には、使用できるセマンティクスのリストが含まれています。セマンティクスには、名前、住所、生年月日、電話番号などの情報が含まれます。WCAGドキュメントには、値の要約リストも記載されています。

+ +

autocomplete属性を使用すると、個人情報の入力を求められるたびに同じ情報を何度も再入力する必要がなくなるため、認知障害や身体障害を持つユーザーにとってフォームの入力がしやすくなります。

+ +

これらのセマンティクスを使用すると、ユーザーエージェントは他の方法でも理解を強化できます。たとえば、標準的な視覚的なヒント（電話や誕生日ケーキなどのアイコン）を追加して、各フィールドの目的をユーザーがさらに理解しやすいようにできます。

+
+ +
+

関連リンク

+ + +
+
+ + From e56cbcc70c61920c9622b685c3a9462e43523ee7 Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:35 +0000 Subject: [PATCH 03/18] Translate autocomplete.html via GitLocalize --- publishing/ja/script/autocomplete.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/publishing/ja/script/autocomplete.html b/publishing/ja/script/autocomplete.html index 540d46be..f904c25d 100644 --- a/publishing/ja/script/autocomplete.html +++ b/publishing/ja/script/autocomplete.html @@ -18,7 +18,7 @@

要約

-

Setting the HTML autocomplete attribute on form fields simplifies the comprehension and completion of these fields for users with cognitive and physical disabilities.

+

フォームフィールドにHTMLのautocomplete属性を設定すると、認知障害や身体障害を持つユーザーがこれらのフィールドを理解したり入力する作業が容易になります。

@@ -80,7 +80,7 @@

解説

リーディングシステムではウェブブラウザほど一般的ではありませんが、個人情報を保存しておくと、ユーザーが次回同じフィールドに遭遇したときにユーザーエージェントが自動的にその情報を入力できるようになります。出版物では、教育プログラムのコンテキストで、または出版社からの更新情報を受け取るためにサインアップする際に、この種の情報を求めることがあります。

-

To provide this functionality, the user agent needs to understand the information the user inputs as well as when it is relevant to use again. The autocomplete attribute is the key to this machine understanding. It allows authors to assign a precise machine-readable semantic to form fields so that the user agent understands where what information goes in what field.

+

この機能を提供するには、ユーザーエージェントはユーザーが入力した情報と、その情報を再度使用することが適切であるかを判定する必要があります。autocomplete属性は、この機械による判定の鍵となります。これにより、コンテンツ製作者はフォームフィールドに正確な機械可読セマンティクスを割り当てることができ、ユーザー エージェントはどのフィールドにどの情報を入力するべきかを判定できます。

属性のHTML定義には、使用できるセマンティクスのリストが含まれています。セマンティクスには、名前、住所、生年月日、電話番号などの情報が含まれます。WCAGドキュメントには、値の要約リストも記載されています。

From b411049767f5707d4cf6a04105bcb37d19feee65 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:37 +0000 Subject: [PATCH 04/18] Translate index.html via GitLocalize --- publishing/ja/script/index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 publishing/ja/script/index.html diff --git a/publishing/ja/script/index.html b/publishing/ja/script/index.html new file mode 100644 index 00000000..13fdb8b0 --- /dev/null +++ b/publishing/ja/script/index.html @@ -0,0 +1,22 @@ + + + + + スクリプトとフォーム（Scripted Content and Forms） + + + + + + + +
+
+ + From 7f5538dad26b2db6d9b6fc426e468ce8152099d0 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:39 +0000 Subject: [PATCH 05/18] Translate controls.html via GitLocalize --- publishing/ja/script/controls.html | 222 +++++++++++++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 publishing/ja/script/controls.html diff --git a/publishing/ja/script/controls.html b/publishing/ja/script/controls.html new file mode 100644 index 00000000..a6c8c28d --- /dev/null +++ b/publishing/ja/script/controls.html @@ -0,0 +1,222 @@ + + + + + カスタムコントロール + + + + + + + +
+
+

要約

+

支援技術のユーザーにカスタムコントロールをアクセシブルにするには、ARIAのrole（役割）、state（状態）、property（プロパティ）を使用する必要があります。

+
+
+

テクニック

+
    +
  • +

    Enable interaction using roles, states and properties. [[WCAG-4.1.2]]

    +
    • +
  • +

    ARIAのrole（役割）、state（状態）、property（プロパティ）が指定された要素に対して有効であることを確認します。[[WCAG-4.1.1]]

    +
    • +
  • +

    すべての親/子の役割の要件が満たされていることを確認します。[[WCAG-4.1.1]]

    +
    • +
  • +

    コントロールがフォーカスされただけではイベントを起動しないでください。[[WCAG-3.2.1]]

    +
    • +
  • +

    Do trigger unexpected events when a user inputs values or changes settings. [[WCAG-3.2.1]]

    +
    • +
+
+
+

例

+
+
+
例 1 — カスタムボタンの識別
+

img要素にはbuttonのrole（役割）があり、支援技術に対して画像ではなくボタンとして識別されます。

+
+ 
<img src="controls/start.png"
+    id="start"
+    role="button"
+    tabindex="0"
+    alt="Start"/>
+
+
+
+
例 2 — JavaScript を使用してstate（状態）を管理する
+

次の簡単な例は、カスタム コントロールを作成するときに注意しなければならない考慮事項の一部を示しています。コールバック関数の設定と設定解除、コントロールの有効化と無効化、ボタンの外観の変更などです。この画像をキーボードで動作させるには、ユーザーのキー押下を確認してから、アクションをオン/オフしなければなりません。

+
+ 
<img src="controls/play.png"
+    id="start"
+    alt="Start"
+    role="button"
+    aria-disabled="false"
+    tabindex="0"
+    onclick="controlPlayback('start')"/>
+
+<img src="controls/stop.png"
+    id="stop"
+    alt="Stop"
+    role="button"
+    aria-disabled="true"
+    tabindex="0"/>
+
+<script>
+<![CDATA[
+function controlPlayback(action) {
+
+  var isStart = (action == 'start') ? true : false;
+  
+  var start_image = isStart ? 
+           'controls/play-disabled.png' : 
+           'controls/play.png';
+  
+  var stop_image = isStart ? 
+           'controls/stop.png' : 
+           'controls/stop-disabled.png';
+  
+  var start = document.getElementById('start');
+    start.setAttribute('aria-disabled', 
+              !start.getAttribute('aria-disabled'));
+    start.setAttribute('disabled', 
+              !start.getAttribute('disabled'));
+    start.onclick = isStart ? 
+            null : 
+            function () { controlPlayback('start'); };
+    start.setAttribute('src', start_image);
+  
+  var stop = document.getElementById('stop');
+    stop.setAttribute('aria-disabled', 
+              !stop.getAttribute('aria-disabled'));
+    stop.setAttribute('disabled', 
+              !stop.getAttribute('disabled'));
+    stop.onclick = isStart ? 
+            function () { controlPlayback('stop'); } : 
+            null;
+    stop.setAttribute('src', stop_image);
+   
+   if (isStart) {
+    start.removeAttribute('onkeypress');
+    stop.setAttribute('onkeypress', "if (event.keyCode==32||event.keyCode==13) { controlPlayback('stop'); }");
+   }
+   
+   else {
+    stop.removeAttribute('onkeypress');
+    start.setAttribute('onkeypress', "if (event.keyCode==32||event.keyCode==13) { controlPlayback('start'); }");
+   }
+  
+  alert(isStart ? 'Playback started!' : 'Playback stopped!');
+}
+]]>
+</script>
+

次のボタンは、このコードの動作を示しています。

+
+ 開始 + 停止 +
+ +
+
+
+

解説

+

Although HTML provides a number of native controls (e.g., input, button, progress), developers often have to create their own equivalents to avoid the styling limitations or introduce specialized functionality.

+

The creation of custom controls can cause seriously accessibility issues, however, as the reliance on JavaScript to make the functionality work does not translate to assistive technologies by default. For one, when non-interactive elements like spans of text and images are made dynamic, assistive technologies will not be aware that the user can activate them. As well, as actions occur, the changes to the content are not reflected in the accssibility tree (i.e., the new content will not be available).

+

These scripting accessibility problems plagued early development on the web, but the introduction of ARIA roles, states and properties has helped mitigate many of the problems. Adding these attributes to custom controls makes assistive technologies of their presence and allows information about the current state of the control to flow through to users.

+

次のリストでは、各属性タイプの目的について説明します。

+
+
Roles
+
+

ARIA role属性は、カスタムコントロールの機能を説明するために使用されます（たとえば、画像がボタンのように機能することを示すなど）。

+

カスタムコントロールには、その目的を支援技術に通知するためのrole（役割）が必要です。これにより、支援技術は、予想される使用方法に応じて要素をユーザーに提示できます。

+

現在サポートされているroleのリストについては、ARIA仕様をご覧ください。

+
+
States
+
+

state属性は、コントロールの現在の状態（現在チェックされているかどうか、非表示になっているかどうかなど）を識別します。

+

ユーザーがコントロールやコンテンツと対話するときに、State属性がスクリプトによって維持されなければなりません。そうしないと、ユーザーが機能を使用できなくなる可能性があります（たとえば、音量を下げることができない、重要なコンテンツを表示できないなど）。

+

現在サポートされているstateのリストについては、ARIA仕様をご覧ください。

+
+
Properties
+
+

プロパティ属性は、コントロールが許可する最小値や最大値、グループ内での位置など、コントロールに関するメタ情報を識別します。

+

stateとは異なり、プロパティは通常、コンテンツが読み込まれるときに一回だけ設定されます。

+

現在サポートされているプロパティのリストについては、ARIA仕様をご覧ください。

+
+
+ +

There is more to making custom controls accessible than just assuring that the correct roles, states and properties are applied, of course. Authors also need to make sure that they do not trigger unexpected changes in context, for example, when focus or input is received by the control.

+
+
+

関連リンク

+ +
+
+ + From 2d5aed83d2184ea387b9f70bcc554dfd4621999d Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:40 +0000 Subject: [PATCH 06/18] Translate controls.html via GitLocalize --- publishing/ja/script/controls.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/publishing/ja/script/controls.html b/publishing/ja/script/controls.html index a6c8c28d..47a9a81c 100644 --- a/publishing/ja/script/controls.html +++ b/publishing/ja/script/controls.html @@ -35,7 +35,7 @@

要約

テクニック

  • -

    Enable interaction using roles, states and properties. [[WCAG-4.1.2]]

    +

    role（役割）、state（状態）、property（プロパティ）を使用してインタラクションを行えるようにします。[[WCAG-4.1.2]]

  • ARIAのrole（役割）、state（状態）、property（プロパティ）が指定された要素に対して有効であることを確認します。[[WCAG-4.1.1]]

    @@ -47,7 +47,7 @@

    テクニック

    コントロールがフォーカスされただけではイベントを起動しないでください。[[WCAG-3.2.1]]

  • -

    Do trigger unexpected events when a user inputs values or changes settings. [[WCAG-3.2.1]]

    +

    予期しないイベント起動は、ユーザーが値を入力したり設定を変更した際に行います。[[WCAG-3.2.1]]

@@ -177,24 +177,24 @@

例

解説

-

Although HTML provides a number of native controls (e.g., input, button, progress), developers often have to create their own equivalents to avoid the styling limitations or introduce specialized functionality.

-

The creation of custom controls can cause seriously accessibility issues, however, as the reliance on JavaScript to make the functionality work does not translate to assistive technologies by default. For one, when non-interactive elements like spans of text and images are made dynamic, assistive technologies will not be aware that the user can activate them. As well, as actions occur, the changes to the content are not reflected in the accssibility tree (i.e., the new content will not be available).

-

These scripting accessibility problems plagued early development on the web, but the introduction of ARIA roles, states and properties has helped mitigate many of the problems. Adding these attributes to custom controls makes assistive technologies of their presence and allows information about the current state of the control to flow through to users.

+

HTMLには数多くのネイティブコントロール（例：input 、 button 、 progress）が用意されていますが、開発者は、多くの場合に、スタイル制限の回避や特殊な機能の導入のために、同等のコントロールを独自に作成しなければなりません。

+

カスタムコントロールを作成すると、機能を動作させるためのJavaScriptがデフォルトでは支援技術に反映されないために、深刻なアクセシビリティの問題が発生しかねません。たとえば、テキストや画像の範囲などの非インタラクティブ要素が動的に作成されると、支援技術を通じると、それらをアクティブ化できることを認識できません。また、アクションが発生しても、コンテンツの変更はアクセシビリティツリーに反映されません（つまり、新しいコンテンツは利用できません）。

+

こうしたスクリプトにおけるアクセシビリティの問題は、Webの開発初期に問題となっていましたが、ARIAのrole（役割）、state（状態）、property（プロパティ）の導入により、多くの問題が軽減されました。カスタムコントロールにこれらの属性を追加すると、支援技術を通じてその存在が認識され、コントロールの現在の状態に関する情報がユーザーに伝わるようになります。

次のリストでは、各属性タイプの目的について説明します。

-
Roles
+
役割（Role）

ARIA role属性は、カスタムコントロールの機能を説明するために使用されます（たとえば、画像がボタンのように機能することを示すなど）。

カスタムコントロールには、その目的を支援技術に通知するためのrole（役割）が必要です。これにより、支援技術は、予想される使用方法に応じて要素をユーザーに提示できます。

現在サポートされているroleのリストについては、ARIA仕様をご覧ください。

-
States
+
状態（State）

state属性は、コントロールの現在の状態（現在チェックされているかどうか、非表示になっているかどうかなど）を識別します。

ユーザーがコントロールやコンテンツと対話するときに、State属性がスクリプトによって維持されなければなりません。そうしないと、ユーザーが機能を使用できなくなる可能性があります（たとえば、音量を下げることができない、重要なコンテンツを表示できないなど）。

現在サポートされているstateのリストについては、ARIA仕様をご覧ください。

-
Properties
+
プロパティ（Property）

プロパティ属性は、コントロールが許可する最小値や最大値、グループ内での位置など、コントロールに関するメタ情報を識別します。

stateとは異なり、プロパティは通常、コンテンツが読み込まれるときに一回だけ設定されます。

@@ -202,7 +202,7 @@

解説

-

There is more to making custom controls accessible than just assuring that the correct roles, states and properties are applied, of course. Authors also need to make sure that they do not trigger unexpected changes in context, for example, when focus or input is received by the control.

+

もちろん、カスタムコントロールをアクセシブルにするには、正しい役割（role）、状態（state）、プロパティ（property）が適用されているのを確認するだけでは不十分です。コンテンツ製作者は、コントロールがフォーカスや入力を受け取ったときなどに、コンテキスト内で予期しない変更がトリガーされないようにする必要があります。

関連リンク

From 908f0842c7447b7b45fcfbe7b9e613e62c4ad6d8 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:42 +0000 Subject: [PATCH 07/18] Translate input-validation.html via GitLocalize --- publishing/ja/script/input-validation.html | 293 +++++++++++++++++++++ 1 file changed, 293 insertions(+) create mode 100644 publishing/ja/script/input-validation.html diff --git a/publishing/ja/script/input-validation.html b/publishing/ja/script/input-validation.html new file mode 100644 index 00000000..c981e2fb --- /dev/null +++ b/publishing/ja/script/input-validation.html @@ -0,0 +1,293 @@ + + + + + 入力チェック + + + + + + +
+
+

要約

+ +

Thoroughly validate form data and allow users to review their submissions to ensure they do not submit unintended data.

+
+ +
+

テクニック

+ +
    +
  • +

    フィールドへの入力を簡素化するために、 autocomplete属性を使用します。[[WCAG-1.3.5]]

    +
    • +
  • +

    入力エラーを識別し、説明します。[[WCAG-3.3.1]]

    +
    • +
  • +

    入力エラーを修正する方法を提案します。[[WCAG-3.3.3]]

    +
    • +
  • +

    送信前にユーザーがデータを確認し修正できるようにします。[[WCAG-3.3.4]] および [[WCAG-3.3.6]]

    +
    • +
  • +

    ユーザーがデータの送信を取り消せるようにします。[[WCAG-3.3.4]] および [[WCAG-3.3.6]]

    +
    • +
+
+ +
+

解説

+ +

Filling out forms presents several challenges for users, from ensuring they have specified all required fields to ensuring all fields have been filled in correctly. When fields are missed or errors occur, it is not always easy for users with disabilities to locate the problems or determine what needs to be fixed.

+ +
+

検証するタイミング

+ +

When user input is used solely by a digital publication, data validation occurs on the page that is requesting the data.

+ +

It is only when the author attempts to send data to an external web application that server-side validation may occur. But in these cases, the author will most likely use a scripting API like XmlHttpRequest and report errors without refreshing the page. Forms typically cannot be directly submitted to a web server without spawning a new window, as the return page will not be recognized as a resource of the publication.

+ +

This document consequently only reviews methods for validating and reporting errors from within a digital publication. For more information about handling errors in a page returned from a web application, see the Web Accessibility Tutorial on User Notifications.

+
+ +
+

組み込みチェック

+ +

入力を検証するための最良のオプションは、HTMLに組み込まれているメカニズムを使用することです。

+ +

たとえば、 required属性は、ほとんどのフォーム入力要素で使用できます。これは、ユーザーが入力しなければならないフィールドを識別するためのプログラム的な手段です（目の見えるユーザーには、視覚的な手がかりも必要です）。

+ +
+
+

例 — 必須フィールドの識別

+
+ 
<select
+    name="birth-month"
+    required="required">
+   <option value="">Month</option>
+   …
+</select>
+
+ +

required属性が設定されている場合、ユーザーは、フィールドが入力されるまで、対応したリーディングシステムでフォームを送信できません。送信しようとすると、リーディングシステムから、必須情報が不足していることが警告されます。

+ +

pattern属性を使用すると、コンテンツ製作者は入力を検証するための正規表現を指定できます。この属性は、入力が特定の形式に一致しなければならない場合に便利です。

+ +
+
+

例 — 括弧内のカンマで区切られた二つの数字のパターンマッチング

+
+ 
<input
+    type="text"
+    pattern="([0-9]{1,4}, *[0-9]{1,4})"
+    … />
+
+ +

Authors can also use the placeholder attribute to provide a hint to the expected value, which is especially useful when specific patterns are expected. Note, however, that this value disappears once the user begins to input their data, so it should not be used in place of a proper label or description for the field.

+ +
+
+

例 — 予想される入力のヒント

+
+ 
<input
+    type="text"
+    placeholder="(#,#)"
+    pattern="([0-9]{1,4}, *[0-9]{1,4})"
+    aria-label="Starting coordinate"
+    … />
+
+ +

autocomplete属性は、ユーザーが正しい情報を入力できるようにするためのもう一つの潜在的な簡易手段です。この属性を設定すると、ユーザーは保存されたフォームデータを自動的に挿入できます。

+ +
+
+

例 - オートコンプリートフィールドの識別

+
+ 
<input
+    type="text"
+    autocomplete="given-name"
+    … />
+
+ +

出版物におけるこの属性の欠点は、ほとんどのフォームがユーザー情報を収集しないこと、一般的にテスト用であること、さらにアプリケーションベースのリーディングシステムが以前に送信されたデータを再利用のために保存しないことです。この属性は、限られた情報に対してブラウザーで実行されるリーディングシステムでのみ機能する可能性があります。

+ +

最小と最大の値や、入力する文字数の最小値と最大値を指定する属性、また、正規表現を使用してユーザーが入力したテキストを検証する属性もあります。

+ +
+
+

例 - 最小値と最大値の指定

+
+ 
<input
+    type="range"
+    min="1"
+    max="100"
+    … />
+
+ +

input要素のtype属性は検証では見落とされがちですが、これによりコンテンツ製作者は入力するのが電話番号や電子メールアドレスなどの一般的なフィールドであることを識別できます。

+ +
+
+

例 — メール入力フィールド

+
+ 
<input
+    type="email"
+    … />
+
+ +

これらの特殊な入力タイプには、独自の組み込み検証がよくあります。たとえば、電子メールフィールドが指定されている場合、ユーザーエージェントはユーザーが有効な電子メールアドレスを入力したかどうかを確認します。これらの組み込みタイプを使用すると、一般的なテキスト入力フィールドに対して複雑で冗長なパターンチェックを記述する必要がなくなります。

+
+ +
+

入力エラーの特定

+ +

Although using the built-in validation mechanisms allows reading systems to handle informing users when there are errors, it is not possible to use these mechanisms for all data validation. When validating custom data fields, it is necessary to make the process of finding and fixing the errors as easy as possible for users.

+ +

手動検証の一般的なアプローチは、見えやすく明確にラベル付けされた、フォームの上部にあるボックスに、入力エラーのリストを書き込むことです。この手法は一般的には問題ありませんが、支援技術を使用するユーザーを支援するために、エラーを含む要素は、ARIA ロールのalertを使用してライブ領域としてマークする必要があります。これにより、要素に新しいテキストが書き込まれたときにそれをアナウンスできます。

+ +
+
+

例 — ライブ領域の作成

+
+ 
<div
+    role="alert"
+    aria-labelledby="errors">
+    <h6 id="errors">
+       Errors Processing Form
+    </h6>
+    <p>The following items did not validate:</p>
+    <ul>
+       …
+    </ul>
+ </div>
+
+ +

JavaScript alert boxes should be avoided as the sole means for listing errors, as once the dialog is closed the user typically loses access to the list. For users with cognitive and learning disabilities, remembering multiple fields that need to be corrected can be difficult.

+ +

より良い方法は、アラートは、送信内容に修正が必要なエラーが含まれていることをユーザーに通知するためだけに制限し、ダイアログが閉じたときにページ上のリストにユーザーを誘導する方法です。

+ +

エラーをリストするときに、無効なフィールドへのリンクを提供すると役立ちます。

+ +
+
+

例 — 無効なフィールドへのリンク

+
+ 
<p>The following items did not validate:</p>
+<ul>
+   <li><a href="#postcode">Invalid postal
+      code entered</a></li>
+   …
+</ul>
+
+ +

デジタル出版物の場合は、ユーザー入力を入力時に検証する方がよい選択肢となる場合が多いです。これにより、エラーの動的なリストを追加および削除する必要がなくなります。

+ +

While invalid fields should, of course, be visually identified so that visual users can locate them as they review the data, ARIA includes the aria-invalid attribute for programmatically marking the invalid fields.

+ +
+
+

例 — ARIAを使用してエラーを識別する

+
+ 
<input
+    id="address"
+    name="address"
+    type="text"
+    required=""
+    aria-invalid="true"/>
+
+
+ +

Setting the aria-invalid attribute allows assistive technologies to easily move users to the fields that are in error so they are not reliant on a list of errors or having to manually traverse every field in the form to find out what failed.

+ +

When users fix the errors, make sure to update or remove the aria-invalid attribute. (Be aware that setting aria-invalid="" means that the field is not invalid.)

+
+ +
+

エラーの説明

+ +

エラーの特定に加えて、フィールドが無効とマークされている理由の説明もユーザーには役立ちます。ARIA aria-errormessageを使用すると、コンテンツ製作者は問題の説明を無効なフィールドにリンクできます。

+ +
+
+

例 - ARIAを使用してエラーメッセージを識別する

+
+ 
<div id="postcode" class="error">
+   <label for="address">
+      Postal Code:
+   </label>
+   <input
+       id="address"
+       name="address"
+       type="text"
+       required=""
+       error-invalid="true"
+       aria-errormessage="post-err"/>
+   <span id="post-err"
+       aria-live="alert">
+      Postal code must be of the
+      form A1A 1A1.
+   </span>
+</div>
+
+ +

aria-errormessageは、aria-describedbyと機能が似ていますが、添付された説明が問題の説明であることをより明確に示します（aria-errormessageは、 aria-invalidのある要素でのみ使用できる点に注意してください）。

+ +

The aria-live attribute can also be set on the error message so that it gets announced to users when it is added (see the preceding example). If individual error fields are identified this way, it is not recommended to also alert users when adding a full list of issues (i.e., it will cause users to hear all the errors twice).

+ +

場合によっては、入力したデータが無効であることだけをユーザーに伝えることもできますが、データが無効である具体的な理由が特定できる場合は、エラーメッセージにできるだけ正確な内容を含めることをお勧めします。ユーザーに提供する情報が多いほど、エラーを修正しやすくなります。

+
+ +
+

提出内容の確認

+ +

フォームデータがコンテンツ製作者の期待どおりに検証されることと、ユーザーが意図した情報を入力することは、別です。たとえば、ユーザーは情報を入力するときにタイプミスに気付かない場合や、気付かないうちにフィールドが誤って変更される場合があります（たとえば、矢印キーを押すと、選択ボックスやラジオボタンの選択が誤って変更される場合があります）。

+ +

フォームデータを送信する前に確認するオプションをユーザーに提供することは、情報がユーザーの期待と一致していることを確認するのに役立ちます。特に、入力用のフォームデータを詳細に確認することは、すべてのユーザーにとって難しいことがあります。

+ +

確認を提供することはテストデータのレベルAAの要件であるため、教育出版社は、デジタルに埋め込むテストやクイズにこの達成基準が適用される場合、ユーザーのためにデータを修正するか、元に戻して再送信できるようにする必要があります。これについては次のセクションで説明します。

+ +

ただし、デジタル出版物内でこの種の独立した検証を提供することは、多くの場合困難です。これは、フォームと同じページに情報を動的に書き込む必要があり、すべてのリーディングシステムがこれを適切にサポートしているわけではないためです。同様に、JavaScriptアラートを使用すると、非常に小さなデータセットでは機能するかもしれませんが、大量のデータを送信するとすぐに読みにくくなります。

+ +

If the author knows users will be able to submit a form directly to their server (i.e., the reading system will open a new browser window to submit the data rather than send the data through a JavaScript API), a confirmation page could be provided on the server side. This option is generally only available in select cases where the reading systems that users have access to is limited.

+ +
+

注記

+

デジタル出版物内にのみ残るデータは、外部ソースに送信されるデータよりもレビューの重要性が低いことがよくあります。これは、間違いによってユーザーに生じる潜在的な損害がそれほど大きくない傾向があるためです。たとえば、デジタル出版物内で採点された模擬試験をレビューすることは、学校のサーバーに送信されたコースの演習をレビューすることよりも重要性が低くなります。

+
+
+ +
+

提出を元に戻す

+ +

前のセクションで述べたように、元に戻したり修正したりするオプションを提供するよりも、送信前にユーザーがデータを確認できるようにする方がはるかに優れています。

+ +

This is especially true with digital publications, as the means of retrieving and fixing data are complicated by the restrictions of the format. Persisting information within a digital publication is not easy, for example, as storage options are limited (i.e., users cannot easily come back later to undo a form submission if they close the publication). Similarly, network issues can lead to data being submitted but the publication not receiving confirmation of submission, preventing users from undoing.

+ +

ユーザーが提出を取り消すことを許可する必要がある場合、コンテンツ製作者は情報収集のための他のオプションを真剣に検討する必要があります。たとえば、可能な場合は、フォームを埋め込むのではなく、出版物の外部にあるフォームにユーザーを誘導して情報を収集します。

+ +

Reverting and correcting submissions may only be realistically done through an external web site that can confirm the user's identity if submissions must occur through a digital publication. For example, a course portal could provide the option to revert or fix mistakes rather than trying to accomplish this through the publication itself.

+
+
+ +
+

関連リンク

+ + +
+
+ + From f21b9424f8423614b12ed8dd70d4009f39042958 Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:44 +0000 Subject: [PATCH 08/18] Translate input-validation.html via GitLocalize --- publishing/ja/script/input-validation.html | 30 +++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/publishing/ja/script/input-validation.html b/publishing/ja/script/input-validation.html index c981e2fb..154dbc9e 100644 --- a/publishing/ja/script/input-validation.html +++ b/publishing/ja/script/input-validation.html @@ -19,7 +19,7 @@

要約

-

Thoroughly validate form data and allow users to review their submissions to ensure they do not submit unintended data.

+

十分にフォームデータを検証し、ユーザーによって送信内容を確認できるようにし、意図しないデータが送信されないようにします。

@@ -47,16 +47,16 @@

テクニック

解説

-

Filling out forms presents several challenges for users, from ensuring they have specified all required fields to ensuring all fields have been filled in correctly. When fields are missed or errors occur, it is not always easy for users with disabilities to locate the problems or determine what needs to be fixed.

+

フォームへの入力については、必須フィールドをすべて入力したかの確認から、すべてのフィールドに正しく入力されているかの確認まで、ユーザーにとってはいくつもの課題があります。障害を持つユーザーは、フィールドの未入力やエラーが発生した場合に、問題を見つけたり、どこを修正すべきかを把握するのは簡単ではありません。

検証するタイミング

-

When user input is used solely by a digital publication, data validation occurs on the page that is requesting the data.

+

ユーザー入力がデジタル出版物内でのみ行われる場合、データの検証はデータを要求しているページ内で行われます。

-

It is only when the author attempts to send data to an external web application that server-side validation may occur. But in these cases, the author will most likely use a scripting API like XmlHttpRequest and report errors without refreshing the page. Forms typically cannot be directly submitted to a web server without spawning a new window, as the return page will not be recognized as a resource of the publication.

+

サーバー側の検証が行われるのは、コンテンツ製作者が外部のWebアプリケーションにデータを送信するようにした場合です。ただし、このような場合にはコンテンツ製作者はXmlHttpRequestなどのスクリプトAPIを使用し、ページを更新せずにエラーを報告するようにするでしょう。通常、フォームは新しいウィンドウを生成せずにWebサーバーに直接送信することはできません。返されるページが出版物のリソースとして認識されないためです。

-

This document consequently only reviews methods for validating and reporting errors from within a digital publication. For more information about handling errors in a page returned from a web application, see the Web Accessibility Tutorial on User Notifications.

+

したがって、このドキュメントでは、デジタル出版物内からエラーを検証および報告する方法についてのみ扱います。Webアプリケーションから返されるページでのエラーの処理の詳細については、ユーザー通知に関するWebアクセシビリティチュートリアルを参照してください。

@@ -92,7 +92,7 @@

組み込みチェック

… /> -

Authors can also use the placeholder attribute to provide a hint to the expected value, which is especially useful when specific patterns are expected. Note, however, that this value disappears once the user begins to input their data, so it should not be used in place of a proper label or description for the field.

+

コンテンツ製作者は、 placeholder属性を使用して、期待される値のヒントも提供できます。これは、特定のパターンが期待される場合に特に便利です。ただし、この値はユーザーがデータを入力し始めると消えてしまうため、フィールドの適切なラベルや説明の代わりとして使用しないでください。

@@ -150,7 +150,7 @@

組み込みチェック

入力エラーの特定

-

Although using the built-in validation mechanisms allows reading systems to handle informing users when there are errors, it is not possible to use these mechanisms for all data validation. When validating custom data fields, it is necessary to make the process of finding and fixing the errors as easy as possible for users.

+

組み込み検証のメカニズムを使用すると、リーディングシステムはエラーがある場合にユーザーに通知できますが、すべてのデータ検証にこれらのメカニズムを使用することはできません。カスタムデータフィールドを検証する場合、ユーザーにとってエラーを見つけて修正するプロセスを可能な限り容易にする必要があります。

手動検証の一般的なアプローチは、見えやすく明確にラベル付けされた、フォームの上部にあるボックスに、入力エラーのリストを書き込むことです。この手法は一般的には問題ありませんが、支援技術を使用するユーザーを支援するために、エラーを含む要素は、ARIA ロールのalertを使用してライブ領域としてマークする必要があります。これにより、要素に新しいテキストが書き込まれたときにそれをアナウンスできます。

@@ -171,7 +171,7 @@

入力エラーの特定

</div>
-

JavaScript alert boxes should be avoided as the sole means for listing errors, as once the dialog is closed the user typically loses access to the list. For users with cognitive and learning disabilities, remembering multiple fields that need to be corrected can be difficult.

+

エラーをリストする唯一の手段としてJavaScriptアラートボックスを使用するのは避けてください。ダイアログが閉じられると、通常、ユーザーはリストにアクセスできなくなります。認知障害や学習障害のあるユーザーにとって、修正が必要な複数のフィールドを覚えておくのが困難な場合があります。

より良い方法は、アラートは、送信内容に修正が必要なエラーが含まれていることをユーザーに通知するためだけに制限し、ダイアログが閉じたときにページ上のリストにユーザーを誘導する方法です。

@@ -191,7 +191,7 @@

入力エラーの特定

デジタル出版物の場合は、ユーザー入力を入力時に検証する方がよい選択肢となる場合が多いです。これにより、エラーの動的なリストを追加および削除する必要がなくなります。

-

While invalid fields should, of course, be visually identified so that visual users can locate them as they review the data, ARIA includes the aria-invalid attribute for programmatically marking the invalid fields.

+

もちろん、無効なフィールドは視覚的に識別され、目の見えるユーザーがデータを確認する際に見つけられるようにする必要がありますが、ARIAには無効なフィールドをプログラムでマークするためのaria-invalid属性があります。

@@ -206,9 +206,9 @@

入力エラーの特定

-

Setting the aria-invalid attribute allows assistive technologies to easily move users to the fields that are in error so they are not reliant on a list of errors or having to manually traverse every field in the form to find out what failed.

+

aria-invalid属性を設定すると、ユーザーは支援技術によってエラーのあるフィールドに簡単に移動できるため、ユーザーはエラーのリストに依存したり、フォーム内のすべてのフィールドを手動で確認して何が失敗したかを調べる必要がなくなります。

-

When users fix the errors, make sure to update or remove the aria-invalid attribute. (Be aware that setting aria-invalid="" means that the field is not invalid.)

+

ユーザーがエラーを修正したら、必ずaria-invalid属性を更新または削除してください（aria-invalid=""が設定されていると、フィールドが無効ではないことを意味するので注意してください）。

@@ -241,7 +241,7 @@

エラーの説明

aria-errormessageは、aria-describedbyと機能が似ていますが、添付された説明が問題の説明であることをより明確に示します（aria-errormessageは、 aria-invalidのある要素でのみ使用できる点に注意してください）。

-

The aria-live attribute can also be set on the error message so that it gets announced to users when it is added (see the preceding example). If individual error fields are identified this way, it is not recommended to also alert users when adding a full list of issues (i.e., it will cause users to hear all the errors twice).

+

エラーメッセージにaria-live属性を設定して、エラーメッセージが追加されたときにユーザーに通知するようにもできます（前の例を参照）。個々のエラーフィールドがこのように識別される場合には、問題の全リストを追加するときにユーザーに警告するのは推奨しません（ユーザーはすべてのエラーを二回聞くことになるため）。

場合によっては、入力したデータが無効であることだけをユーザーに伝えることもできますが、データが無効である具体的な理由が特定できる場合は、エラーメッセージにできるだけ正確な内容を含めることをお勧めします。ユーザーに提供する情報が多いほど、エラーを修正しやすくなります。

@@ -257,7 +257,7 @@

提出内容の確認

ただし、デジタル出版物内でこの種の独立した検証を提供することは、多くの場合困難です。これは、フォームと同じページに情報を動的に書き込む必要があり、すべてのリーディングシステムがこれを適切にサポートしているわけではないためです。同様に、JavaScriptアラートを使用すると、非常に小さなデータセットでは機能するかもしれませんが、大量のデータを送信するとすぐに読みにくくなります。

-

If the author knows users will be able to submit a form directly to their server (i.e., the reading system will open a new browser window to submit the data rather than send the data through a JavaScript API), a confirmation page could be provided on the server side. This option is generally only available in select cases where the reading systems that users have access to is limited.

+

ユーザーがフォームをサーバーに直接送信できることがコンテンツ製作者に判っている場合（つまり、リーディングシステムが JavaScript API経由でデータを送信するのではなく、新しいブラウザーウィンドウを開いてデータを送信する場合）、確認ページはサーバー側で提供できます。通常この方法は、ユーザーがアクセスできるリーディングシステムが制限されている特定の場合に限り利用できます。

注記

@@ -270,11 +270,11 @@

提出を元に戻す

前のセクションで述べたように、元に戻したり修正したりするオプションを提供するよりも、送信前にユーザーがデータを確認できるようにする方がはるかに優れています。

-

This is especially true with digital publications, as the means of retrieving and fixing data are complicated by the restrictions of the format. Persisting information within a digital publication is not easy, for example, as storage options are limited (i.e., users cannot easily come back later to undo a form submission if they close the publication). Similarly, network issues can lead to data being submitted but the publication not receiving confirmation of submission, preventing users from undoing.

+

これは特にデジタル出版物の場合に当てはまります。フォーマットの制限により、データの取得と修正の手段が複雑になるからです。たとえば、デジタル出版物内で情報を保持するのは、ストレージオプションが限られているため容易ではありません（つまり、出版物を閉じた場合、ユーザーは後でフォームの送信を取り消すために簡単に戻ることができません）。同様に、データが送信された後、ネットワークの問題により出版物側では送信の確認を受信できず、ユーザーが元に戻せない場合があります。

ユーザーが提出を取り消すことを許可する必要がある場合、コンテンツ製作者は情報収集のための他のオプションを真剣に検討する必要があります。たとえば、可能な場合は、フォームを埋め込むのではなく、出版物の外部にあるフォームにユーザーを誘導して情報を収集します。

-

Reverting and correcting submissions may only be realistically done through an external web site that can confirm the user's identity if submissions must occur through a digital publication. For example, a course portal could provide the option to revert or fix mistakes rather than trying to accomplish this through the publication itself.

+

提出をデジタル出版物を通じて行わなければならない場合、提出の取り消しや修正については、ユーザーの身元確認ができる外部Webサイトを通じてのみ行うのが現実的です。たとえば、コースポータルによって、出版物自体を通じて取り消しや間違いの修正を行うのではなく、取り消しや間違いの修正を行う方法を提供できます。

From 2d4c68ecb7693cc0a7babe578161b11d4f7259b1 Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:46 +0000 Subject: [PATCH 09/18] Translate keyboard.html via GitLocalize --- publishing/ja/script/keyboard.html | 86 ++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 publishing/ja/script/keyboard.html diff --git a/publishing/ja/script/keyboard.html b/publishing/ja/script/keyboard.html new file mode 100644 index 00000000..60f9b440 --- /dev/null +++ b/publishing/ja/script/keyboard.html @@ -0,0 +1,86 @@ + + + + + キーボード コントロール + + + + + + +
+
+

Summary

+

Ensure that users can control all functionality via their keyboard.

+
+
+

Techniques

+
    +
  • +

    すべてのコントロールをキーボードから操作できるようにします。[[WCAG-2.1.1]]

    +
    • +
  • +

    すべてのリンクをキーボードから操作できるようにします。[[WCAG-2.1.1]]

    +
    • +
  • +

    Avoid keyboard traps. [[WCAG-2.1.2]]

    +
    • +
  • +

    Avoid keyboard shortcuts that consist of only a single character. [[WCAG-2.1.4]]

    +
    • +
  • +

    アクティブなコントロールのフォーカスを見えるようにします。[[WCAG-2.4.7]]

    +
    • +
  • +

    コントロールにフォーカスが移動しただけではイベントを起動しないようにします。[[WCAG-3.2.1]]

    +
    • +
  • +

    予期できないイベントは、ユーザーによる値の入力や設定変更の時に起動します。[[WCAG-3.2.1]]

    +
    • +
+
+
+

Explanation

+ +

多くのユーザーにとって、コンテンツを操作する主な、または唯一の方法は、キーボードまたはキーボードのような入力デバイス（音声認識ソフトウェア、仮想キーボードなど）を使用することです。これらのユーザーにとって、すべての機能がキーボードで操作できるのは必須事項です。

+ +

The most common cause of keyboard interoperability issues is when authors add custom scripted controls and links to their pages. Using HTML-native elements such as buttons, sliders and hyperlinks generally avoids keyboard input pitfalls. In these cases, authors only need to ensure that the controls are created accessibly — for example, that they are clearly labeled and grouped according to their purpose.

+ +

For custom controls, authors need to ensure that their creations meet all the same requirements as native controls. Some examples include:

+ +
    +
  • that users are able to reach the control;
    • +
  • that the purpose of the control is clear;
    • +
  • コントロールがキーボードで操作できること
    • +
  • that users do not get trapped in the control.
    • +
+ +

カスタムコントロールを作成する際は、ショートカットキーによる出版物の使用に与える影響についての考慮も重要です。目の見える読者にとっては、単一キーの印刷可能な文字（文字、数字、句読点）を操作のショートカットとして割り当てることは便利に思えるかもしれませんが、コマンドを入力しようとする読者の入力が妨害される可能性があります。その結果、ユーザーが必要な機能を完了できなかったり、コンテンツ内で希望しない動作がアクティブ化される可能性があります。コンテンツ製作者は常に、ユーザーが単一文字のショートカットを再設定またはオフにできるようにしなければなりません。

+ +

また、要素にフォーカスが移動した際にコンテキストの変化を引き起こさない点も重要です（ユーザーがタブで要素に移動した時など）。新しいウィンドウを開く、フォームを送信する、コンテンツを変更するなどのコンテキストの変化は、何が起こったのかが見えない読者には混乱を引き起こします。

+ +

同様に、フィールドに入力したり、コントロールの設定を変更した場合も、予期しないコンテキストの変化を発生させてはなりません。

+ +
+

Note

+

The keyboard requirement for Level A conformance excludes functionality where the full path of movement is essential, not just the start and end points. A program that allows a user to drag an object and drop it, for example, is not excluded because the path to the destination does not matter. A drawing program, on the other hand, would be exempt because full path affects the drawn object.

+
+
+
+

Related Links

+ +
+
+ + From 76e38862c503e9fc2f006c3dec3827b3632313f8 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:47 +0000 Subject: [PATCH 10/18] Translate keyboard.html via GitLocalize --- publishing/ja/script/keyboard.html | 32 +++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/publishing/ja/script/keyboard.html b/publishing/ja/script/keyboard.html index 60f9b440..cbac267a 100644 --- a/publishing/ja/script/keyboard.html +++ b/publishing/ja/script/keyboard.html @@ -16,11 +16,11 @@
-

Summary

-

Ensure that users can control all functionality via their keyboard.

+

要約

+

ユーザーがキーボードですべての機能をコントロールできるようにします。

-

Techniques

+

テクニック

  • すべてのコントロールをキーボードから操作できるようにします。[[WCAG-2.1.1]]

    @@ -29,10 +29,10 @@

    Techniques

    すべてのリンクをキーボードから操作できるようにします。[[WCAG-2.1.1]]

  • -

    Avoid keyboard traps. [[WCAG-2.1.2]]

    +

    キーボードトラップがないようにします。[[WCAG-2.1.2]]

  • -

    Avoid keyboard shortcuts that consist of only a single character. [[WCAG-2.1.4]]

    +

    一文字のみで構成されるキーボードショートカットは使用しないようにします。[[WCAG-2.1.4]]

  • アクティブなコントロールのフォーカスを見えるようにします。[[WCAG-2.4.7]]

    @@ -46,19 +46,19 @@

    Techniques

-

Explanation

+

解説

多くのユーザーにとって、コンテンツを操作する主な、または唯一の方法は、キーボードまたはキーボードのような入力デバイス（音声認識ソフトウェア、仮想キーボードなど）を使用することです。これらのユーザーにとって、すべての機能がキーボードで操作できるのは必須事項です。

-

The most common cause of keyboard interoperability issues is when authors add custom scripted controls and links to their pages. Using HTML-native elements such as buttons, sliders and hyperlinks generally avoids keyboard input pitfalls. In these cases, authors only need to ensure that the controls are created accessibly — for example, that they are clearly labeled and grouped according to their purpose.

+

キーボードの相互運用性の問題が発生する最も一般的な原因は、コンテンツ製作者がページにカスタムスクリプトコントロールとリンクを追加した場合です。ボタン、スライダー、ハイパーリンクなどのHTMLネイティブ要素を使用すると、通常、キーボード入力の落とし穴を回避できます。このような場合、コンテンツ製作者はコントロールをアクセシブルに作成するだけで済みます。たとえば、コントロールに明確なラベルを付け、目的に応じてグループ化します。

-

For custom controls, authors need to ensure that their creations meet all the same requirements as native controls. Some examples include:

+

カスタムコントロールを使う場合、コンテンツ製作者は作成したコントロールがネイティブコントロールと同じ要件をすべて満たすようにしなければなりません。次に例を示します。

    -
  • that users are able to reach the control;
    • -
  • that the purpose of the control is clear;
    • +
  • ユーザーがコントロールにアクセスできること
    • +
  • コントロールの目的が明確であること
  • コントロールがキーボードで操作できること
    • -
  • that users do not get trapped in the control.
    • +
  • ユーザーがコントロールに閉じ込められないこと

カスタムコントロールを作成する際は、ショートカットキーによる出版物の使用に与える影響についての考慮も重要です。目の見える読者にとっては、単一キーの印刷可能な文字（文字、数字、句読点）を操作のショートカットとして割り当てることは便利に思えるかもしれませんが、コマンドを入力しようとする読者の入力が妨害される可能性があります。その結果、ユーザーが必要な機能を完了できなかったり、コンテンツ内で希望しない動作がアクティブ化される可能性があります。コンテンツ製作者は常に、ユーザーが単一文字のショートカットを再設定またはオフにできるようにしなければなりません。

@@ -68,16 +68,16 @@

Explanation

同様に、フィールドに入力したり、コントロールの設定を変更した場合も、予期しないコンテキストの変化を発生させてはなりません。

-

Note

-

The keyboard requirement for Level A conformance excludes functionality where the full path of movement is essential, not just the start and end points. A program that allows a user to drag an object and drop it, for example, is not excluded because the path to the destination does not matter. A drawing program, on the other hand, would be exempt because full path affects the drawn object.

+

注記

+

レベルA適合のキーボード要件では、開始点と終了点だけでなく、移動の完全なパスが不可欠な機能は、除外されます。たとえば、ユーザーがオブジェクトをドラッグしてドロップできるプログラムは、移動先へのパスは重要ではないため除外されません。一方、描画プログラムは、完全なパスが描画されたオブジェクトに影響するため、除外されます。

-

Related Links

+

関連リンク

From eb1f9bd4361b413bc055e921b5c09d1ef0053e86 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:49 +0000 Subject: [PATCH 11/18] Translate labels.html via GitLocalize --- publishing/ja/script/labels.html | 218 +++++++++++++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 publishing/ja/script/labels.html diff --git a/publishing/ja/script/labels.html b/publishing/ja/script/labels.html new file mode 100644 index 00000000..1652b700 --- /dev/null +++ b/publishing/ja/script/labels.html @@ -0,0 +1,218 @@ + + + + + ラベル + + + + + + +
+
+

要約

+

Ensure all form inputs and custom controls have labels that clearly describe their purpose.

+
+
+

テクニック

+
    +
  • +

    入力フォームにラベルを付けます。[[WCAG-3.3.2]]

    +
    • +
  • +

    期待される値の説明を提供します。[[WCAG-3.3.2]]

    +
    • +
  • +

    個々のコントロールにラベルを付けます。[[WCAG-4.1.2]]

    +
    • +
  • +

    コントロールのグループにラベルを付けます。[[WCAG-4.1.2]]

    +
    • +
+
+
+

例

+
+
+
例1 — labelの関連付け
+

for属性は、ラベルが記述する要素のIDを参照するために使用されます。 for属性を使用すると、ラベルは要素の前または後のどこにでも付けられます。

+
+ 
<tr>
+   <td>
+      <input type="text" id="name"/>
+   </td>
+   <td>
+      <label for="name">Full name</label>
+   </td>
+</tr>
+
+
+
+
例 2 — labelのラッピング
+

The for attribute is omitted when the label can contain both the input/control and the label.

+
+ 
<label>
+   <input type="text" id="name"/>
+   Full name
+</label>
+
+
+
+
例 3 — グループ化にfieldsetを使用する
+

legend要素で、コントロール／入力のセットのラベルを提供します。

+
+ 
<fieldset>
+   <legend>Accessibility Features</legend>
+   <label>
+      <input type="checkbox" name="a11yFeature"
+         value="alternativeText"/> Alternative text
+   </label>
+   <label>
+      <input type="checkbox" name="a11yFeature"
+         value="longDescription"/> Extended descriptions
+   </label>
+   …
+</fieldset>
+
+
+
+
例 4 — aria-labelledbyを使用して名前を識別する
+

aria-labelledby属性を、生年月日フィールドのセットの最初のinputを参照するために使用します。これらの入力はラベルとして機能します。

+
+ 
<fieldset>
+   <legend>Birth Date</legend>
+   <select id="y" aria-labelledby="yr">
+      <input value="year" id="yr">Year</input>
+      …
+   <select>
+   <select id="m" aria-labelledby="mo">
+      <input value="month" id="mo">Month</input>
+      …
+   <select>
+   <select id="d" aria-labelledby="day">
+      <input value="day" id="day">Day</input>
+      …
+   <select>
+</fieldset>
+
+
+
+
例 5 — マルチパートラベル
+

aria-labelledby属性を、あいまいさを避けるために、アドレスタイプとフィールド名の両方を参照するために使用します。

+
+ 
<table>
+   <tr>
+      <td>
+         <span id="shipping">Shipping Address</span>
+      </td>
+      <td>
+         <span id="billing">Billing Address</span>
+         <label>
+            <input type="checkbox" id="bill-sameas" tabindex="8"/>
+            Use shipping address for billing
+         </label>
+      </td>
+   </tr>
+   <tr>
+      <td>
+         <span class="label" id="str">Street</span>
+         <input type="text" id="ship-street"
+            aria-labelledby="shipping str" tabindex="1"/>
+      </td>
+      <td>
+         <span class="label">Street</span>
+         <input type="text" id="bill-street"
+            aria-labelledby="billing str" tabindex="9"/>
+      </td>
+   </tr>
+   <tr>
+      <td>
+         <span class="label" id="city">City</span>
+         <input type="text" id="ship-city"
+            aria-labelledby="shipping city" tabindex="2"/>
+      </td>
+      <td>
+         <span class="label">City</span>
+         <input type="text" id="bill-city"
+            aria-labelledby="billing city" tabindex="10"/>
+      </td>
+   </tr>
+   …
+</table>
+
+
+
+
例6 — 非表示のラベルを追加する
+

各部分に目に見えるラベルがないため、 aria-label属性を電話番号フィールドの各部分を識別するために使用します。

+
+ 
<fieldset>
+   <legend>Phone Number</legend>
+   <input type="text" id="country" aria-label="country code"/>
+   <input type="text" id="area" aria-label="area code"/>
+   <input type="text" id="local" aria-label="number"/>
+</fieldset>
+
+
+ +
+

解説

+ +

入力フォームとカスタムスクリプトコントロールにアクセシブルな名前を付けることは、ユーザーがその目的を理解できるようにするために不可欠です。ラベルが提供されると、支援技術によって各コントロールの名前が処理され、ユーザーはそれぞれの目的をすぐに理解できるようになります。

+ +

ただし、フォームのレイアウト方法により、ユーザーに入力フィールドの説明ラベルが表示される前にそのフィールドに到達してしまったり、フィールドよりかなり前にラベルが表示されてしまうことはよくあります。ラベルが提供されていない場合は、動的コンテンツを操作したりフォームに入力したりする操作がわかりにくくなることがあります。

+ +

HTMLには、ラベルをコントロールに関連付けるための二つのネイティブ要素が用意されています。

+ +
+
+ label +
+
+

The label element is used to identify the accessible name for an individual control. It can either be wrapped around the control and its label (see Example 1) or a for attribute can be added that references the ID of the control (see Example 1).

+
+
+ fieldset +
+
+

The fieldset element is used to group sets of related controls. A label can then be provided in a child legend element (see Example 3).

+
+
+ +

There are two drawbacks to these native methods: one is that they only accept a single label and the other is that the labels must be a visible part of the page and the text can be capture by the label element. The following ARIA attributes help solve these more complex cases:

+ +
+
+ aria-labelledby +
+
+

The aria-labelledby attribute can be used to reference multiple elements. It is useful when more than one piece of information is necessary to give full context to a control (see Example 5). It can also be used to identify the label when it is not possible to use a label element (see Example 4).

+
+
+ aria-label +
+
+

The aria-label attribute can be used when it is not possible to include a label by any other means (see Example 6). The value of the attribute is the label for the control.

+
+
+
+
+

関連リンク

+ +
+
+ + From 96b662920b9b8fa78181c5ec224bd242c441dc1a Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:51 +0000 Subject: [PATCH 12/18] Translate labels.html via GitLocalize --- publishing/ja/script/labels.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/publishing/ja/script/labels.html b/publishing/ja/script/labels.html index 1652b700..ec87e28a 100644 --- a/publishing/ja/script/labels.html +++ b/publishing/ja/script/labels.html @@ -16,7 +16,7 @@

要約

-

Ensure all form inputs and custom controls have labels that clearly describe their purpose.

+

すべての入力フォームとカスタムコントロールには、その目的を明確に説明するラベルを付けます。

テクニック

@@ -54,7 +54,7 @@

例

例 2 — labelのラッピング
-

The for attribute is omitted when the label can contain both the input/control and the label.

+

labelに、入力／コントロールとラベルの両方を組み込める場合には for属性は省略します。

<label>
    <input type="text" id="name"/>
@@ -173,30 +173,30 @@ 
解説

 						label
 					
 					

-						
The label element is used to identify the accessible name for an individual control. 							It can either be wrapped around the control and its label (see Example 1) or a 								for attribute can be added that references the ID of the control (see Example 1).

+						
label要素は、個々のコントロールのアクセシブルな名前を識別するために使用します。コントロールとそのラベルを囲むか（例 1を参照）、コントロールのIDを参照するfor属性を追加できます（例 1を参照）。

 					

 					

 						fieldset
 					

 					

-						
The fieldset element is used to group sets of related controls. A label can then be 							provided in a child legend element (see Example 3).

+						
fieldset要素は、関連するコントロールのセットをグループ化するために使用します。子のlegend要素にはラベルを付与できます。（例 3 を参照）。

 					

 				
 				
-				
There are two drawbacks to these native methods: one is that they only accept a single label and the 					other is that the labels must be a visible part of the page and the text can be capture by the 						label element. The following ARIA attributes help solve these more complex cases:

+				
これらのネイティブメソッドには二つの短所があります。一つは、単一のラベルしか付けられないこと、もう一つは、ラベルがページの表示部分にある必要があり、テキストがlabel要素によってキャプチャされることです。より複雑なケースは、次のARIA属性で対応できます。

 				
 				

 					

 						aria-labelledby
 					

 					

-						
The aria-labelledby attribute can be used to reference multiple elements. It is useful 							when more than one piece of information is necessary to give full context to a control (see Example 5). It can also be used to identify the label when it is not possible 							to use a label element (see Example 4).

+						
aria-labelledby属性は、複数の要素を参照するために使用します。コントロールに完全なコンテキストを与えるために複数の情報が必要な場合に便利です（例 5 を参照）。また、 label要素を使用できない場合にラベルを識別するのにも使用できます（例 4 を参照）。

 					

 					

 						aria-label
 					

 					

-						
The aria-label attribute can be used when it is not possible to include a label by any 							other means (see Example 6). The value of the attribute is the label for the 							control.

+						
aria-label属性は、他の方法でラベルを付けられない場合に使用します（例 6を参照）。属性の値はコントロールのラベルです。
From 7d1f69789e7912c348505f5ca13f06e9b87821c9 Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:53 +0000 Subject: [PATCH 13/18] Translate pe.html via GitLocalize --- publishing/ja/script/pe.html | 230 +++++++++++++++++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 publishing/ja/script/pe.html diff --git a/publishing/ja/script/pe.html b/publishing/ja/script/pe.html new file mode 100644 index 00000000..49bea37c --- /dev/null +++ b/publishing/ja/script/pe.html @@ -0,0 +1,230 @@ + + + + + プログレッシブ エンハンスメント + + + + + + + + +
+
+

要約

+ +

プログレッシブ エンハンスメント技術を使用すると、スクリプトが利用できない場合でもコンテンツが利用できるようになります。

+
+ +
+

テクニック

+ +
    +
  • コンテンツの表示または挿入が、スクリプトに依存しないようにする。[[WCAG-1.3.1]]
    • +
  • リンクが、スクリプトに依存しないようにする。[[WCAG-1.3.1]]
    • +
+
+ +
+

例

+
+
+ 例1 — 強化されたリンク +

次の例では、秘密コードはスクリプトが利用可能な場合にのみ、非表示になり、アクティブ化できるようになります。それ以外の場合は、テキストは段落の一部として表示されるため、スクリプトのサポートに関係なく、ユーザーはテキストを読むことができます。

+
+ 
<p>
+   The <span id="code">secret code</span> 
+   <span id="secret">D E A D M A N</span> had to be
+   spelled out to gain passage to the pirates' lair.
+</p>
+
+<div id="revealed" aria-live="assertive"/>
+
+<style type="text/css">
+
+   span#secret { color: rgb(255,0,0); }
+   
+   div#revealed { width: 100%; text-align: center; }
+   
+   span.letter { 
+     font-family: "Times New Roman";
+     font-size: 240%;
+     font-weight: bold;
+     color: rgb(255,0,0);
+     text-shadow: rgb(0,0,0) 1px 1px 2px;
+     animation: bleedin 2s;
+   }
+
+   @keyframes bleedin {
+     from {
+       font-weight: normal;
+       font-size: 0%;
+       background: rgb(255,0,0);
+       text-shadow: rgb(0,0,0) 1px 1px 50px;
+     }
+     to {
+       font-weight: bold;
+       font-size: 240%;
+       background: rgb(255,255,255);
+       text-shadow: rgb(0,0,0) 1px 1px 2px;
+     }
+   }
+
+</style>
+
+<script>
+   <![CDATA[
+   var code = document.getElementById('code');
+       code.style.color = 'rgb(0,0,200)';
+       code.onclick = function () { revealCode(); };
+       code.setAttribute('role', 'button');
+       code.setAttribute('tabindex', 0);
+   
+   var secret = document.getElementById('secret'); 
+       secret.style.visibility = 'hidden';
+       secret.style.display = 'none';
+       secret.setAttribute('aria-hidden', true);
+   
+   function revealCode() {
+     var revealed = document.getElementById('revealed');
+     if (revealed.childNodes.length == 0) {
+       var codeArray = 'DEADMAN'.split('');
+       var i = 0;
+       var revealLetters = setInterval(function(){
+         if (i < codeArray.length) {
+            var letter = document.createElement('span');
+            letter.setAttribute('class', 'letter');
+            letter.appendChild(document.createTextNode(codeArray[i]));
+            revealed.appendChild(letter);
+            i++;
+         }
+         
+         else { 
+            clearInterval(revealLetters);
+         }
+       }, 300);
+     }
+   }
+   ]]>
+</script>
+

このコードの動作例を次に示します。

+

海賊の隠れ家に行くには、秘密コード「D E A D M A N」のスペルを言わなければならなかった。

+
+ +
+
+ +
+

解説

+ +

EPUB 3ではJavaScriptによるスクリプト化されたインタラクションのサポートが追加されましたが、出版物のアクセシビリティを確保するためにインタラクションの使用方法にいくつかの制約が課されています。スクリプトの基本原則はプログレッシブ エンハンスメントです。つまり、次のようになります。

+ +
+

spineレベルのスクリプトを含むトップレベルのコンテンツドキュメントは、スクリプトが無効になっているか利用できない場合でも、情報の損失やその他の重大な劣化なしにユーザーが利用できるようにします。

+ EPUB 3.3 +
+ +

Progressive enhancement does not mean that you cannot script content, but that scripting must not be required. It is perfectly valid, for example, to remove content from the default rendering and replace it with an enhanced experience when scripting is available. It is likewise permitted to augment the default rendering with scripted interactivity. What you must avoid doing is scripting content such that without the scripting the primary narrative is not available in whole or part.

+ +

バリデーターだけではこの基準への準拠を検証することはできないため、コンテンツを作成する際には、重要な原則が遵守されているように注意しなければなりません。特に次の点に注意してください。

+ +
    +
  • do not include content that can only be accessed (made visible) through scripted interaction.
    • +
  • デフォルトのレンダリングなしで、ユーザーの設定、場所、言語、またはその他の設定に基づいてコンテンツをスクリプト対応にすることはしない。
    • +
  • スクリプトを使わなければユーザーがコンテンツ内を移動できないようにはしない（例：自分で冒険を選ぶ本）。
    • +
+ +

スクリプトを追加するときは、必ず拡張する形で追加します。

+ +

スクリプトによる拡張の一般的な例としては、コードスニペットに行番号を追加することが挙げられます。多くのコンテンツ製作者は、行番号をエミュレートするためにpreタグ内で順序付きリストを使用することを好みますが、順序付きリストは支援技術を使用するユーザーにとっては気が散る可能性があり、CSS対応のユーザーエージェントを使用していないユーザーにとっては煩わしく見苦しいものになる可能性があります。

+ +

Instead of hard-coding the markup, a progressive enhancement technique would be to lay out your code samples so that they render as expected in the default preformatted view. You can then script, or grab a library, that can dynamically add the ordered list tagging to the element (which is what this site does). This approach ensures a baseline of readability in the most basic reading scenarios, while providing a richer visual view for those who have more advanced user agents.

+
+
+ + From 948ed1cfb327a13d80856e735e227ec72ae2ec2d Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:54 +0000 Subject: [PATCH 14/18] Translate pe.html via GitLocalize --- publishing/ja/script/pe.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/publishing/ja/script/pe.html b/publishing/ja/script/pe.html index 49bea37c..68f0e1f9 100644 --- a/publishing/ja/script/pe.html +++ b/publishing/ja/script/pe.html @@ -209,12 +209,12 @@

解説

EPUB 3.3 -

Progressive enhancement does not mean that you cannot script content, but that scripting must not be required. It is perfectly valid, for example, to remove content from the default rendering and replace it with an enhanced experience when scripting is available. It is likewise permitted to augment the default rendering with scripted interactivity. What you must avoid doing is scripting content such that without the scripting the primary narrative is not available in whole or part.

+

プログレッシブ エンハンスメントは、コンテンツをスクリプト化するべきでないという意味ではなく、スクリプト化が必須であってはならないという意味です。たとえば、スクリプト化が可能な場合、デフォルトのレンダリングからコンテンツを削除して拡張エクスペリエンスに置き換えることはまったく問題ありません。同様に、スクリプト化されたインタラクティブ機能でデフォルトのレンダリングを拡張することも許可されています。避けるべきことは、スクリプト化なしでは主要な文章の全体または一部が利用できないようなコンテンツのスクリプト化です。

バリデーターだけではこの基準への準拠を検証することはできないため、コンテンツを作成する際には、重要な原則が遵守されているように注意しなければなりません。特に次の点に注意してください。

    -
  • do not include content that can only be accessed (made visible) through scripted interaction.
    • +
  • スクリプト化されたインタラクションを通じてでなければアクセスできない（表示できない）コンテンツは組み込まない。
  • デフォルトのレンダリングなしで、ユーザーの設定、場所、言語、またはその他の設定に基づいてコンテンツをスクリプト対応にすることはしない。
  • スクリプトを使わなければユーザーがコンテンツ内を移動できないようにはしない（例：自分で冒険を選ぶ本）。
@@ -223,7 +223,7 @@

解説

スクリプトによる拡張の一般的な例としては、コードスニペットに行番号を追加することが挙げられます。多くのコンテンツ製作者は、行番号をエミュレートするためにpreタグ内で順序付きリストを使用することを好みますが、順序付きリストは支援技術を使用するユーザーにとっては気が散る可能性があり、CSS対応のユーザーエージェントを使用していないユーザーにとっては煩わしく見苦しいものになる可能性があります。

-

Instead of hard-coding the markup, a progressive enhancement technique would be to lay out your code samples so that they render as expected in the default preformatted view. You can then script, or grab a library, that can dynamically add the ordered list tagging to the element (which is what this site does). This approach ensures a baseline of readability in the most basic reading scenarios, while providing a richer visual view for those who have more advanced user agents.

+

マークアップをハードコーディングする代わりに、プログレッシブ エンハンスメント手法では、コードサンプルをレイアウトして既定のフォーマット済みビューの中に期待どおりにレンダリングします。次に、スクリプトを作成するか、ライブラリを用いて、順序付きリストのタグ付けを要素に動的に追加します（このサイトではこれを行っています）。このアプローチにより、最も基本的な読み取りシナリオで読みやすさの基準が確保され、より高度なユーザーエージェントを使用するユーザー向けに、より豊富なビジュアル表示を提供できます。

From 0d87163a61740c536e1ae1a9a7fed17c5ab2568b Mon Sep 17 00:00:00 2001 From: mayuhamada Date: Thu, 19 Dec 2024 08:49:56 +0000 Subject: [PATCH 15/18] Translate tab-order.html via GitLocalize --- publishing/ja/script/tab-order.html | 124 ++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 publishing/ja/script/tab-order.html diff --git a/publishing/ja/script/tab-order.html b/publishing/ja/script/tab-order.html new file mode 100644 index 00000000..6961ea8f --- /dev/null +++ b/publishing/ja/script/tab-order.html @@ -0,0 +1,124 @@ + + + + + タブ順序 + + + + + + +
+
+

要約

+

Ensure all form and scripted controls can be reached and their tab order matches their logical sequence in the content.

+
+
+

テクニック

+
    +
  • +

    Ensure there is a logical tab order. [[WCAG-2.4.3]]

    +
    • +
+
+
+

例

+
+
+
例 1 — 二列フォーム
+

The following example shows part of a table layout used to position shipping and billing addresses side by side. The tabindex attribute is used to ensure a logical flow from form field to form field.

+
+ 
<table>
+   <tr>
+      <td>
+         <span id="shipping">Shipping Address</span>
+      </td>
+      <td>
+         <span id="billing">Billing Address</span>
+         <label>
+            <input type="checkbox" id="bill-sameas" tabindex="8"/>
+            Use shipping address for billing
+         </label>
+      </td>
+   </tr>
+   <tr>
+      <td>
+         <span class="label" id="str">Street</span>
+         <input type="text" id="ship-street"
+            aria-labelledby="shipping str" tabindex="1"/>
+      </td>
+      <td>
+         <span class="label">Street</span>
+         <input type="text" id="bill-street"
+            aria-labelledby="billing str" tabindex="9"/>
+      </td>
+   </tr>
+   <tr>
+      <td>
+         <span class="label" id="city">City</span>
+         <input type="text" id="ship-city"
+            aria-labelledby="shipping city" tabindex="2"/>
+      </td>
+      <td>
+         <span class="label">City</span>
+         <input type="text" id="bill-city"
+            aria-labelledby="billing city" tabindex="10"/>
+      </td>
+   </tr>
+   …
+</table>
+
+
+
+
例 2 - タブ順序にカスタムコントロールを追加する
+

The following example shows the tabindex attribute set to 0 to include a scripted image button in the tab order.

+
+ 
<img src="controls/start.png"
+    id="start"
+    role="button"
+    tabindex="0"
+    alt="Start"/>
+
+
+
+
例 3 — モーダルダイアログで負のタブ順序値を使用する
+

次の例では、スクリプトによってポップアップ ダイアログボックスが開かれるまで、ユーザーがタブキーでポップアップ ダイアログボックスに移動できないように、 tabindex属性を-1に設定しています。

+
+ 
<div role="dialog" aria-modal="true" aria-label="Results"
+     tabindex="-1" >
+   …
+</div>
+
+
+
+

解説

+

キーボードのタブボタンは、ハイパーリンク、スクリプトコントロール、フォームなどのインタラクティブな要素間を移動するためのショートカットを提供します。ユーザーがタブキーを押したときにこれらの要素がフォーカスを取得する順序は、タブ順序と呼ばれます。

+

By default, native HTML controls (e.g., a, button, input) receive tab focus according to the order in which they are included in the markup. While this is often sufficient to provide a meaningful tab order, complex layouts and the scripting of custom controls can cause ordering problems.

+

For example, table layouts are sometimes used to lay out forms so that they appear to be two side-by-side columns (see Example 1). In this case, tabbing from one field to the next will jump the user between the two columns (i.e., from one cell to the next within each row) instead of allowing them to move down one column before starting the next.

+

Similarly, when scripted controls are created, they need to be explicitly added to the tab order otherwise browsers and assistive technologies will not provide access to the element through the tab key.

+

In these cases, the tabindex attribute is used to change the default tab order of elements, or to add an element to the tab order. The value of the attribute must be one of the following:

+
    +
  • +-1 — 値-1は、要素をタブ順序から除外するために使用されます。この値は、スクリプトによって要素がフォーカス可能になるような場合に最もよく使用されます。任意の負の数を使用できますが、効果は同じです（つまり、優先順位や順序は付与されません）。
    • +
  • +0 — 値0は、マークアップ内の位置に応じて要素をタブ順序に配置するために使用されます。この値を使うと、フォーカス可能なすべての要素に対して番号付きのシーケンスを作成しなくてすむので、スクリプトコントロールをタブ順序に追加するような場合に最もよく使用されます。
    • +
  • 任意の正の数値— 正の数値が使用される場合、その数値はコントロールに移動する順序を示します。数値1はタブ順序の最初のコントロールを示し、数値2は二番目のコントロールを示します。以下同様です。順序のギャップは無視されます（つまり、間に値がない場合、フォーカスは1から10に移動します）。順序付けられたすべてのコントロールを移動した後、明示的なtabindex値を持たないコントロールに移動します。
    • +
+

一般的に、フォーカス可能な要素がマークアップ内で正しい順序になっているようにして、正のtabindex値を使用しなくても良いようにするのが最善です。シーケンスの作成は簡単な作業のように見えるかもしれませんが、これを行うと予期しない結果が生じることがよくあります。たとえば、ファイルの末尾にあるフォームフィールドに対してタブ順序を作成する必要がある場合、フォームの前のすべてのフォーカス可能な要素（すべてのハイパーリンクなど）にtabindex値が割り当てられていないと、ユーザーは最初にTabキーを押したときにフォームに移動されてしまいます。並べ替えられたフォーカス可能な要素の長いシーケンスを維持することも面倒です。

+
+
+

関連リンク

+ +
+
+ + From eccad7f202cb4b6389b13cd73f54ddda172793cc Mon Sep 17 00:00:00 2001 From: Tomoyuki Kudou Date: Thu, 19 Dec 2024 08:49:58 +0000 Subject: [PATCH 16/18] Translate tab-order.html via GitLocalize --- publishing/ja/script/tab-order.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/publishing/ja/script/tab-order.html b/publishing/ja/script/tab-order.html index 6961ea8f..f9648f8d 100644 --- a/publishing/ja/script/tab-order.html +++ b/publishing/ja/script/tab-order.html @@ -17,13 +17,13 @@

要約

-

Ensure all form and scripted controls can be reached and their tab order matches their logical sequence in the content.

+

タブ順序をコンテンツ内の論理的な順序と一致させ、すべてのフォームおよびスクリプトコントロールにアクセスできるようにします。

テクニック

  • -

    Ensure there is a logical tab order. [[WCAG-2.4.3]]

    +

    タブ順序を論理的な順番にします。[[WCAG-2.4.3]]

@@ -32,7 +32,7 @@

例

例 1 — 二列フォーム
-

The following example shows part of a table layout used to position shipping and billing addresses side by side. The tabindex attribute is used to ensure a logical flow from form field to form field.

+

次の例は、配送先住所と請求先住所を並べて配置するためのテーブルレイアウトの一部を示しています。フォームフィールドから次のフォームフィールドへの論理的な順序を保証するためにtabindex属性を使用しています。

<table>
    <tr>
@@ -77,7 +77,7 @@ 
例

 				

 					

 						
例 2 - タブ順序にカスタムコントロールを追加する

-						
The following example shows the tabindex attribute set to 0 to 							include a scripted image button in the tab order.

+						
次の例では、スクリプト化された画像ボタンをタブ順序に組み込むためにtabindex属性を0に設定しています。

 					

 					
<img src="controls/start.png"
     id="start"
@@ -99,10 +99,10 @@ 
例

 			

 				
解説

 				
キーボードのタブボタンは、ハイパーリンク、スクリプトコントロール、フォームなどのインタラクティブな要素間を移動するためのショートカットを提供します。ユーザーがタブキーを押したときにこれらの要素がフォーカスを取得する順序は、タブ順序と呼ばれます。

-				
By default, native HTML controls (e.g., a, button, input) 					receive tab focus according to the order in which they are included in the markup. While this is 					often sufficient to provide a meaningful tab order, complex layouts and the scripting of custom 					controls can cause ordering problems.

-				
For example, table layouts are sometimes used to lay out forms so that they appear to be two 					side-by-side columns (see Example 1). In this case, tabbing from one field to 					the next will jump the user between the two columns (i.e., from one cell to the next within each 					row) instead of allowing them to move down one column before starting the next.

-				
Similarly, when scripted controls are created, they need to be explicitly added to the tab order 					otherwise browsers and assistive technologies will not provide access to the element through the tab 					key.

-				
In these cases, the tabindex attribute is used to change the default tab order of 					elements, or to add an element to the tab order. The value of the attribute must be one of the 					following:

+				
デフォルトでは、ネイティブHTMLコントロール（例：a 、button、input）は、マークアップで記載されている順序に従ってタブキーによるフォーカスを受け取ります。多くの場合、これで意味のあるタブ順序を提供できますが、複雑なレイアウトやカスタムコントロールのスクリプトがあると、順序の問題が発生する場合があります。

+				
たとえば、フォームを二つの横並びの列としてレイアウトするためにテーブルレイアウトを使用することがあります（例1を参照）。この場合、一つのフィールドから次のフィールドにタブ移動すると、ユーザーは一つの列を上から下に移動してから次の列に移動するのではなく、二つの列間（つまり、各行の一つのセルから次のセル）で移動してしまいます。

+				
同様に、スクリプト コントロールを作成した場合、ブラウザーと支援技術はタブキーを介して要素にアクセスできないので、そのタブ順序を明示的に指定する必要があります。

+				
このような問題を解決するには、 tabindex属性を使って、要素のデフォルトのタブ順序を変更したり、またはタブ順序に要素を追加します。属性の値は、次のいずれかでなければなりません。

 				
    
 					
  • 
 -1 — 値-1は、要素をタブ順序から除外するために使用されます。この値は、スクリプトによって要素がフォーカス可能になるような場合に最もよく使用されます。任意の負の数を使用できますが、効果は同じです（つまり、優先順位や順序は付与されません）。
    • 

From 5f46a619a61ff8d88408f5b4adabfa04b158d8c0 Mon Sep 17 00:00:00 2001
From: mayuhamada 
Date: Thu, 19 Dec 2024 08:50:00 +0000
Subject: [PATCH 17/18] Translate timers.html via GitLocalize

---
 publishing/ja/script/timers.html | 68 ++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 publishing/ja/script/timers.html

diff --git a/publishing/ja/script/timers.html b/publishing/ja/script/timers.html
new file mode 100644
index 00000000..cd0a1e38
--- /dev/null
+++ b/publishing/ja/script/timers.html
@@ -0,0 +1,68 @@
+
+
+	
+		
+		タイマー
+		
+		
+		
+		
+	
+	
+		
    
+			
    
+				
    要約
    
+				
    ユーザーが時間制限のあるアクションを完了するのに十分な時間が確保されるようにします。
    
+			
    
+			
    
+				
    テクニック
    
+				
      
+					
    • 
+						
      Allow users to turn off, adjust or extend time limits [[WCAG-2.2.1]]
      
+					
      • 
+					
    • 
+						
      アクティビティに時間制限を設けないようにします [[WCAG-2.2.3]]
      
+					
      • 
+					
    • 
+						
      データ損失を引き起こす可能性のあるアクティブでない期間についてユーザーに警告します [[WCAG-2.2.6]]
      
+					
      • 
+					
    • 
+						
      ユーザーが再認証してデータを失うことなくセッションを継続できるようにします [[WCAG-2.2.5]]
      
+					
      • 
+				
    
+			
    
+			
    
+				
    解説
    
+				
+				
    The kind of time limits that WCAG addresses are not common in digital publications. These limits 					typically occur due to user inactivity (e.g., to automatically log users out of sites so 					that their accounts are not compromised) and to ensure the proper functioning of an application 					(e.g., so users cannot hold purchases indefinitely).
    
+				
+				
    ただし、一部のデジタル出版物、特にクイズ、テスト、インタラクティブなアクティビティを組み込んだ教育関係の出版物では、時間制限が使用されています。タイミングがアクティビティに不可欠であるかどうか、また、ユーザーが時間を延長、調整、オフにできるようにする必要があるかどうかは、これらのケースではより複雑です。
    
+				
+				
    たとえば、テストが生徒の成績評価に不可欠な場合は、時間制限を設けることは許される場合があります。ただし、アクティビティが練習のみを目的としている場合は、ユーザーがタイミングを制御できるようにするべきです。
    
+				
+				
    
+					
    注記
    
+					
    In practice, whether students should be permitted more time to complete tests, and how to allow 						this in a digital publication, is a complicated issue. Local laws may require accommodations 						for students that allow additional time. It is better to avoid adding time-critical functions 						to publications whenever possible.
    
+				
    
+				
+				
    一般的には、コンテンツの操作や理解に影響する時間制限をユーザーが制御できるようにするのが最適です。たとえば、視覚や認知に障害のあるユーザーは、コンテンツのレイアウトを理解したり、実行するアクティビティを理解したりするのに多くの作業が必要になるため、アクティビティを完了するのにより多くの時間が必要になる場合があります。
    
+				
+				
    また、アクティブでない期間によって、入力したデータやアクティビティの進行状況が失われる場合も、ユーザーに警告する必要があります。アクティブでない期間が短く設定されすぎると、たとえば、まだ手順を読んでいる間に、ユーザーがアクティブでないように見える場合があります。
    
+				
+				
    さらに、セッションを使用してユーザーの現在の状態を維持する場合（ユーザーが出版物内のアクティビティを追跡するサービスにログインしなければならない場合）、ユーザーが再認証でき、データや進行状況が失われないようにする必要があります。
    
+			
    
+			
    
+				
    関連リンク
    
+				
+			
    
+		
    
+	
+

From 98c4b66516c408946f1cf3ca130381ab20429b45 Mon Sep 17 00:00:00 2001
From: Tomoyuki Kudou 
Date: Thu, 19 Dec 2024 08:50:01 +0000
Subject: [PATCH 18/18] Translate timers.html via GitLocalize

---
 publishing/ja/script/timers.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/publishing/ja/script/timers.html b/publishing/ja/script/timers.html
index cd0a1e38..b84b6125 100644
--- a/publishing/ja/script/timers.html
+++ b/publishing/ja/script/timers.html
@@ -23,7 +23,7 @@ 
    要約
    
 				
    テクニック
    
 				
      
 					
    • 
-						
      Allow users to turn off, adjust or extend time limits [[WCAG-2.2.1]]
      
+						
      ユーザーが時間制限をオフにしたり、調整したり、延長できるようにします [[WCAG-2.2.1]]
      
 					
      • 
 					
    • 
 						
      アクティビティに時間制限を設けないようにします [[WCAG-2.2.3]]
      
@@ -39,7 +39,7 @@ 
      テクニック
      
 			
      
 				
      解説
      
 				
-				
      The kind of time limits that WCAG addresses are not common in digital publications. These limits 					typically occur due to user inactivity (e.g., to automatically log users out of sites so 					that their accounts are not compromised) and to ensure the proper functioning of an application 					(e.g., so users cannot hold purchases indefinitely).
      
+				
      WCAGが扱う時間制限の種類は、デジタル出版物では一般的ではありません。これらの制限は通常、ユーザーのアクティブでない状態（例：アカウントが侵害されないようにユーザーをサイトから自動的にログアウトする）や、アプリケーションの適切な機能の確保（例：ユーザーが購入物を無期限に保有できないようにする）のために使われます。
      
 				
 				
      ただし、一部のデジタル出版物、特にクイズ、テスト、インタラクティブなアクティビティを組み込んだ教育関係の出版物では、時間制限が使用されています。タイミングがアクティビティに不可欠であるかどうか、また、ユーザーが時間を延長、調整、オフにできるようにする必要があるかどうかは、これらのケースではより複雑です。
      
 				
@@ -47,7 +47,7 @@ 
      解説
      
 				
 				
      
 					
      注記
      
-					
      In practice, whether students should be permitted more time to complete tests, and how to allow 						this in a digital publication, is a complicated issue. Local laws may require accommodations 						for students that allow additional time. It is better to avoid adding time-critical functions 						to publications whenever possible.
      
+					
      実際には、学生がテストに回答するために追加の時間を与えるべきかどうか、また、デジタル出版物でこれをどのように許可するかは複雑な問題です。地域によっては法律で、学生に追加の時間を与える配慮が求められる場合もあります。可能な限り、出版物に時間的に重要な機能を追加することは避けた方が良いでしょう。
      
 				
      
 				
 				
      一般的には、コンテンツの操作や理解に影響する時間制限をユーザーが制御できるようにするのが最適です。たとえば、視覚や認知に障害のあるユーザーは、コンテンツのレイアウトを理解したり、実行するアクティビティを理解したりするのに多くの作業が必要になるため、アクティビティを完了するのにより多くの時間が必要になる場合があります。