要約

可能な限り文字画像の使用は避けますが、使用が避けられない場合は、そのテキストが認識でき、支援技術で利用できるようにしてください。

テクニック

例

例 — 画像の見出し

alt属性は画像内のテキストを提供します。

<h2><img src="images/xl-hd.jpg" alt="Canto XL"/></h2>
例 — 画像入力ボタン

input要素のalt属性は、画像ボタンのテキストのラベルを提供します。

<input
    type="image"
    name="submit"
    src="enter.jpg"
    alt="Enter to Win!"/>

解説

出版物では、プレゼンテーションを確実にするためにテキストの画像が使用されることがあります。たとえば、コンテンツ製作者が埋め込めない特殊なフォントが見出しに必要になったり、テキストが画像でしか再現できない方法で飾り付けされていたりする場合があります。

ベストプラクティスとしては、可能な限り CSS を使用してテキストのスタイルを設定することです。これにより、ユーザーは自分のニーズに合わせてフォントのプロパティを変更できます。また、ユーザーがハイコントラストの読書モードなどのテーマを適用したときに、画像テキストによって効果が損なわれることもなくなります。

テキスト画像を使用する必要がある場合は、 alt属性で画像の全テキストを提供します。

テキスト画像を使用しても、テキストが WCAG のコントラスト要件を満たさなくてよくなるわけではないことに注意してください。達成基準 1.4.3を満たすには、前景色と背景色が 4.5 : 1 の最小コントラスト要件を満たす必要があります。

関連リンク