image-of-text
El texto debería ser texto real, no una imagen de texto
Pregunta, por las imágenes que según el marcado probablemente contienen texto (un <input type="image">, o un <img> que muestra un SVG con <text>), si ese texto podría ser texto real.
Ámbito de aplicación. Se aplica a dos tipos de imagen que según el marcado probablemente contienen texto, cuando se renderizan:
- un <input type="image">, un botón dibujado como imagen, que casi siempre lleva su etiqueta como texto dentro de la imagen;
- un <img> cuya fuente es una URL data de un SVG cuyo marcado contiene un elemento <text>: el texto se dibuja como parte de la imagen, que no se puede volver a estilizar como el texto.
Por las demás imágenes no se pregunta: si una imagen contiene texto está en sus píxeles, que un análisis del marcado no ve. Un <svg> en línea con <text> es texto real, y queda fuera del alcance (ACT 0va7u6). Si no encuentra nada por lo que preguntar, devuelve notApplicable, no pass: solo se aplica a lo que su comprobación señala, y no encontrar nada ahí no demuestra que todo esté bien.
Resultado esperado. El texto que puede ser texto real es texto real, con estilo de CSS, en lugar de una imagen de texto, salvo que la imagen pueda personalizarse según las necesidades del usuario o que la presentación concreta del texto sea esencial, como en un logotipo (WCAG 1.4.5).
Ejemplos
<input type="image" src="send-button.png" alt="Send">
Un botón dibujado como imagen casi siempre lleva su etiqueta como texto dentro de la imagen; un <button> con texto real podría hacer lo mismo.
<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>">
El <text> del SVG se dibuja como parte de la imagen, donde no se puede volver a estilizar como texto.
<svg xmlns="http://www.w3.org/2000/svg"><text x="0" y="15">WCAG Rocks</text></svg>
El texto de un SVG en línea es texto real.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
IMAGE_BUTTON_TEXT_REVIEW
- Localizar el botón de imagen que indica el informe y observar la imagen.
- Comprobar si la imagen contiene palabras o letras, y no solo un icono.
- Si es así, decidir si ese texto podría ser texto real con estilo CSS, o si su aspecto es esencial (un logotipo).
Se cumple. La imagen no contiene texto, solo un icono o una ilustración, o el texto es un logotipo o es esencial por otro motivo.
No se cumple. El botón muestra su etiqueta como texto en una imagen que podría ser texto real, lo que incumple WCAG 1.4.5.
SVG_IMAGE_TEXT_REVIEW
- Localizar la imagen que indica el informe y observar el texto dibujado en ella.
- Decidir si es un logotipo o un logotipo tipográfico, o texto como un encabezado, una frase o una etiqueta.
- Si no es un logotipo, decidir si el texto podría ser texto real con estilo CSS, o si su aspecto es esencial.
Se cumple. El texto es un logotipo o su aspecto es esencial (o solo es accesorio, como los números de los ejes de un gráfico).
No se cumple. La imagen dibuja texto que podría ser texto real y no es un logotipo, lo que incumple WCAG 1.4.5.