要約
可能な限り文字画像の使用は避けますが、使用が避けられない場合は、そのテキストを認識可能で支援技術で利用できるようにしてください。
テクニック
-
alt
属性で画像テキストを提供します。[[WCAG-1.1.1]] -
最低限のコントラストを確保します。[[WCAG-1.4.3]]
例
解説
出版物では、プレゼンテーションを確実にするためにテキストの画像が使用されることがあります。たとえば、著者が埋め込むことができない特殊なフォントが見出しに必要になったり、テキストが画像でしか再現できない方法で様式化されていたりする場合があります。
ベストプラクティスとしては、可能な限り CSS を使用してテキストのスタイルを設定することです。これにより、ユーザーは自分のニーズに合わせてフォントのプロパティを変更できます。また、ユーザーがハイコントラストの読書モードなどのテーマを適用したときに、画像テキストによって効果が損なわれることもなくなります。
テキスト画像を使用する必要がある場合は、 alt
属性で画像の全テキストを提供します。
テキスト画像を使用しても、テキストが WCAG のコントラスト要件を満たさなくてよくなるわけではないことに注意してください。達成基準 1.4.3を満たすには、前景色と背景色が 4.5 : 1 の最小コントラスト要件を満たす必要があります。
関連リンク
- DIAGRAM — EPUB で拡張説明を作成するためのベストプラクティス
- MDN — <img>: 画像埋め込み要素
- HTML —
img
要素