【質問】画像を使わずに、テキストにしなければいけないの？

画像を使用する際に留意すべきこと

『JIS X 8341-3:2016』や『WCAG 2.0』には、次のような達成基準があります。

1.1.1 非テキストコンテンツの達成基準
利用者に提示される全ての非テキストコンテンツには，同等の目的を果たす代替テキストが提供されている。ただし，次の場合は除く（レベル A）。
（略）
f) 装飾，整形及び非表示 非テキストコンテンツが，純粋な装飾である場合，見た目の整形のためだけに用いられている場合，又は利用者に提供されるものではない場合，その非テキストコンテンツは，支援技術によって無視されるように実装されている。

JIS X 8341-3:2016 / WCAG 2.0「1.1 代替テキストのガイドライン」

例えば、HTMLのWebページの場合、画像を用いるときは<img>要素を用います。しかし、全盲などの視覚障害があるユーザーが使用しているスクリーンリーダー（画面読み上げソフト）や点字ディスプレイは、画像が提供している情報を機械的に抽出することはできません。そのため、alt属性を用いて、代替テキストを提供します。

画像に代替テキストを提供することによって、例えば次のようなことが可能になります。

• ブラウザが画像を表示するまでの間、代わりに代替テキストが表示される
• テキストブラウザなど、画像を表示できないブラウザでは、代わりに代替テキストが表示される
• スクリーンリーダーは、代替テキストを合成音声で読み上げる
• 点字ディスプレイは、代替テキストいを点字に変換する
• 検索クローラーは、代替テキストの文字列を情報として取得する

代替テキストは、alt属性以外でも提供することが可能です。例えば、グラフの画像に対しては、すぐ近くでデータテーブル（<table>要素）を用いて、グラフと同じデータを提供するという方法もあります。

また、同じ画像でも、装飾を目的にした画像は代替テキストを提供する必要がありません。そのような場合は、alt属性値を空（alt=""）にして、「支援技術によって無視されるように実装」します。

それでも、画像ではなくテキストにすることのメリットもある

とはいえ、画像よりもテキストのほうが、フレキシブルであり、よりアクセシブルであるのも事実です。『JIS X 8341-3:2016』や『WCAG 2.0』には、レベル AAで次のような達成基準があります。

1.4.5 文字画像の達成基準
使用している技術で意図した視覚的提示が可能である場合，文字画像ではなくテキストが情報伝達に用いられている。ただし，次に挙げる場合を除く（レベル AA）。
a) カスタマイズ可能 文字画像は，利用者の要求に応じた視覚的なカスタマイズができる。
b) 必要不可欠 テキストの特定の表現が，伝えようとする情報にとって必要不可欠である。

JIS X 8341-3:2016 / WCAG 2.0「1.4 判別可能のガイドライン」

最近はWebフォントも普及してきており、以前は画像にしないと表現が困難だったデザインも、テキストベースで可能になってきています。文字画像ではなくテキストを用いることのメリットとしては、次のようなことが挙げられます。

• ユーザーがブラウザの設定を変更して、テキストの文字サイズを好みの大きさ、書体、色に変えることができる
• Webページの表示速度を高速化できる
• コピー&ペーストができる
• 自動翻訳エンジンを利用して、多言語対応することが可能になる

文字を画像にするか、テキストにするかを決めるときは、こういったポイントもふまえて判断するとよいでしょう。