From 979eb415227d2f5bba07db432fcd7928a89b6264 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 25 Jun 2024 00:41:59 +0900 Subject: [PATCH] =?UTF-8?q?2024/04/17=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../understanding_wcag/operable/index.md | 466 ++++++++++++++++-- 1 file changed, 427 insertions(+), 39 deletions(-) diff --git a/files/ja/web/accessibility/understanding_wcag/operable/index.md b/files/ja/web/accessibility/understanding_wcag/operable/index.md index 887ce429bc8a15..7d81b0c5100c52 100644 --- a/files/ja/web/accessibility/understanding_wcag/operable/index.md +++ b/files/ja/web/accessibility/understanding_wcag/operable/index.md @@ -1,6 +1,8 @@ --- title: 操作可能 slug: Web/Accessibility/Understanding_WCAG/Operable +l10n: + sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc --- {{AccessibilitySidebar}} @@ -13,12 +15,77 @@ slug: Web/Accessibility/Understanding_WCAG/Operable このガイドラインは、キーボード制御に頼るユーザーがコアウェブサイト機能にアクセスできるように、他の手段（例えば、マウス）に加えてキーボードを介してそれらを利用可能にする必要性をカバーする。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| 2.1.1 キーボード (A) | キーボードを使用して行えない場合（例えば、フリーハンド描画）を除き、全ての機能はキーボード制御を使用してアクセス可能であるべきです。 可能な場合は組み込みのコントロールを使用するべきで（例えば、フォームコントロール間のタブ移動）、必要な場合にのみカスタム機能を組み込むべきです。 | [UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)と[キーボードアクセシビリティを呼び戻すように盛り込む](/ja/docs/Learn/Accessibility/HTML#キーボードアクセシビリティを呼び戻すように盛り込む)を参照してください。 | -| 2.1.2 キーボードを閉じ込めない (A) | キーボードを使用してある機能のセクションに入るときは、キーボード**のみ**を使用してそのセクションから再び出ることができるべきです。 例えば、フォーカスのあるボタンの上で Enter / Return を押してオプションウィンドウを開いたら、キーボードを使ってそのウィンドウを再び閉じてメインコンテンツに戻ることができるべきです。キーボードユーザーをアプリの特定のセクションに閉じ込めないようにするために、これは非常に重要です。 | | -| 2.1.3 キーボード — 全機能 (AAA) | これは、基準 2.1.1 を超えるさらなるステップです。 AAA 準拠を達成するために、全ての機能はキーボードコントロールを使用してアクセス可能であるべきです — 例外なく。 | [UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)と[キーボードアクセシビリティを呼び戻すように盛り込む](/ja/docs/Learn/Accessibility/HTML#キーボードアクセシビリティを呼び戻すように盛り込む)を参照してください。 | -| 2.1.4 文字キーショートカット (A) [2.1 で追加](https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1)（英語） | 単一文字キーショートカットが存在する場合は、少なくとも次の 1 つが当てはまります。 単一文字キーショートカットは、オフにする、再マップする、または関連するユーザーインターフェイス・コンポーネントにフォーカスがあるときにのみアクティブにすることができます。 | [文字キーショートカットを理解する](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html)（英語） | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
達成基準基準への準拠方法実用的なリソース
2.1.1 キーボード (A) + キーボードを使用して行えないもの（例えば、フリーハンド描画）を除き、全ての機能はキーボード制御を使用してアクセス可能であるべきです。 + 可能な限り組み込みのコントロールを使用するべきで（例えば、フォームコントロール間のタブ移動）、必要な場合にのみカスタム機能を組み込むべきです。 + + UI コントロールとキーボードアクセシビリティを呼び戻すように盛り込むを参照してください。 +
2.1.2 キーボードを閉じ込めない (A) +

+ キーボードを使用してある機能のセクションに入るときは、キーボード*のみ*を使用してそのセクションから再び出ることができるべきです。 例えば、フォーカスのあるボタンの上で Enter / Return を押してオプションウィンドウを開いたら、キーボードを使ってそのウィンドウを再び閉じてメインコンテンツに戻ることができるようにすべきです。 +

+

+ キーボードユーザーをアプリの特定のセクションに閉じ込めないようにするために、これは非常に重要です。 +

+
2.1.3 キーボード — 全機能 (AAA) + これは、基準 2.1.1 を超えるさらなる段階です。 AAA 準拠を達成するためには、全ての機能はキーボード操作を使用してアクセス可能であるべきです。例外はありません。 + + UI コントロールとキーボードアクセシビリティを呼び戻すように盛り込むを参照してください。 +
+ 2.1.4 文字キーショートカット (A) + 2.1 で追加（英語） + + 単一文字キーショートカットが存在する場合は、単一文字キーショートカットをオフにするか、再マップするか、関連するユーザーインターフェイス・コンポーネントにフォーカスがあるときにのみアクティブにするか、いずれか一つ以上ができるようにします。 + + 文字キーショートカットを理解する（英語） +
> **メモ:** [ガイドライン 2.1: キーボードアクセス可能: キーボードから全ての機能を利用可能にする](https://www.w3.org/TR/WCAG21/#keyboard-accessible)（英語）に関する WCAG の説明も参照してください。 @@ -26,14 +93,82 @@ slug: Web/Accessibility/Understanding_WCAG/Operable このガイドラインでは、機能に制限時間があるかもしれない状況について説明します。 例えば、セキュリティ上の理由から、購入を制限時間内に完了する必要がある場合があります。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | -| 2.2.1 タイミングは調整可能 (A) | 制限時間付きの機能の場合（例えば、ホテルやフライトの予約を完了するには制限時間があることが多い）、ユーザーには、制限時間の調整、延長、または無効化を許可するコントロールを与えるべきです。これに対する例外は、20 時間を超える制限時間のある活動、リアルタイムイベント（例えば、ライブマルチプレイヤーゲーム）、および制限時間が必要で、無効にされた場合に無効になるその他の活動です。 | | -| 2.2.2 一時停止、停止、非表示 (A) | 自動的に開始され、5 秒以上続き、他のコンテンツと一緒に表示されるコンテンツを移動や点滅させるには、一時停止、停止、または非表示にするためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの移動や点滅には適用されません。 例としては、テキストのスクロールと動画があります。自動的に開始され、他のコンテンツと一緒に表示される自動更新情報の場合は、一時停止、停止、または非表示にするため、あるいは更新頻度を制御するためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの自動更新には当てはまりません。 例としては、回転木馬や回転アナウンスがあります。 | | -| 2.2.3 制限時間なし (AAA) | これは基準 2.2.1 に基づいており、AAA 適合に合格したいコンテンツには制限時間がないことを述べています。 | | -| 2.2.4 中断を抑止する (AAA) | アラートやインタースティシャル広告などによる中断には、緊急アラートでない限り、それらを抑制または延期するための機能を用意するべきです。 | | -| 2.2.5 再認証 (AAA) | ウェブアプリの使用中に認証セッションが期限切れになった場合、ユーザーはデータを失うことなく再認証して使用を続けることができます。 | | -| 2.2.6 タイムアウト (AAA) [2.1 で追加](https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1)（英語） | タイムアウトした場合（ユーザーの非活動状態が原因で）、プロセスの開始時にユーザーに警告するので、タイムアウトが存在していても驚くことはありません（または、20 時間の非活動状態の後にのみタイムアウトするようにします）。 | [タイムアウトを理解する](https://www.w3.org/WAI/WCAG21/Understanding/timeouts.html)（英語） | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
達成基準基準への準拠方法実用的なリソース
2.2.1 タイミングは調整可能 (A) +

+ 制限時間付きの機能の場合（例えば、ホテルやフライトの予約を完了するには制限時間があることが多い）、ユーザーには、制限時間の調整、延長、または無効化を許可するコントロールを与えるべきです。 +

+

+ これに対する例外は、20 時間を超える制限時間のある活動、リアルタイムイベント（例えば、ライブマルチプレイヤーゲーム）、および制限時間が必要で、無効にされた場合に意味を失うその他の活動です。 +

+
2.2.2 一時停止、停止、非表示 (A) +

+ 自動的に開始され、5 秒以上続き、他のコンテンツと一緒に表示されるコンテンツを移動や点滅させるには、一時停止、停止、または非表示にするためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの移動や点滅には適用されません。 例としては、テキストのスクロールと動画があります。 +

+

+ 自動的に開始され、他のコンテンツと一緒に表示される自動更新情報の場合は、一時停止、停止、または非表示にするため、あるいは更新頻度を制御するためのコントロールを提供するべきです。 これは、体験に不可欠なコンテンツの自動更新には当てはまりません。 例としては、回転木馬や回転アナウンスがあります。 +

+
2.2.3 制限時間なし (AAA) + これは基準 2.2.1 に基づいており、AAA 適合に合格したいコンテンツには制限時間がないことを述べています。 +
2.2.4 中断を抑止する (AAA) + アラートやインタースティシャル広告などによる中断には、緊急アラートでない限り、それらを抑制または延期するための機能を用意するべきです。 +
2.2.5 再認証 (AAA) + ウェブアプリの使用中に認証セッションが期限切れになった場合、ユーザーはデータを失うことなく再認証して使用を続けることができます。 +
+ 2.2.6 タイムアウト (AAA) + 2.1 で追加（英語） + +

+ タイムアウトした場合（ユーザーの非活動状態が原因で）、プロセスの開始時にユーザーに警告するので、タイムアウトが存在していても驚くことはありません（または、20 時間の非活動状態の後にのみタイムアウトするようにします）。 +

+ 		+ タイムアウトを理解する（英語） +
> **メモ:** [ガイドライン 2.2: 十分な時間: コンテンツを読んで使用するのに十分な時間をユーザーに提供する](https://www.w3.org/TR/WCAG21/#enough-time)（英語）に関する WCAG の説明も参照してください。 @@ -41,11 +176,32 @@ slug: Web/Accessibility/Understanding_WCAG/Operable これは、変更しないとてんかんなどの症状のあるユーザーに発作を起こす可能性がある、または前庭障碍などの症状のあるユーザーに身体的反応（めまいなど）を引き起こす可能性があるコンテンツを意味します。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -| 2.3.1 3 回の閃光、またはしきい値を下回る (A) | コンテンツに 1 秒間に 3 回以上の閃光を放つアスペクトが含まれていない、または閃光を放つコンテンツが許容できる[閃光および赤色閃光のしきい値](http://www.w3.org/TR/WCAG20/#general-thresholddef)（英語）を下回っている。 | | -| 2.3.2 3 回の閃光 (AAA) | コンテンツには、1 秒間に 3 回以上の閃光を放つアスペクトは含まれていません。 | | -| 2.3.3 インタラクションによるアニメーション (AAA) [2.1 で追加](https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1)（英語） | ユーザーがインタラクションによるアニメーションを無効にできるようにする（アニメーションが必須でない限り）。 | [インタラクションによるアニメーションを理解する](https://www.w3.org/TR/WCAG21/#animation-from-interactions)（英語） | + + + + + + + + + + + + + + + + + + + + + + + + + +
達成基準基準への準拠方法実用的なリソース
2.3.1 点滅は 3 回、またはしきい値未満にする (A)コンテンツには、1 秒間に 3 回以上点滅する局面がないか、または点滅するコンテンツが受け入れられる点滅および赤色点滅のしきい値を下回るようにする。
2.3.2 点滅は 3 回 (AAA)コンテンツには、1 秒間に 3 回以上点滅する局面がないようにする。
2.3.3 操作によるアニメーション (AAA) 2.1 で追加（英語）ユーザーが操作によるアニメーションを無効にできるようにする（アニメーションが必須でない限り）。操作によるアニメーションを理解する（英語）
> **メモ:** [ガイドライン 2.3: 発作と身体的反応: 発作や身体的反応を引き起こすことが知られている方法でコンテンツをデザインしないでください](https://www.w3.org/TR/WCAG21/#seizures-and-physical-reactions)（英語）に関する WCAG の説明も参照してください。 @@ -53,18 +209,204 @@ slug: Web/Accessibility/Understanding_WCAG/Operable このガイドラインの下での適合基準は、ユーザーが自分自身を指向し、サイトの現在のページや他のページで探しているコンテンツと機能を見つけることが期待できる方法に関連しています。 -| 達成基準 | 基準への準拠方法 | 実用的なリソース | -| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 2.4.1 ブロックのバイパス (A) | 繰り返される機能（会社のロゴやナビゲーションなど）を通り過ぎて、ユーザーがページにあるメインコンテンツや機能に直接スキップできるようにするメカニズムを提供するべきです。 これはしばしば、スキップリンク（"skip links"）を使用して達成されます — メインコンテンツにリンクする CSS によって隠されたリンクはページのソースのトップに置かれます。見出しと意味論のコンテナの適切な構造（例えば、{{htmlelement("section")}}、{{htmlelement("aside")}} など）がナビゲートするために提供されている場合は、追加のスキップリンクは必要ありません。 | スキップリンクのセクションを追加する必要があります。 | -| 2.4.2 ページタイトルを含める (A) | 各ウェブページには有益な {{htmlelement("title")}} を含めるべきです。 そのコンテンツは、ページのコンテンツや目的を説明しています。 | [タイトルの追加](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)を参照してください。 | -| 2.4.3 論理的なフォーカスの順序 (A) | フォーカス可能なページ機能（例えば、リンク、ボタン、フォーム入力）の「タブ順序」は論理的に意味があり、そのページはまだ非晴眼者でもキーボードのユーザーでも使用可能であることを意味します。 | コントロールへのタブ移動に関する一般的なアドバイスについては、[UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)を参照してください。 要素を独特なレイアウトに配置する必要がある場合は、ソースの順序が適切であることを確認してから、[配置](/ja/docs/Learn/CSS/CSS_layout/Positioning)などの CSS 機能を使用してレイアウトを扱うことをお勧めします。 | -| 2.4.4 リンクの目的（コンテキストにそった）（A） | リンクの目的や行き先は、リンクテキストから、またはその周囲（例えば、周囲のテキスト）から決定することができます。 例外は、リンクの目的が全てのユーザーにとってあいまいな場合です（これに関する有用な説明については、[一般的にユーザーにとってあいまい](https://www.w3.org/TR/WCAG20/#ambiguouslinkdef)（英語）を参照してください）。 | [意味の通るテキストラベル](/ja/docs/Learn/Accessibility/HTML#意味の通るテキストラベル)を参照してください。 また、同じテキストの複数のコピーが異なる場所にリンクされている場合は最小限に抑えるべきです。 これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧がコンテキストから外れて表示されることがよくあります — 全てが「ここをクリック」、「ここをクリック」、「ここをクリック」とラベル付けされたいくつかのリンクは混乱を招くでしょう。 | -| 2.4.5 複数のナビゲーションメカニズム (AA) | ウェブサイト上のページを見つけるために少なくとも二つの一般的なナビゲーションメカニズム、例えば、ナビゲーションメニュー、パンくずリスト、サイト検索、サイトマップ、関連リンクのリストなどを提供するべきです。これに対する唯一の例外は、ページがプロセスの 1 ステップである場合で、論理的には前後のステップへのリンクのみを持つべきです。 | これらのメカニズムのほとんどは、単純な HTML 機能を使用して作成できます。 例えば、[検索フィールド](/ja/docs/Learn/HTML/Forms/The_native_form_widgets#Search_field)、[ナビゲーションメニューの作成](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#アクティブラーニング_ナビゲーションメニューの作成)、[ボタンとしてのリンクのスタイリング](/ja/docs/Learn/CSS/Styling_text/Styling_links#Styling_links_as_buttons)を参照してください。 | -| 2.4.6 見出しとラベル (AA) | 見出し（例えば、{{htmlelement("h2")}}）および {{htmlelement("label")}} 要素は、それらが説明していると思われるコンテンツおよびフォーム要素の目的を明確に説明しています。 | [UI コントロール](/ja/docs/Learn/Accessibility/HTML#ui_コントロール)、[意味の通るテキストラベル](/ja/docs/Learn/Accessibility/HTML#意味の通るテキストラベル)、[見出しと段落の基本](/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_Headings_and_Paragraphs)、[\