Images of Text1.4.5 文字画像（レベルAA）
使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられている。
出典：WAIC. “
達成基準 1.4.5 を理解する
” WCAG 2.0 解説書（参照2024年6月1日）
概要
テキスト画像の使用を減らし、可能な限りCSSを利用してテキストを表現することを求めています。この基準は、ユーザーがテキストの大きさや色を自由に調整できるようにするために重要です。テキスト画像は、ユーザーが自分の好みに合わせて表示を調整することを難しくするため、アクセシビリティの観点から問題となります。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
課題に対する実践的な方法
テキスト表示の制御
テキストのスタイルやレイアウトを制御するために、CSSを使用します。具体的には、フォントサイズ、色、背景色、行間、文字間などのスタイルをCSSで指定します。これにより、ユーザーはブラウザの設定や独自のスタイルシートを使用して、テキストの表示をカスタマイズできます。
文字画像の切り替え
文字画像を使用する代わりに、CSSを利用してテキストをスタイル化し、必要に応じて画像とテキストの切り替えを行うユーザインタフェースコントロールを提供します。例えば、CSSで装飾されたテキストを用意し、JavaScriptを使用して画像とテキストの表示を切り替えるスイッチを実装します。これにより、ユーザーはテキスト表示を選択でき、アクセシビリティが向上します。
文字画像の切り替え
情報と構造を表現から分離することで、異なる提示方法に対応できるようにします。例えば、HTMLで情報の構造を定義し、CSSでその視覚的な表現を制御します。この方法により、同じ情報を異なるデバイスやユーザーのニーズに応じて適切に表示できます。
まとめ
達成基準 1.4.5の実践は、テキストの視覚的な表示を改善し、ユーザーが自身のニーズに合わせてコンテンツを調整できるようにすることに焦点を当てています。CSSを活用してテキストの表示をコントロールし、情報と構造を分離することで、アクセシビリティが向上します。また、テキスト画像の使用を極力避けることで、ユーザーがフォントサイズや色を自由に調整できるようになり、より多くのユーザーがウェブコンテンツを利用しやすくなります。
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のサイト内にある英語版であることにご注意ください。