知覚可能

この記事では、ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.0 および 2.1 の知覚可能原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 知覚可能とは、ユーザーが自分の感覚の 1 つ以上を使用して何らかの方法でそれを知覚できなければならないということです。

メモ: 知覚可能の W3C 定義とそのガイドラインおよび達成基準を読むには、原則 1: 知覚可能 — 情報とユーザーインターフェイス・コンポーネントが、ユーザーが認識できる方法で提示可能である必要があります(英語)を参照してください。

ガイドライン 1.1 — 非テキストコンテンツのための代替テキストの提供

ここで重要なのは、テキストならば障碍のある人が使用できる他の形式に変換できることです。 例えば、スクリーンリーダーで話させたり、ズームインしたり、点字ディスプレイに表示したりできます。 非テキストコンテンツとは、画像、音声、動画などのマルチメディアを指します。

達成基準 基準への準拠方法 実用的なリソース
1.1.1 同等のテキストを提供する (A) 意味のある内容を伝える全ての画像は、適切な代替テキストを与えられるべきです。 代替テキスト。
複雑な画像や図表には、同じページ上またはリンク先のいずれかにアクセス可能な代替手段を用意するべきです。 longdesc 属性ではなく通常のリンクを使用してください。

テキストの説明や、アクセス可能なデータ表がうまくいくかもしれません(HTML 表の高度な機能とアクセシビリティを参照)。 longdesc 反対論については、 W3C のImage Description Extension (longdesc)も参照してください。

マルチメディアコンテンツ(例えば、音声や動画)は、少なくともわかりやすい識別が利用できるべきです(例えば、キャプションまたは同様のもの)。

静的キャプションの選択肢については代替テキストを、その他の選択肢については音声トランスクリプト映像のテキストトラックを参照してください。

フォーム要素やボタンのような UI コントロールには、その目的を説明するテキストラベルを付けるべきです。 ボタンは簡単です — ボタンのテキストがボタンの機能を説明していることを確認してください(例えば、<button>画像のアップロード</button>)。 他の UI コントロールの詳細については、UI コントロールを参照してください。
支援技術には見えない方法で、装飾的な(コンテンツではない)画像、動画などを実装すると、ユーザーを混乱させません。

装飾画像は CSS 背景画像を使用して実装する必要があります(背景を参照)。 <img> 要素を介して画像を含める必要がある場合は、空白の alt(alt="")を付けます。 そうしないと、スクリーンリーダーがファイルパスなどを読み上げようとする可能性があります。

自動再生する背景の動画や音声を含める場合は、できるだけ目立たないようにします。 コンテンツのように見せたり鳴らさないでください。 また、無効にするコントロールを提供してください。 理想的には、それをまったく含めないでください。

メモ: ガイドライン 1.1: 代替テキスト(英語)に関する WCAG の説明も参照してください。

ガイドライン 1.2 — 時間ベースのメディアのための代替テキストの提供

時間ベースのメディアは、持続期間を有するマルチメディア、すなわち音声および動画を指します。 また、それらの音声や動画が既存のテキストコンテンツの代替を兼ねる場合は、別の代替テキストを提供する必要はありません。

達成基準 基準への準拠方法 実用的なリソース
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.3 — さまざまな方法で提示できるコンテンツの作成

このガイドラインは、異なるニーズに柔軟に対応して、コンテンツがユーザーによってさまざまな方法で消費される能力について言及しています。

達成基準 基準への準拠方法 実用的なリソース
1.3.1 情報と関係 (A)

いかなるコンテンツ構造 — またはコンテンツ間に作られた視覚的関係 — もまた、プログラム的に決定されるか、またはテキストの説明から推論され得ます。 これが関連する主な状況は次のとおりです。

  • テキストラベルとそれが説明するフォーム要素は、<label> 要素を使用して明確に関連付けられて、スクリーンリーダーなどが拾うことができます。
  • 画像の代替テキスト。 コンテンツ画像には、その画像の内容を明確に説明するテキストが含まれているべきです。 これは、プログラム的に関連付けることができます(例えば、alt テキスト)。 そうでない場合は、関連付けるのは簡単です(例えば、それを説明し、そのすぐ隣に置きます)。 これは、たとえあなたが画像を見ることができなくても、完全な意味がまだ推測できることを意味するはずです。
  • リスト。 リスト項目の順序が重要で、順序付きリストを使用するべき場合(<ol>)。

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.4: 前景と背景の区別を含め、ユーザーがコンテンツを見たり聞いたりしやすくする

このガイドラインは、コアコンテンツが背景や他の装飾から識別しやすいことを確認することに関するものです。 典型的な例は、色(色のコントラストと指示を伝えるための色の使い方の両方が)ですが、他の状況でも適用されます。

達成基準 基準への準拠方法 実用的なリソース
1.4.1 色の使い方 (A)

色だけを頼りにして情報を伝えるべきではありません。例えば、フォームでは、必須フィールドを色(赤など)だけで示す付けることは絶対にしないでください。 代わりに(または同様に)、「必須」というラベルの付いたアスタリスクのようなものがより適切です。

