判断可能のガイドライン
1.4.1色の使用の達成基準（レベルA）
色だけで情報を伝えない
この達成基準は、色の違いを通じて伝えられている情報を、すべての利用者がアクセス可能にすることを目的としています。色に依存した情報は、模様、形状、テキストなど他の視覚的手段を通じても提供する必要があります。これにより、すべての利用者が必要な情報を得ることができます。
実践すべきこと
WCAG 2.0
色依存の避ける
- 情報伝達に色だけを用いることを避け、他の手段も併用する。
運用者への注意
明確な情報提供
- 「赤いテキストは必須項目」といった色のみで情報を提供するのではなく、色以外の方法で情報を伝える。
開発者への注意
代替手段の提供
- 色を情報の伝達手段として使用する場合は、テキストラベルやアイコンといった色以外の方法も提供する。
1.4.2音声の制御の達成基準（レベルA）『非干渉』
自動音声再生を避ける
この達成基準は、スクリーンリーダーなどの支援技術を使用している利用者に対して、他の音声が同時に再生されることによる聞き取り困難を防ぐことを目的としています。利用者が背景音をオフにできる機能や、必要に応じて音量をゼロに設定できる機能を提供することが重要です。
実践すべきこと
WCAG 2.0
自動再生の防止
- 自動的に音声や音楽が再生されないようにし、利用者が操作を行うことでのみ再生が開始される設計を心がける。
同時再生の回避
- 複数の音声や動画が同時に再生されないように設定する。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツにおいて、自動再生する音声や音楽がないかを定期的にチェックする。
開発者への注意
ユーザーインターフェイスの設計
- 音声や音楽を自動再生するのではなく、利用者が明示的に再生を開始できるような設計をする。
1.4.3コントラスト（最低限レベル）の達成基準（レベルAA）
テキストと背景のコントラスト比を高めて視認性を向上させる
この達成基準は、支援技術を使用しない視覚障害の利用者もテキストを読めるように、テキストとその背景との間に十分なコントラストを確保することを目的としています。適切なコントラスト比により、光の反射が多い環境や画面の明るさが不十分な場合でも、テキストをはっきりと識別できるようになります。
実践すべきこと
WCAG 2.0
コントラスト比の確保
- すべてのテキスト（画像内のテキストも含む）と背景色の間には、最低でも4.5:1のコントラスト比を確保する。
- テキストフィールドのプレースホルダーもコントラスト比の達成基準の対象となる。
運用者への注意
色設定の遵守
- 提供された色設定を守り、利用者による独自色の使用を避けるようにする。
- コントラスト比を確認する場合、モニターによって値が変わることがあるので専用のツールを使用して確認する。
開発者への注意
コントラスト比の測定
- コントラスト比を確認するためには、専用のツールやチェッカーを使用し、適切なコントラストが確保されていることを確認する。
1.4.4テキストのサイズ変更の達成基準（レベルAA）
テキストは200%まで拡大可能で、情報を損なわずに理解できるようにする
この達成基準は、支援技術を使用していない視覚障害の利用者がテキストを拡大しても閲覧を保証することを目的としています。
実践すべきこと
WCAG 2.0
主要なブラウザは、ズーム機能で文字サイズを200%まで拡大できるため、基本的にコンテンツの閲覧に支障が生じることはないので、とくにコンテンツ側は何もしなくてもよいと判断できる場合もあります。
テキスト拡大のサポート
- テキストのサイズは、ブラウザやその他のツールを使用して200%まで拡大できるようにする。
- 拡大しても情報が損なわれず、拡大前と同様にコンテンツの内容を理解できることが重要。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツにおいて、テキスト拡大時に情報の損失がないかを定期的にチェックする。
開発者への注意
適切なマークアップの使用
- テキストが200%まで拡大しても内容を正確に伝えられるよう、適切なHTML/CSSの使用を心がける。
1.4.5文字画像の達成基準（レベルAA）
可能な限り、文字情報は画像ではなくテキストで提供する
この達成基準は、すべての利用者が文字情報に容易にアクセスできるようにすることを目的としています。テキスト形式で提供される情報は、利用者のニーズに応じて拡大表示やコントラスト調整が可能であり、読み上げや異なる言語への翻訳が容易になります。
実践すべきこと
WCAG 2.0
テキストの直接提供
- 文字情報は、可能な限りテキスト形式で提供する。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツにおいて、提供されるコンテンツが適切にテキスト化されているかを定期的にチェックする。
- 必要に応じて画像テキストをテキスト形式に置き換える。
開発者への注意
CSSの利用
- 文字の画像化を避け、装飾にはCSSを活用することで、テキストの可読性やアクセシビリティを保持する。
1.4.6 コントラスト (高度)の達成基準（レベルAAA）
1.4.7 小さな背景音、又は背景音なしの達成基準（レベルAAA）
1.4.8 視覚的提示の達成基準（レベルAAA）
1.4.9 文字画像 (例外なし)の達成基準（レベルAAA）
1.4.10 リフローの達成基準（レベルAA）
400%拡大で予期せぬスクロールを表示させない
この達成基準は、利用者がズームや異なるデバイスでコンテンツにアクセスする際に、情報や機能を損なうことなく、縦または横の一方向のスクロールだけで読み進めることができるようにすることを目的としています。
ブラウザのズーム機能を使用してコンテンツを400%まで拡大しても、一貫した読みやすさを確保します。
実践すべきこと
WCAG 2.1
レスポンシブデザインの採用
- 画面サイズに適応するレスポンシブウェブデザインを採用する。
縦または横一方向のスクロール
- 縦または横の一方向にのみスクロールするようにデザインする。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツを400%まで拡大した場合、予期せぬスクロールが発生していないかを定期的にチェックする。
開発者への注意
レスポンシブデザインの採用
- コンテナサイズの変更に柔軟に対応できるよう、フレキシブルなレイアウトを実装する。
画像やメディアコンテンツのサイズ調整
- 画像やメディアコンテンツはビューポートに収まるよう適切にサイズ調整する。
テキストの折り返し
- テキストはビューポートの幅に合わせて適切に折り返すようにする。
1.4.11 非テキストのコントラストの達成基準（レベルAA）
重要なグラフや画像や操作に必要な要素はコントラスト比を高めて視認性を向上させる
この達成基準は、支援技術を使用しない視覚障害の利用者もテキストを読めるように、テキストとその背景との間に十分なコントラストを確保することを目的としています。
適切なコントラスト比により、光の反射が多い環境や画面の明るさが不十分な場合でも、重要な画像やコントロール要素をはっきりと識別できるようになります。
実践すべきこと
WCAG 2.1
コントラスト比の確保
- 重要なグラフや画像、操作に必要なボタンやフォーム要素などは隣接する色との間に少なくとも3:1のコントラスト比を確保する。
運用者への注意
色設定の遵守
- 提供された色設定を守り、利用者による独自色の使用を避けるようにする。
- コントラスト比を確認する場合、モニターによって値が変わることがあるので専用のツールを使用して確認する。
開発者への注意
コントラスト比の測定
- コントラスト比を確認するためには、専用のツールやチェッカーを使用し、適切なコントラストが確保されていることを確認する。
1.4.12 テキストの間隔の達成基準（レベルAA）
テキストスタイルを調整をしても表示が崩れないようにする
この達成基準は、テキストの読みやすさを向上させるために、行間、段落間、文字間、単語間の間隔などテキストスタイルを調整してもコンテンツの理解や機能を確保することを目的としています。
実践すべきこと
WCAG 2.1
適切なテキスト間隔の設定
- 少なくとも行間はフォントサイズの1.5倍、段落間隔はフォントサイズの2倍、文字間隔はフォントサイズの0.12倍、単語間隔はフォントサイズの0.16倍に設定する。
テキスト間隔の柔軟性確保
- 利用者がテキスト間隔を調整しても、コンテンツや機能が損なわれないようにする。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツのテキスト間隔を調整しても、機能が損なわれないかいないかを定期的にチェックする。
開発者への注意
テキスト間隔の設定
- line-height（行間）、margin（段落の間隔）、letter-spacing（文字間隔）、word-spacing（単語間隔）などを適宜設定する。
テキスト間隔の調整による影響の回避
- テキスト間隔を調整した場合、テキストは切り取られず、他のコンテンツと重ならないようにする。
1.4.13 ホバー又はフォーカスで表示されるコンテンツの達成基準（レベルAA）
ホバーやフォーカスによって表示されるコンテンツの表示非表示のタイミングを制御できるようにする
この達成基準は、ホバーやキーボードフォーカスと連動して現れたり消えたりする追加のコンテンツの表示非表示のタイミングを制御できるようにすることを目的としています。
実践すべきこと
WCAG 2.1
ホバーやフォーカスに連動するコンテンツの回避
- 利用者がコンテンツを自分のペースで利用できるよう、ホバーなどに連動されるコンテンツの設計を可能な限り避ける。
表示されるコンテンツは非表示にできる
- キーボードでも追加表示されるコンテンツを閉じることができるようにする。
表示されるコンテンツ上で移動できる
- 追加表示されるコンテンツにもホバーできるようにする。
表示されるコンテンツの表示を持続できる
- 追加表示されるコンテンツは意図的に非表示にするまで表示され続ける。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツにおいて、ホバーやフォーカスに連動するコンテンツがあるか定期的にチェックする。
開発者への注意
非表示メカニズム
- 追加表示されるコンテンツを非表示にするメカニズム（例：Escキーによる非表示）を提供する。
トリガー要素の位置関係
- 追加表示されるコンテンツがトリガーとなる要素に十分近く、かつ追加表示されるコンテンツ上でのホバーが可能な設計を心がける。
キーボード操作でのアクセス性
- 追加表示されるコンテンツの表示をトリガーする要素は、キーボード操作でもアクセス可能であることを確保する。