image-of-text
テキストは文字画像ではなく、実際のテキストにすることを推奨します
マークアップからテキストを含む可能性が高いとわかる画像(<input type="image">、または<text>を持つSVGを表示する<img>)について、そのテキストを実際のテキストにできるかどうかの確認を求めます。
適用範囲:マークアップからテキストを含む可能性が高いとわかる2種類の画像に、レンダリングされている場合に適用されます。
- <input type="image">。画像として描かれたボタンで、ほぼ必ずラベルを画像内のテキストとして持っています。
- ソースが、マークアップに<text>要素を含むSVGのデータURLである<img>。テキストは画像の一部として描画され、テキストのようにスタイルを変えることができません。
ほかの画像については確認を求めません。画像がテキストを含むかどうかはそのピクセルにあり、マークアップのスキャンでは見えないためです。<text>を持つインラインの<svg>は実際のテキストであり、対象外です(ACT 0va7u6)。確認を求める対象が見つからない場合は、passではなくnotApplicableを報告します。このルールが適用されるのはチェックが検出するものだけであり、そこに何も見つからなくても、すべて問題ないことは示されないためです。
期待される結果:実際のテキストにできるテキストは、文字画像ではなく、CSSでスタイルを付けた実際のテキストになっています。ただし、画像をユーザーの必要に応じてカスタマイズできる場合や、ロゴのようにテキストの特定の表現が必要不可欠な場合は除きます(WCAG 1.4.5)。
例
<input type="image" src="send-button.png" alt="Send">
画像として描かれたボタンは、ほぼ必ずラベルを画像内のテキストとして持っています。実際のテキストを持つ<button>でも同じことができます。
<img alt="WCAG Rocks" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='15'>WCAG Rocks</text></svg>">
SVGの<text>は画像の一部として描画され、テキストのようにスタイルを変えることができません。
<svg xmlns="http://www.w3.org/2000/svg"><text x="0" y="15">WCAG Rocks</text></svg>
インラインのSVGのテキストは実際のテキストです。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
IMAGE_BUTTON_TEXT_REVIEW
- レポートに示された画像ボタンを見つけ、その画像を確認してください。
- 画像がアイコンだけでなく、単語や文字を含んでいるか確認してください。
- 含んでいる場合は、そのテキストをCSSでスタイルを設定した実際のテキストにできるのか、その見た目が必須(ロゴ)なのかを判断してください。
満たす場合:画像にはテキストがなくアイコンや絵だけであるか、テキストはロゴであるか、その他の理由で必須です。
満たさない場合:ボタンのラベルが、実際のテキストにできる画像の中のテキストとして表示されているため、WCAG 1.4.5を満たしません。
SVG_IMAGE_TEXT_REVIEW
- レポートに示された画像を見つけ、その中に描かれたテキストを確認してください。
- それがロゴやワードマークなのか、見出し、文、ラベルのようなテキストなのかを判断してください。
- ロゴでなければ、そのテキストをCSSでスタイルを設定した実際のテキストにできるのか、その見た目が必須なのかを判断してください。
満たす場合:テキストはロゴであるか、その見た目が必須です(またはグラフの軸の数字のように付随的なものにすぎません)。
満たさない場合:画像は実際のテキストにできるテキストを描いており、ロゴでもないため、WCAG 1.4.5を満たしません。