色の使用色とそのコントラスト複数のラベルを参照してください。
1.4.2 音声コントロール (A) 3 秒以上再生される音声の場合は、音声や動画の再生と一時停止、および音量のミュートや調整を行うためのアクセス可能なコントロールを用意する必要があります。 動画プレーヤーのスタイル設定の基本に示すように、ネイティブの <button> を使用してアクセス可能なキーボードコントロールを提供します。
1.4.3 最低限のコントラスト (AA)

背景と前景のコンテンツの間の色のコントラストは、読みやすさを確実なものとするための最低限のレベルであるべきです。

  • テキストとその背景のコントラスト比は少なくとも 4.5:1 であるべきです。
  • 見出し(またはそれよりも大きい)テキストの比は、少なくとも 3:1 であるべきです。 大きいテキストは、少なくとも 18 ポイント、または 14 ポイントの太字として定義されます。
色のコントラスト色とそのコントラストを参照してください。
1.4.4 テキストのサイズ変更 (AA) テキストサイズが倍になったときに、ページが読みやすく使えるべきです。 つまり、デザインはレスポンシブであるべきで、テキストサイズを大きくしてもコンテンツにアクセス可能であることを意味します。
1.4.5 テキストの画像 (AA) テキストが仕事をするようなコンテンツを提示するために画像を使用してはいけません。 例えば、画像がほとんどテキスト形式の場合、画像だけでなくテキストも使用して表現できます。
1.4.6 強化されたコントラスト (AAA)

これは、基準 1.4.3 に従い、その上に構築されます。

  • テキストとその背景のコントラスト比は少なくとも 7:1 であるべきです。
  • 見出し(またはそれよりも大きい)テキストの比は少なくとも 4.5:1 であるべきです。 大きいテキストは、少なくとも 18 ポイント、または 14 ポイントの太字として定義されます。
色とそのコントラストを参照してください。
1.4.7 背景音が小さいか無い (AAA) 話し言葉を主な特徴とする録音済みの音声記録は、背景の雑音を最小限に抑えるようにしてください。そうするとコンテンツが理解しやすくなります。
1.4.8 視覚的表現 (AAA)

テキストコンテンツの表現では、次のことが当てはまります。

  • 前景色と背景色は、ユーザーが選択できるようにするべきです。
  • テキストブロックは、読みやすくするために、80 文字(またはグリフ)以下の幅にしてください。
  • テキストは、両端揃えにするべきではありません(例えば、text-align: justify;)。
  • 行の高さは、段落内ではテキストサイズの 1.5 倍以上(例えば、 line-height: 1.5;)、段落間ではテキストサイズの 2.25 倍以上(例えば、 padding: 2.25rem;)にするするべきです。
  • テキストサイズが2倍になったときに、コンテンツのスクロールが必要になるべきではありません。
1.4.9 テキストの画像(例外なし) (AAA) テキストは、純粋に装飾である(すなわち、それがいかなる内容も伝えない)か、または他の方法で提示することができない限り、画像の一部として提示するべきではありません。
1.4.10 リフロー (AA) 2.1 で追加(英語)
  • 左書きの言語(英語など)や右書きの言語(アラビア語など)では、水平スクロールをしないでください。
  • 縦書きの言語(日本語など)では、垂直スクロールをしないでください。
  • 使用法や意味のために 2 次元レイアウトを必要とするコンテンツの部分を除きます(大きなデータ表など)。
リフローを理解する(英語)
1.4.11 テキスト以外のコントラスト (AA) 2.1 で追加(英語) ユーザーインターフェイスコンポーネントとグラフィックオブジェクトの最低限のカラーコントラスト比は 3:1 です。 テキスト以外のコントラストを理解する(英語)
1.4.12 テキストの間隔 (AA) 2.1 で追加(英語)

次のスタイルを適用しても、コンテンツや機能が失われることはありません。

  • 行の高さ(行間)をフォントサイズの 1.5 倍以上にします。
  • 後続の段落との間隔をフォントサイズの 2 倍以上にします。
  • 文字間隔(トラッキング)をフォントサイズの 0.12 倍以上にします。
  • 単語間隔をフォントサイズの 0.16 倍以上にします。
テキストの間隔を理解する(英語)
1.4.13 ホバーまたはフォーカスにおけるコンテンツ (AA) 2.1 で追加(英語)

追加のコンテンツがホバーやキーボードフォーカスに連動して現れたり消えたりします。 この達成基準では、満たす必要がある次の 3 つの条件を指定します。

  • 却下可能(閉じたり取り除いたりすることが可能)。
  • ホバーリング可能(追加のコンテンツは、ポインターが上にあるときは消えません)。
  • 永続的(追加のコンテンツは、ユーザーの操作なしでは消えません)。
ホバーまたはフォーカスにおけるコンテンツを理解する(英語)

関連情報