| title | slug | l10n | ||
|---|---|---|---|---|
知覚可能 |
Web/Accessibility/Understanding_WCAG/Perceivable |
|
{{AccessibilitySidebar}}
この記事では、ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.0 および 2.1 の知覚可能原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 知覚可能とは、ユーザーが自分の感覚の 1 つ以上を使用して何らかの方法でそれを知覚できなければならないということです。
Note
知覚可能の W3C 定義とそのガイドラインおよび達成基準を読むには、原則 1: 知覚可能 — 情報とユーザーインターフェイス・コンポーネントが、ユーザーが認識できる方法で提示可能である必要があります（英語）を参照してください。
ここで重要なのは、テキストならば障碍のある人が使用できる他の形式に変換できることです。 例えば、スクリーンリーダーで話させたり、ズームインしたり、点字ディスプレイに表示したりできます。 非テキストコンテンツとは、画像、音声、動画などのマルチメディアを指します。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 1.1.1 同等のテキストを提供する (A) | 意味のある内容を伝える全ての画像は、適切な代替テキストを与えられるべきです。 | 代替テキスト。 |
複雑な画像や図表には、同じページ上またはリンク先のいずれかにアクセス可能な代替手段を用意するべきです。 longdesc 属性ではなく通常のリンクを使用してください。
|
テキストの説明や、アクセス可能なデータ表がうまくいくかもしれません（HTML 表の高度な機能とアクセシビリティを参照）。 |
|
| マルチメディアコンテンツ（例えば、音声や動画）は、少なくともわかりやすい識別が利用できるべきです（例えば、キャプションまたは同様のもの）。 |
静的キャプションの選択肢については代替テキストを、その他の選択肢については音声トランスクリプト、 映像のテキストトラックを参照してください。 |
|
| フォーム要素やボタンのような UI コントロールには、その目的を説明するテキストラベルを付けるべきです。 |
ボタンは簡単です —
ボタンのテキストがボタンの機能を説明していることを確認してください（例えば、<button>画像のアップロード</button>）。
他の UI コントロールの詳細については、UI コントロールを参照してください。
|
|
| 支援技術には見えない方法で、装飾的な（コンテンツではない）画像、動画などを実装すると、ユーザーを混乱させません。 |
装飾画像は CSS 背景画像を使用して実装する必要があります（背景を参照）。 {{htmlelement("img")}}
要素を介して画像を含める必要がある場合は、空白の
alt（ 自動再生する背景の動画や音声を含める場合は、できるだけ目立たないようにします。 コンテンツのように見せたり鳴らさないでください。 また、無効にするコントロールを提供してください。 理想的には、それをまったく含めないでください。 |
メモ: ガイドライン 1.1: 代替テキスト（英語）に関する WCAG の説明も参照してください。
時間ベースのメディアは、持続期間を有するマルチメディア、すなわち音声および動画を指します。 また、それらの音声や動画が既存のテキストコンテンツの代替を兼ねる場合は、別の代替テキストを提供する必要はありません。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 1.2.1 記録済みの音声のみおよび動画のみのコンテンツに代わるものを提供する (A) | トランスクリプトは、録音済みの音声のみのメディアに提供するべきで、トランスクリプトまたは音声解説は、録画済みの動画のみのメディア（すなわち、サイレントビデオ）に提供するべきです。 | トランスクリプト情報については、音声トランスクリプトを参照してください。 音声解説のチュートリアルはまだありません。 |
| 1.2.2 ウェブベースの動画にキャプションを付ける (A) | ウェブ上に表示される動画（例えば、HTML 動画）には、キャプションを付けるべきです。 これは、動画の音声部分が聞こえない人々のためのものです。 | HTML 動画のキャプションについては映像のテキストトラックsを参照してください。 Add your own subtitles & closed captions（YouTube、英語）も参照してください。 |
| 1.2.3 ウェブベースの動画にテキストトランスクリプトまたは音声解説を提供する (A) | ウェブ上に提示される動画（例えば、HTML 動画）のためのテキストトランスクリプトまたは音声解説を提供するべきです。 これは、動画の視覚的な部分を見ることができず、音声だけではコンテンツ全体を把握できない人々のためのものです。 | トランスクリプト情報については、音声トランスクリプト を参照してください。 音声解説のチュートリアルはまだありません。 |
| 1.2.4 生音声にキャプションを付ける (AA) | 音声を含んだすべての生のマルチメディア（ビデオ会議、生音声放送など）には、同期したキャプションを付けるべきです。 | |
| 1.2.5 録画済み動画の音声解説を提供する (AA) | 音声解説は、録画済み動画に対して提供するべきですが、既存の音声が動画によって表現された完全な意味を伝えない場合に限ります。 | |
| 1.2.6 録音済み音声と同等の手話を提供する (AAA) | 音声を含んだ記録済みコンテンツには、同等の手話動画を提供するべきです。 | |
| 1.2.7 音声解説付きの拡張動画を提供する (AAA) | 動画のタイミングの問題で音声解説を提供できない場合（例えば、音声解説を挿入するコンテンツに適切な間がない場合）（1.2.5 を参照）、挿入された間（と音声解説）を含んだ動画の代替バージョンを提供するべきです。 | |
| 1.2.8 記録済みメディアの代替を提供する (AAA) | 動画を特徴とする全てのコンテンツには、わかりやすいテキストトランスクリプトを提供する必要があります。 例えば、見ている映画のスクリプトなどです。 これは、コンテンツを聴くことができない聴覚障碍者のためのものです。 | トランスクリプト情報については、音声トランスクリプト を参照してください。 |
| 1.2.9 生音声用のトランスクリプトを提供する (AAA) | 放送されている生音声のコンテンツのために、例えば、あなたが聞いている演劇やミュージカルのスクリプトのような説明文を提供するべきです。 これは、コンテンツを聴くことができない聴覚障碍者のためのものです。 | トランスクリプト情報については、音声トランスクリプト を参照してください。 |
メモ: ガイドライン 1.2: タイムベースト・メディア: タイムベースト・メディアに代わるものを提供する（英語）に関する WCAG の説明も参照してください。
このガイドラインは、異なるニーズに柔軟に対応して、コンテンツがユーザーによってさまざまな方法で消費される能力について言及しています。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 1.3.1 情報と関係 (A) |
いかなるコンテンツ構造 — またはコンテンツ間に作られた視覚的関係 — もまた、プログラム的に決定されるか、またはテキストの説明から推論され得ます。 これが関連する主な状況は次のとおりです。
|
HTML: アクセシビリティの基礎全体には、これに関する情報が満載されていますが、特に良いセマンティクス、UI コントロール、代替テキストを参照するべきです。 |
| 1.3.2 重要なコンテンツの順序 (A) | 賢明で論理的な読み上げ順序は、たとえそれが独特な方法で視覚的に提示されていても、どんな内容に対しても決定しやすいはずです。 マークアップに関係なく、CSS を使用して独特なレイアウトスタイルを作成することで、正しい意味論的要素（見出し、段落など）を使用して順序を明確にするべきです。 | 繰り返しますが、HTML: アクセシビリティの基礎を参照してください。 |
| 1.3.3 感覚的性質 (A) |
コントロールを操作したり、コンテンツを理解したりするための指示は、単一の感覚には依存しません。 これは、その感覚に関連する障碍を持つ人々、またはその感覚をサポートしていないデバイスにとってアクセスできないことを証明するかもしれません。 だから、例えば、
メモ: 色だけで指示を伝えることは関連していますが、異なるガイドラインでカバーされています — 1.4.1。 |
|
| 1.3.4 方向 (AA) 2.1 で追加（英語） | 特定のディスプレイの向きが重要でない限り、コンテンツの表示と操作はポートレートやランドスケープなどの単一のディスプレイの向きに制限されません。 |
方向を理解する（英語） |
| 1.3.5 入力の目的の識別 (AA) 2.1 で追加（英語） |
53 個の入力フィールド（英語）のリストに従って、プログラム的にフィールドの目的を識別してください。 |
入力の目的の識別を理解する（英語） |
| 1.3.6 目的の識別 (AAA) 2.1 で追加（英語） | マークアップ言語を使用して実装されたコンテンツでは、ユーザーインターフェイス・コンポーネント、アイコン、およびリージョンの目的はプログラム的に決定できます。 | 目的の識別を理解する（英語） |
メモ: ガイドライン 1.3: 適応可能: 情報や構造を失うことなくさまざまな方法で提示できるコンテンツを作成する（英語）に関する WCAG の説明も参照してください。
このガイドラインは、コアコンテンツが背景や他の装飾から識別しやすいことを確認することに関するものです。 典型的な例は、色（色のコントラストと指示を伝えるための色の使い方の両方が）ですが、他の状況でも適用されます。
| 達成基準 | 基準への準拠方法 | 実用的なリソース |
|---|---|---|
| 1.4.1 色の使い方 (A) |
色だけを頼りにして情報を伝えるべきではありません。例えば、フォームでは、必須フィールドを色（赤など）だけで示す付けることは絶対にしないでください。 代わりに（または同様に）、「必須」というラベルの付いたアスタリスクのようなものがより適切です。 |
色の使用、 色とそのコントラスト、 複数のラベルを参照してください。 |
| 1.4.2 音声コントロール (A) | 3 秒以上再生される音声の場合は、音声や動画の再生と一時停止、および音量のミュートや調整を行うためのアクセス可能なコントロールを用意する必要があります。 |
動画プレーヤーのスタイル設定の基本に示すように、ネイティブの
<button>
を使用してアクセス可能なキーボードコントロールを提供します。
|
| 1.4.3 最低限のコントラスト (AA) |
背景と前景のコンテンツの間の色のコントラストは、読みやすさを確実なものとするための最低限のレベルであるべきです。
|
色のコントラストと色とそのコントラストを参照してください。 |
| 1.4.4 テキストのサイズ変更 (AA) | テキストサイズが倍になったときに、ページが読みやすく使えるべきです。 つまり、デザインはレスポンシブであるべきで、テキストサイズを大きくしてもコンテンツにアクセス可能であることを意味します。 | |
| 1.4.5 テキストの画像 (AA) | テキストが仕事をするようなコンテンツを提示するために画像を使用してはいけません。 例えば、画像がほとんどテキスト形式の場合、画像だけでなくテキストも使用して表現できます。 | |
| 1.4.6 強化されたコントラスト (AAA) |
これは、基準 1.4.3 に従い、その上に構築されます。
|
色とそのコントラストを参照してください。 |
| 1.4.7 背景音が小さいか無い (AAA) | 話し言葉を主な特徴とする録音済みの音声記録は、背景の雑音を最小限に抑えるようにしてください。そうするとコンテンツが理解しやすくなります。 | |
| 1.4.8 視覚的表現 (AAA) |
テキストコンテンツの表現では、次のことが当てはまります。
|
|
| 1.4.9 テキストの画像（例外なし） (AAA) | テキストは、純粋に装飾である（すなわち、それがいかなる内容も伝えない）か、または他の方法で提示することができない限り、画像の一部として提示するべきではありません。 | |
| 1.4.10 リフロー (AA) 2.1 で追加（英語） |
|
リフローを理解する（英語） |
| 1.4.11 テキスト以外のコントラスト (AA) 2.1 で追加（英語） | ユーザーインターフェイスコンポーネントとグラフィックオブジェクトの最低限のカラーコントラスト比は 3:1 です。 | テキスト以外のコントラストを理解する（英語） |
| 1.4.12 テキストの間隔 (AA) 2.1 で追加（英語） |
次のスタイルを適用しても、コンテンツや機能が失われることはありません。
|
テキストの間隔を理解する（英語） |
| 1.4.13 ホバーまたはフォーカスにおけるコンテンツ (AA) 2.1 で追加（英語） |
追加のコンテンツがホバーやキーボードフォーカスに連動して現れたり消えたりします。 この達成基準では、満たす必要がある次の 3 つの条件を指定します。
|
ホバーまたはフォーカスにおけるコンテンツを理解する（英語） |
メモ: ガイドライン 1.4: 識別可能: 背景から前景を分離するなど、ユーザーがコンテンツを見やすく、聞き取りやすくする（英語）に関する WCAG の説明も参照してください。