このページの本文へ移動

G14:色の違いで伝えている情報をテキストでも入手可能にする

出典:WAIC. “ G14: 色の違いで伝えている情報をテキストでも入手可能にする新しいウィンドウを開きます ” WCAG 2.0 達成方法集(参照2024年7月1日)

概要

G14は、色の違いを用いて情報を伝える場合に、その情報をテキストでも提供することを求めています。これは、色覚障害を持つユーザーやモノクロ表示のデバイスを使用しているユーザーにとっても、情報を理解しやすくするためのガイドラインです。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用(対象)

こちらは、次の達成基準に関連する達成方法です。

実践的な方法

見出しや強調に色を使用する場合

色を用いて特定の語句やフレーズを強調する場合、色に依存しない追加の手がかりを提供する必要があります。たとえば、赤色で重要な情報を強調している場合、同時にその部分を太字にしたり、下線を引いたりすることが推奨されます。また、「重要」や「注意」といったテキストを追加することも有効です。これにより、色を識別できないユーザーや、画面の色設定を変更しているユーザーにも、情報の重要性を正確に伝えることができます。

エラーメッセージに色を使用する場合

フォームのエラーメッセージを赤色のテキストで表示する場合、そのエラーメッセージが色だけに依存していないことを確認する必要があります。具体的には、エラーを示すアイコンを追加したり、エラーメッセージを明確なテキストで表現することが求められます。たとえば、「エラー: ユーザー名は必須です」といった形で、エラー内容を明示するテキストを追加します。また、視覚的にエラーメッセージを区別するために、ボーダーを赤くしたり、背景色を変更するなどの工夫も有効です。

グラフやチャートで色を使用する場合

グラフやチャートでデータポイントを区別するために色を使用する場合、色に依存しない追加の手がかりを提供することが必要です。たとえば、異なる色のデータポイントに対して、ラベルを追加したり、異なる形状やパターンを使用して区別します。これにより、色覚障害を持つユーザーやモノクロ表示のデバイスを使用しているユーザーにも、グラフやチャートの情報を正確に伝えることができます。色と一緒に形状やパターンを併用することで、視覚的に情報を識別しやすくします。

まとめ

G14は、色の違いで伝えている情報をテキストでも提供することで、色覚障害を持つユーザーや、モノクロ表示のデバイスを使用しているユーザーにも配慮することを目的としています。色の使用に依存せず、追加の手がかりや視覚的な変更を加えることで、すべてのユーザーが情報を正確に理解できるようになります。このガイドラインを守ることで、より多くのユーザーにとって使いやすいウェブサイトを提供することができます。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