WCAG 2.0ガイドラインの紹介
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart7「『ガイドライン1.4 判別可能』とその達成基準 前編」です。
みあ：ガイドライン1.4は、4つの原則の1つ目「知覚可能」における最後のガイドラインです。
ここまでが視覚可能の範囲となりますので、最後もしっかり見ていきましょう。
ゆみこ：はい。早速ですが、このガイドラインはどんなものなんでしょうか?
みあ：はい。WCAG 2.0解説書では、「コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む」と書かれています。
ゆみこ：コンテンツをユーザーにとって見やすく聞きやすいものにすることを目的としているんですね。
今まで出てきたガイドラインの中では、比較的わかりやすいです。
ただ、最後の一文がよくわかりません。前景と背景を区別することとは何でしょうか?
みあ：これは、「最も重要なもの」と「付随するものや補助的なもの」を区別するという意味合いでとった方がわかりやすいと思います。
テキストや文字画像などの視覚的なコンテンツで言うと、文字が背景に埋もれておらず、しっかり読める状態を指します。
音声コンテンツで言うと、ナレーションなどの一番重要な部分とBGMといった補助的な部分がしっかり聞き分けられるようになっている状態ということですね。
ゆみこ：なるほど。そういう意味なんですね。
みあ：はい。そして、このガイドライン、実は他と少し違う部分があるんです。
他のガイドラインは、代替形式へ変換したり、別の方法で情報を提供することが重視されています。
ですが、このガイドラインは、元の形式のアクセシビリティ向上に焦点が当てられています。
支援技術がなくても、幅広いユーザーがコンテンツを利用できる状態にすることを重視しているんです。
ゆみこ：ここまで出てきたものは、代替形式で情報を利用できるようにするものが多かったですよね。
一方で、このガイドラインは、支援技術なしでも、様々なユーザーがコンテンツを利用できるようにすることを重視しているんですね。
そして、それを実現するためには、前景と背景を区別することが大切なんですね。
みあ：そうなんです。
色の使用に関する達成基準
ゆみこ：確かに文字色が薄くて、背景色に埋もれてしまったら見えにくいですよね。
また、音声の場合は、メインの音量が小さかったり、BGMが大きすぎたりすると、音声コンテンツの重要な部分が聞こえなくなってしまいます。
こういったコンテンツは、障害の有無や年齢、使用デバイスによって感じ方に違い方はあれど、様々なユーザーにとって使いにくくなってしまいそうですね。
みあ：そうですよね。ですから、そうならないように、このガイドラインの達成基準を満たす必要があるんです。
ゆみこ：達成基準には、どんなものがあるんでしょうか。
みあ：このガイドラインには、レベルAとAAに絞ると、5つの達成基準があります。
少し数が多いのと、内容が細かいものがあるので、今回はその中の1つ目である、達成基準1.4.1「色の使用」について詳しく見ていきましょう。
残りは、中編・後編で解説したいと思います。
ゆみこ：はい、わかりました。それでは、早速1つ目について教えてください。
みあ：はい。達成基準1.4.1「色の使用」はレベルAの達成基準です。
WCAG 2.0解説書で見ると「色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない」と書かれています。
つまり、情報を伝えたりする際に、色だけで伝えるのではなく、他の方法も併用しなければならないということです。
ゆみこ：うーん、1つ前にやった形や方向だけで示すのではなく、他の方法も併用するというのと似ていますね。
みあ：はい、基本的な考え方は同じですね。
よくある例として、リンクを色の違いだけで表示する、フォームの必須項目を赤枠で表示するなどがあります。
こういった色の使い方は、視覚特性のあるユーザーやモノクロディスプレイを使用しているユーザーには伝わりにくい情報となってしまいます。
ゆみこ：なるほど。では、どのように対応すればいいのでしょうか?
みあ：色で得られる情報を、他の形でも得られるようにすることが重要です。
文字色の違いを表すために、太字や下線を使う、色の違いで伝えている情報をテキストでも説明する、といった感じですね。
例えば、リンクなら青文字にするだけでなく、下線を表示すると、色が判別できない状況でもリンクだとわかりやすくなります。
フォームの必須項目であれば、赤枠で表示するだけでなく、必須項目の項目名に米印などの記号を付けておき、さらにフォームの上に「米印は必須項目です」といったテキストを表示しておくといった方法があります。
ゆみこ：うーん、確かに、これなら色の違いがわからない状況でもリンクだと判別できますし、必須項目も見分けることができますね。
みあ：そうなんです。もう一つ別の例を考えてみましょう。
営業成績を示す縦棒グラフがあるとき、山田さんの売り上げを赤色、林さんの売り上げを青色で表示する、というように色分けするのはよく見かけますよね。
ゆみこ：はい。色分けすると一目でわかりやすくなりますよね。
みあ：確かに色分けはわかりやすくするための有効な手段です。ですが、色だけに頼ってしまうと、実は情報が伝わりにくくなることがあるんです。
例えば、カラーの資料を白黒印刷したときに、すべての色が似たような濃さになってしまって、区別がつかなくなったという経験はありませんか?
ゆみこ：あー、確かにあります。
みあ：ありますよね。実はこれ、印刷したときにだけ起こる問題ではないんです。
色覚特性があるユーザーや、モノクロディスプレイを使用しているユーザーも、同じような状況で不便を抱えている可能性があります。
ゆみこ：うーん、なるほど。色だけで情報を伝えようとすると、状況によっては正確に伝わらない可能性があるということですね。それでは、この場合はどうすればよいのでしょうか?
みあ：対策の一つに、色とパターンを併用するというものがあります。
パターンというのは、いわゆる柄や模様のことです。
例えば、山田さんの売り上げは赤色の水玉模様、林さんの売り上げは青色の縞模様というようにグラフにパターンを組み合わせるんです。
そうすれば、色が判別しにくい状況でも、模様で区別することができます。
ゆみこ：うーん、色だけでなく、パターンでも情報を伝えることが大切なんですね。
みあ：はい、そうなんです。ただ、先ほどお伝えした通り、色分けは、分かりやすくするための有効な手段の一つです。
そして、この達成基準は色の使用を禁止しているわけではありません。
次回予告とまとめ
みあ：色だけでなく、他の要素をうまく併用し、さまざまな人に伝わりやすいコンテンツにしていくことが大切です。
ゆみこ：はい、では続きは次回にお話ししていきます。
本日のテーマは、WCAG 2.0 解説シリーズPart7「『ガイドライン1.4 判別可能』とその達成基準 前編」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
