テキストサイズ変更の基準
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するユミコです。よろしくお願いします。
ミヤです。よろしくお願いします。
本日のテーマは、WCAG 2.0 解説シリーズパート9 ガイドライン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 解説書には、使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられていると書かれています。
こちらもレベルWAの達成基準となっています。
これは基本的には文字画像ではなくテキストを使うようにするという意味でしょうか?
はい、その通りです。
使用している技術、つまりここではHTMLやCSSのことですが、これらを使用して意図したデザインが再現可能である場合、文字画像ではなくテキストを使用しましょうという達成基準です。
以前もお話ししたと思いますが、テキストというのは様々な形に変換することができます。
音声やページに変換するだけでなく、文字サイズを大きくしたり、文字の色を変えたり、フォントを変えたりすることもできるんです。
そうやって、自身が使いやすいようにカスタマイズしているユーザーがたくさんいます。
ただ、文字を画像で提供してしまうと、そのようにカスタマイズするのが難しくなってしまいます。
そのため、この達成基準では、できる限りテキストとして提供することが求められているんです。
うーん、そうなんですね。ということは、どんな場合でも文字画像を使用してはいけないのでしょうか?
いえ、例外とされているものが2つあります。
1つ目はカスタマイズ可能な場合です。
2つ目は必要不可欠な場合です。
例外があるんですね。詳しく教えてください。
はい、まず1つ目のカスタマイズ可能な場合です。
これは、文字画像がユーザーの要求に応じて視覚的なカスタマイズができる場合、例外であるというものです。
視覚的なカスタマイズとは具体的にどんなものでしょうか?
フォントやサイズ、文字の色や背景色が設定・変更できることを指します。
なるほど。そのようにユーザーが自分で色を変えたり、フォントを変えたりできる文字画像は例外として使用しても良いのですね。
はい、そうです。
2つ目は必要不可欠な場合です。
これは、伝えようとする情報にとって、そのテキストのスタイルなどが必要不可欠であるときに当てはまる例外です。
コントラスト比の例外と少し似ていますね。ロゴタイプなどのことでしょうか?
はい、その通りです。
ロゴやブランド名の一部である文字の場合、それは必要不可欠なものだと考えられます。
なぜなら、これが変化すると本質的な意味合いが変わる可能性があるからです。
他にも、例えばフォントを販売しているページがあり、そこでフォントの見本が画像として提供されていたとします。
これは文字画像ですが、他のフォントに置き換えてしまうと商品の見本としての本来の目的が果たせなくなってしまいますから、必要不可欠なものとして例外に当たると考えられます。
うーん、なるほど。こういった必要不可欠なものは、変更してしまうと伝わる情報が変わってしまいますから、例外とされているんですね。
ウェブアクセシビリティの向上
そうなんです。そして、そういった例外以外のものは、HTMLでマークアップし、CSSでスタイルを整える必要があります。
そうすることで、フォントやサイズ、文字色、業界や配置などをユーザーが調節できるようになり、ロービジョンや独自障害のユーザーなど、テキストをカスタマイズしているユーザーにとって利用しやすいウェブコンテンツにすることができるんです。
そうなんですね。ここまでガイドライン1.4に対する達成基準5つを3回にわたって見てきましたが、ガイドライン1.4で重視されている支援技術なしでコンテンツ自体のウェブアクセシビリティを向上させるという部分がよくわかりました。
それは良かったです。細かい話が多かったと思うのですが、重要な部分なので少しずつでも意識してもらえればと思います。
はい、本日のテーマは、WCAG 2.0 解説シリーズパート9 ガイドライン1.4 判別可能とその達成基準 後編でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグチャコウェブラジオをつけて、ぜひSNS、XQ Twitterで投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
