文字画像

解説

テキストデータはもっともアクセシブルな情報の形式です。テキストデータであれば、スクリーンリーダでの読み上げ、スムーズな拡大縮小、コピーアンドペースト、機械翻訳などさまざまな可用性を発揮します。文字を画像にするということは、このテキストデータの便利さを現じてしまうことなので、なるべく文字画像は用いないことが推奨されています。

本達成基準では、CSSによる修飾や、フォントの選択で、意図した視覚提示が可能であれば、極力テキストを用いることを求めています。

Understanding WCAG2.0では、ロゴ、書体サンプルなどを「視覚的な効果が必要不可欠」と定義していて、これらは文字画像を使って良いとしています。しかし、たとえば「どんな環境でもアンチエイリアスをかけた表示をしたい」「この見出しはどうしてもこのフォントで表現したい」なども、「視覚的な効果をCSSで表現できない」としてよいようです。

訴求効果のためのバナー画像を置く場合(リンク)、特定の見出しを特に目立たせたい場合(構造)など、重要な場所で使うことが多い手法ですので、文字画像を使う場合は、altを忘れないようにしましょう。

JavaScriptやCSSなどで、画像からaltを抽出し、画像と置き換える仕組みを提供する達成方法"C30: テキストを文字画像に置き換えるために CSS を利用し、切り替えのためのユーザインタフェースコントロールを提供する"もありますが、そういったUIが、利用できるべき利用者に対して、わかりやすいことは少ないので、おすすめしません。

原則 知覚可能 情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
ガイドライン 判別可能 コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。
達成基準 文字画像
(1.4.5 AA)
使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキストが情報伝達に用いられている。

達成方法集のURL