image-of-text
Text sollte echter Text sein, kein Bild von Text
Fragt zu Bildern, die laut Markup wahrscheinlich Text enthalten (ein <input type="image"> oder ein <img>, das ein SVG mit <text> zeigt), nach, ob dieser Text echter Text sein könnte.
Anwendbarkeit. Gilt für zwei Arten von Bildern, die laut Markup wahrscheinlich Text enthalten, wenn sie gerendert werden:
- ein <input type="image">, ein als Bild gezeichneter Button, der seine Beschriftung fast immer als Text im Bild trägt;
- ein <img>, dessen Quelle eine SVG-Data-URL ist, deren Markup ein <text>-Element enthält: Der Text wird als Teil des Bilds gezeichnet und lässt sich nicht wie Text umgestalten.
Zu anderen Bildern wird nicht nachgefragt: Ob ein Bild Text enthält, steckt in seinen Pixeln, die ein Scan des Markups nicht sieht. Ein Inline-<svg> mit <text> ist echter Text und liegt außerhalb des Geltungsbereichs (ACT 0va7u6). Findet sie nichts nachzufragen, meldet sie notApplicable, nicht pass: Sie gilt nur für das, was ihre Prüfung markiert, und dort nichts zu finden zeigt nicht, dass alles in Ordnung ist.
Erwartung. Text, der echter Text sein kann, ist echter Text, mit CSS gestaltet, statt eines Bilds von Text, außer das Bild lässt sich an die Bedürfnisse der Nutzenden anpassen oder die besondere Darstellung des Texts ist wesentlich, wie bei einem Logo (WCAG 1.4.5).
Beispiele
<input type="image" src="send-button.png" alt="Send">
Ein als Bild gezeichneter Button trägt seine Beschriftung fast immer als Text im Bild; ein <button> mit echtem Text könnte dasselbe leisten.
<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>">
Der <text> des SVG wird als Teil des Bilds gezeichnet, wo er sich nicht wie Text umgestalten lässt.
<svg xmlns="http://www.w3.org/2000/svg"><text x="0" y="15">WCAG Rocks</text></svg>
Der Text eines Inline-SVG ist echter Text.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
IMAGE_BUTTON_TEXT_REVIEW
- Suchen Sie die im Bericht genannte Bildschaltfläche und betrachten Sie das Bild.
- Prüfen Sie, ob das Bild Wörter oder Buchstaben enthält und nicht nur ein Symbol.
- Wenn ja, entscheiden Sie, ob dieser Text echter, per CSS gestalteter Text sein könnte oder ob sein Aussehen wesentlich ist (ein Logo).
Bestanden. Das Bild enthält keinen Text, nur ein Symbol oder eine Abbildung, oder der Text ist ein Logo oder anderweitig wesentlich.
Nicht bestanden. Die Schaltfläche zeigt ihre Beschriftung als Text in einem Bild, der echter Text sein könnte; das verstößt gegen WCAG 1.4.5.
SVG_IMAGE_TEXT_REVIEW
- Suchen Sie das im Bericht genannte Bild und betrachten Sie den darin gezeichneten Text.
- Entscheiden Sie, ob es ein Logo oder eine Wortmarke ist oder Text wie eine Überschrift, ein Satz oder eine Beschriftung.
- Ist es kein Logo, entscheiden Sie, ob der Text echter, per CSS gestalteter Text sein könnte oder ob sein Aussehen wesentlich ist.
Bestanden. Der Text ist ein Logo oder sein Aussehen ist wesentlich (oder er ist nur beiläufig, etwa die Achsenzahlen eines Diagramms).
Nicht bestanden. Das Bild zeichnet Text, der echter Text sein könnte und kein Logo ist; das verstößt gegen WCAG 1.4.5.