00:05
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart8「『ガイドライン1.4 判別可能』とその達成基準 中編」です。
みあ：前回はガイドライン1.4の内容と、5つあるレベルA、AAの達成基準のうち、
1つ目にあたる1.4.1「色の使用」について、詳しく解説しました。
今回は引き続き、ガイドライン1.4の達成基準の中から、2つ目、3つ目を解説します。
ゆみこ：はい、お願いします。
さっそくですが、2つ目はどんな達成基準なのでしょうか?
音声の制御
みあ：はい。2つ目の達成基準は、1.4.2「音声の制御」です。
WCAG 2.0 解説書には、「ウェブページ上にある音声が自動的に再生され、その音声が3秒より長く続く場合、
その音声を一時停止もしくは停止するメカニズム、又はシステム全体の音量レベルに影響を与えずに音量レベルを調整できるメカニズムのいずれかを提供する」と書かれています。
これは、レベルAの達成基準です。
ゆみこ：1.4.2「音声の制御」に関しては、第9回の「ウェブアクセシビリティと音声の関係」でも触れましたね。
スクリーンリーダーと他の音声が同時に再生されると、スクリーンリーダーユーザーは、サイト内での位置把握や操作が困難になってしまう可能性があるんですよね。
そのため、音声コンテンツが自動再生され、それが3秒より長い場合は、その音声を一時停止させたり、停止させたりする仕組みの提供が必要だ、という基準だったと思います。
みあ：はい、その通りです。
また、スクリーンリーダーの音量がパソコンやスマートフォン全体の音量設定と連動している場合、スクリーンリーダーの音量も音声コンテンツの音量も一緒に上がったり下がったりすることになる、というお話も第9回でしましたね。
ゆみこ：はい、そうでしたね。
そういった場合は、システムの音量を下げると、スクリーンリーダーの音声も小さくなってしまうわけですから、スクリーンリーダーの音声はしっかり聞きたいけれど、サイトの音楽は少し小さくしたい、といった調整ができないんですよね。
そうならないために、システム全体の音量に影響を与えず、音声コンテンツの音量だけを調整できる仕組みの提供も必要だったと思います。
みあ：はい、その通りです。
まとめると、ウェブページ上の音声コンテンツが自動再生され、かつ再生時間が3秒より長く続く場合は、その音声を一時停止させたり停止させたりする仕組みや、システム全体の音量に影響を与えずに、音声コンテンツの音量だけを調整できる仕組みの提供が必要となるんです。
ゆみこ：確か、音声が自動再生されない場合や、自動再生されても3秒以内に停止するものであれば、こういった仕組みは必要ないんでしたよね。
みあ：達成基準ではそうなっています。
ただ、音声が自動再生されると、スクリーンリーダーユーザーは停止ボタンなどを探しにくくなってしまいます。
ですから、基本的に音声の自動再生は避けた方がよいとされています。
ユーザーが音声再生のアクションを起こしたら再生されるというのが理想ですね。
ゆみこ：うーん、一番よいのは音声を自動再生させず、ユーザーの操作に応じて再生されるようにする方法ということですね。
もし自動再生させるのなら、音声を3秒以内に自動停止するようにしたり、一時停止や停止、音量調整を行える仕組みを提供したりする必要があるんですね。
みあ：はい、その通りです。また、こういった配慮や仕組みは、注意力が散漫になりがちなユーザーにとっても役立つと言われています。
ゆみこ：うん、確かに。音声が流れていると気が散ってしまうといったユーザーも、こういった仕組みがあれば音声を自分で制御して他のコンテンツに集中できますよね。
みあ：そうなんです。それでは次は3つ目の達成基準に行きましょう。
コントラストの重要性
みあ：3つ目は、達成基準1.4.3「コントラスト（最低限）」です。
こちらはレベルAAの達成基準ですね。
WCAG 2.0解説書では、「テキスト及び文字画像の視覚的提示に、少なくとも4.5:1のコントラスト比がある」と書かれています。
ゆみこ：コントラスト比という言葉は、今までに何度か登場していますが、どういったものかいまいちよくわかっていません。改めて教えてください。
みあ：はい、もちろんです。ここで言うコントラスト比とは、背景色と文字色の相対的な明るさの差を数値で表したもののことです。
1:1から21:1の範囲で表されるのですが、最小値の1:1は、背景色と文字色が同じで全く区別がつかない状態を指します。
最大値の21:1は、文字が黒で背景が白のように最もコントラストが強い状態です。
ゆみこ：なるほど。21:1に近づくほどコントラストが強いんですね。
そして、達成基準1.4.3では、テキストや文字画像の背景と文字において、コントラスト比4.5:1以上が求められているということですね。
みあ：はい、そうなります。コントラスト比を自分で計算するのは大変なので、自動で算出してくれるツールを使用するのがおすすめです。
ブラウザの拡張機能や、デザインツールのプラグインとして使用できるものなどがさまざまあります。
ゆみこ：うーん、そうなんですね。ひとつ気になったのですが、どうして4.5:1以上と決まっているのでしょうか。
みあ：はい。それは、4.5:1以上のコントラスト比を確保することで、色覚特性のあるユーザーや中度のロービジョンのユーザーが、支援技術を使用せずテキストを読めるようになるとされているからです。
論理的根拠はWCAG 2.0 解説書の「達成基準1.4.3を理解する」のページで解説されています。
ゆみこ：なるほど、そのような根拠からコントラスト比4.5:1以上と定められているんですね
みあ：はい、そうなんです。それから、この達成基準には例外が存在します。
それは「大きな文字」、「付随的」、「ロゴタイプ」の3つです。
ゆみこ：例外があるんですね。ひとつずつ教えてください。
みあ：はい、まず大きな文字です。サイズの大きなテキストや文字画像はコントラスト比3:1以上ならよいとされています。
大きさの基準は、日本語の全角文字の場合、22ポイントまたは18ポイントの太字とされています。
これをピクセルにすると、30ピクセルもしくは24ピクセルの太字くらいとされます。
ただ、最近はデバイスも多種多様になっており、どのように表示されるか全てを確認するのは困難です。
そのため、大きめの文字であったとしても、できるだけコントラスト比4.5:1以上にするのがよいのではないかという意見もあります。
ゆみこ：確かに、デバイスによって表示の仕方は変わりますから、4.5対1以上にしておくのが無難かもしれませんね。
みあ：2つ目は、付随的です。
これは「非アクティブなインターフェースコンポーネント」、「純粋な装飾」、「誰もが視覚的に確認できないもの」、「重要な視覚的コンテンツを含む写真の一部分」などのことです。
ユーザーインターフェースコンポーネントとは、フォームやリンク、ボタンなどのことで、非アクティブとは使用できない状況ということです。
つまり、ボタンやリンクが操作できない間は、そのテキストにコントラスト比4.5:1は適用されません。
純粋な装飾とは、情報を伝えるためでなく、装飾目的で使用されているテキストや文字画像のことです。
こちらも情報を伝える目的ではないので、コントラスト比4.5:1は適用されません。
また、誰もが視覚的に確認できないものというのは、晴眼者や視覚障害者など関係なく、誰にも見えないもののことです。
こういったものは見えないままでよいので、コントラスト比に配慮する必要はありません。
そして、重要な視覚的コンテンツを含む写真の一部分というのは、例えば、街の風景を紹介する写真に写り込んでいる看板の文字などのことを指します。
重要なのは、街の風景であり、その看板の文字ひとつひとつではないので、コントラスト比に配慮する必要はありません。
ゆみこ：付随的と一言で言ってもさまざまあるんですね。
装飾的なものや写真の一部といったものは、それが重要な情報を含んでいるかいないかで判断する必要がありそうですね。
みあ：そうですね。基本的に重要な情報を含んでいないものが付随的として扱われます。
そして最後がロゴタイプです。
ロゴやブランド名の一部である文字の場合、デザインやコーポレートカラーなどの要素が絡んできます。
これが変化すると、本質的な意味合いが変わる可能性があるため、例外とされています。
ゆみこ：うーん、ロゴは文字色も含めて完成されているので、ちょっとの変更でも意味合いが変わる可能性がありますよね。
例外とされているのも納得です。
みあ：以上が達成基準1.4.3の例外事項です。
こういった部分以外のテキストや文字画像はコントラスト比4.5:1以上が求められるんですね。
達成基準のまとめ
ゆみこ：達成基準1.4.2「音声の制御」、1.4.3「コントラスト（最低限）」について詳しく知ることができました。
残り2つの達成基準は次回解説してもらいたいと思います。
本日のテーマはWCAG 2.0 解説シリーズPart8「『ガイドライン1.4 判別可能』とその達成基準 中編」でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
