テキストサイズ変更の基準
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart9「『ガイドライン1.4 判別可能』とその達成基準 後編」です。
みあ：前回はガイドライン1.4の達成基準のうち、1.4.2「音声の制御」と1.4.3「コントラスト（最低限）」について解説しましたね。
今回は最後の2つ、4つ目と5つ目の達成基準を見ていきたいと思います。
ゆみこ：はい、それではさっそく4つ目の解説をお願いします。
みあ：はい。4つ目の達成基準は、1.4.4「テキストのサイズ変更」です。
WCAG 2.0 解説書には、「キャプション及び文字画像を除き、テキストは、コンテンツ又は機能を損なうことなく、支援技術なしで200％までサイズ変更できる」と書かれています。
この達成基準はレベルAAとなっています。
ゆみこ：キャプションについては、以前やりましたね。
たしか、動画などのメディアと一緒に提供する、会話や効果音を文字に起こした字幕のようなものでしたよね。
このガイドラインでは、そういったキャプションや文字画像以外のテキストについて、コンテンツや機能を損なわずに200%まで拡大できるようにすることが求められているんですね。
みあ：はい、その通りです。
ゆみこ：画面を拡大するというと、拡大鏡などの支援技術を使用するイメージがあります。
ですが、この達成基準では、そういったものを使用せずに拡大できるようにする必要があるんですね。
支援技術を使わないで拡大できるようにするには、どのような方法があるんでしょうか。
みあ：一番シンプルなのは、ブラウザの標準機能であるズーム機能を使えるようにする方法です。
別の方法としては、ウェブサイト独自の文字サイズ調節機能を実装するというのがあります。
文字サイズ大・中・小といったボタンを見たことはありませんか。
ゆみこ：はい、あります。あれを用意するのも方法のひとつなんですね。
みあ：はい。ただ、最近のブラウザは標準でズーム機能が搭載されていることがほとんどです。
さらに、ユーザーは自分の見やすい文字サイズや行間をすでに設定していることが多いので、ウェブサイト側で調節機能を用意するよりも、ユーザーが自由に調節できるようにしておく方がよいと考えられます。
ゆみこ：そうなんですね。ところで、最初に出てきた「コンテンツや機能を損なうことなく」というのは具体的にどういうことなんでしょうか。
みあ：例えば、拡大した時によくある問題として、テキストが他のコンテンツと重なってしまったり、ボタンがページからはみ出してクリックできなくなったり、
文章が途中で切れてしまったりすることがあるんです。そういった状態がコンテンツや機能が損なわれている状態ですね。
ゆみこ：あー、たしかに。たまにズームすると文字が重なって読めなくなるようなウェブサイトがありますよね。そういうことが発生しないようにする必要があるということですね。
みあ：そうなんです。この達成基準への対応方法としては、レスポンシブデザインを採用したり、ウェブサイトの制作時にズーム機能を制限しないようにしたりすることが重要です。
ゆみこ：なるほど。ブラウザの標準的なズーム機能を活かしつつ、200%まで拡大しても崩れないウェブサイト設計にすることが大切なんですね。
文字画像の使用
みあ：はい、その通りです。それでは、次は5つ目の達成基準、1.4.5「文字画像」についてやっていきましょう。
WCAG 2.0 解説書には、「使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられている」と書かれています。
こちらもレベルAAの達成基準となっています。
ゆみこ：これは基本的には文字画像ではなくテキストを使うようにするという意味でしょうか?
みあ：はい、その通りです。
使用している技術、つまりここではHTMLやCSSのことですが、これらを使用して意図したデザインが再現可能である場合、文字画像ではなくテキストを使用しましょうという達成基準です。
以前もお話ししたと思いますが、テキストというのはさまざまな形に変換することができます。
音声や点字に変換するだけでなく、文字サイズを大きくしたり、文字の色を変えたり、フォントを変えたりすることもできるんです。
そうやって、自身が使いやすいようにカスタマイズしているユーザーがたくさんいます。
ただ、文字を画像で提供してしまうと、そのようにカスタマイズするのが難しくなってしまいます。
そのため、この達成基準では、できる限りテキストとして提供することが求められているんです。
ゆみこ：うーん、そうなんですね。ということは、どんな場合でも文字画像を使用してはいけないのでしょうか?
みあ：いえ、例外とされているものが2つあります。
1つ目はカスタマイズ可能な場合です。
2つ目は必要不可欠な場合です。
ゆみこ：例外があるんですね。詳しく教えてください。
はい、まず1つ目のカスタマイズ可能な場合です。
これは、文字画像がユーザーの要求に応じて視覚的なカスタマイズができる場合、例外であるというものです。
ゆみこ：視覚的なカスタマイズとは具体的にどんなものでしょうか?
みあ：フォントやサイズ、文字の色や背景色が設定・変更できることを指します。
ゆみこ：なるほど。そのようにユーザーが自分で色を変えたり、フォントを変えたりできる文字画像は例外として使用してもよいのですね。
みあ：はい、そうです。
2つ目は必要不可欠な場合です。
これは、伝えようとする情報にとって、そのテキストのスタイルなどが必要不可欠であるときに当てはまる例外です。
ゆみこ：コントラスト比の例外と少し似ていますね。ロゴタイプなどのことでしょうか?
みあ：はい、その通りです。
ロゴやブランド名の一部である文字の場合、それは必要不可欠なものだと考えられます。
なぜなら、これが変化すると本質的な意味合いが変わる可能性があるからです。
他にも、例えばフォントを販売しているページがあり、そこでフォントの見本が画像として提供されていたとします。
これは文字画像ですが、他のフォントに置き換えてしまうと商品の見本としての本来の目的が果たせなくなってしまいますから、必要不可欠なものとして例外に当たると考えられます。
ゆみこ：うーん、なるほど。こういった必要不可欠なものは、変更してしまうと伝わる情報が変わってしまいますから、例外とされているんですね。
ウェブアクセシビリティの向上
みあ：そうなんです。そして、そういった例外以外のものは、HTMLでマークアップし、CSSでスタイルを整える必要があります。
そうすることで、フォントやサイズ、文字色、行間や配置などをユーザーが調節できるようになり、ロービジョンや読字障害のユーザーなど、テキストをカスタマイズしているユーザーにとって利用しやすいウェブコンテンツにすることができるんです。
ゆみこ：そうなんですね。ここまでガイドライン1.4に関する達成基準5つを3回にわたって見てきましたが、ガイドライン1.4で重視されている支援技術なしでコンテンツ自体のウェブアクセシビリティを向上させるという部分がよくわかりました。
みあ：それはよかったです。細かい話が多かったと思うのですが、重要な部分なので少しずつでも意識してもらえればと思います。
ゆみこ：はい、本日のテーマは、WCAG 2.0 解説シリーズPart9「『ガイドライン1.4 判別可能』とその達成基準 後編」でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
