Images of Text y CSS moderno

Introducción (Link permanente)

Algo que he aprendido como auditor de accesibilidad en Zenyth Group⁠ (Abre en una nueva pestaña) es que hay criterios de la WCAG de los que genuinamente no tenía ni idea, me hizo dar cuenta de lo mucho que tengo que aprender. Uno de los criterios en particular es del que quiero hablar hoy, el criterio de conformidad 1.4.5 - Imágenes de Texto. Hoy quiero entrar en detalle sobre qué es este criterio, algunos ejemplos que he podido encontrar de fallos de este criterio y lo más importante de todo: como podemos usar las herramientas que nos brinda CSS para poder crear un sitio que cumpla con este criterio.

El criterio de conformidad 1.4.5 (Link permanente)

¿Qué es el criterio de conformidad 1.4.5? Link permanente

Empecemos con lo más importante, de acuerdo con la WCAG, el criterio de conformidad 1.4.5 - Imágenes de texto, dice:

Si con las tecnologías que se están utilizando se puede conseguir la presentación visual deseada, se utiliza texto para transmitir la información en vez de imágenes de texto, excepto en los siguientes casos.

• Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario.
• Esencial: Una forma particular de presentación del texto resulta esencial para la información que se transmite.

Nota: Los logotipos (textos que son parte de un logo o de un nombre de marca) se consideran esenciales.

Es común encontrar imágenes en la web que tienen texto. Solo por dar un ejemplo, está este gráfico sobre la discapacidad en USA⁠ (Abre en una nueva pestaña) de Global Disability Rights Now. Este criterio nos dice que si es posible representar esta información como texto en lugar de como una imagen, esta debe presentarse como texto al usuario.

Importancia Link permanente

Este criterio surgió en la WCAG 2.0 en los años 2000, la web era muy distinta entonces y era bastante común usar imágenes con texto en sitios. Y si bien hoy en día es menos común encontrar fallos de este criterio, aún es relevante, así que revisemos ¿Qué tipo de barreras crearía tener una imagen de texto para las personas con discapacidad?

En teoría, si usas una imagen para presentar texto y usas el texto alternativo ¿No sería este contenido accesible? No realmente, si bien esto cubriría usuarios de lectores de pantalla, esto crea problemas para otros tipos de discapacidades, como por ejemplo:

• Usuarios con baja visión que usan software de magnificación de pantalla como ZoomText⁠ (Abre en una nueva pestaña) , la lupa de Windows⁠ (Abre en una nueva pestaña) o usar el zoom del navegador que pueden tener problemas para leer el contenido, ya que una imagen es propensa a pixelarse, y si se pixela, hace más difícil la lectura de esta.
• Algunas discapacidades como la dislexia o ciertos defectos visuales requieren que, para que la persona pueda ver el contenido, necesite cambiar la fuente, tamaño, color o espaciado del texto. Eso se puede lograr con hojas de estilos personalizadas con herramientas como Stylus⁠ (Abre en una nueva pestaña) , el modo de alto contraste de Windows, o más reciente, Arc Browser⁠ (Abre en una nueva pestaña) (aunque este feature no fue algo creado como herramienta de accesibilidad per sé). No permitirles cambiar propiedades del texto, les puede generar barreras para consumir contenido. Caso que pasa si usas una imagen cuando es posible usar texto.

Visto lo visto, cumplir este criterio sigue siendo importante, y ya hemos pasado esas épocas de los 2000, así que podemos decir que en la web estamos cumpliendo con este criterio... ¿Verdad? Pues, no realmente.

Fallos del criterio 1.4.5 en la práctica Link permanente

Por desgracia, es posible encontrar fallos de este criterio hoy en día, y no son casos raros. Empecemos hablando de uno que probablemente hayas visto cada tanto, no en un sitio como tal, pero sí en tu correo. Hablo, como no, del e-mail marketing.

Es muy común usar imágenes en correos que podrían ser texto. Es entendible debido a ciertas limitaciones técnicas sobre como se puede maquetar un correo, pero eso no quiere decir que no sea un fallo. En este punto, iba a compartir un correo que he recibido, pero casualmente, Ivana Watts, estratega de eCommerce y Email Marketer compartió un ejemplo en un post de LinkedIn sobre accesibilidad de correos⁠ (Abre en una nueva pestaña) donde, entre otras cosas, habla del uso excesivo de imágenes en este medio. Gracias Ivana por hablar sobre este tema, es evidente que casos como este mantienen a este criterio relevante.

Pero vale, puede que en el email marketing se vea bastante, pero eso no pasa mucho con los sitios web ¿verdad? Sigue pasando. Compartí este post en Mastodon (también en Twitter, pero no recibí ayuda ahí porque el algoritmo es un desastre y esa red social está en su ocaso) y recibí respuestas muy interesantes:

Una de estas viene de Massimo Artizzu, que dijo esto:

Obviamente, este ejemplo no se puede mostrar por temas de seguridad, pero este testimonio es un ejemplo claro de que esto pasa todavía. Ahora, empecemos a ver algunos ejemplos concretos.

Uno que me llamó la atención fue de la página de Converse⁠ (Abre en una nueva pestaña) donde su newsletter tiene un título como este:

Este título puede replicarse como texto muy fácilmente solo usando HTML y un SVG al lado para representar la marca de Converse, de esta manera

<h2>
  Never miss a beat
  <svg aria-hidden="true">
    <!-- SVG's code -->
  </svg>
</h2>

Esta elección de usar una imagen en vez de texto crea problemas de accesibilidad, como lo hemos mencionado anteriormente. Este es un caso particularmente fácil de resolver, así que vayamos aumentando un poco la complejidad. Mi siguiente ejemplo es el de Elder Mistubishi⁠ (Abre en una nueva pestaña) , que tiene un carrusel, y dentro de cada slide tiene imágenes como esta:

Algunas imágenes son más difíciles de replicar que otras, pero todas tienen ese patrón de texto a un lado y una imagen al otro, ese patrón es relativamente fácil de replicar con las herramientas de layouts que ofrece CSS hoy en día. Si pensaste en grid para hacer este layout, tendrías toda la razón, pero hablaremos de esto luego.

Por ahora mi punto es que este es extrañamente un patrón común que he notado de fallos de este criterio. Varias imágenes que han usado tienen una estructura muy similar y pueden ser replicadas de tal manera que pasen este criterio. Para dar un par de ejemplos, está Almacenes Éxito⁠ (Abre en una nueva pestaña) , de Colombia, donde tienen un carrusel y cada slide de este posee una imagen en este estilo.

Tiene algo más de complejidad, pero se puede replicar con HTML y CSS, otro ejemplo es el de Grundsätzlich CDU⁠ (Abre en una nueva pestaña) que es probablemente el sitio que más fallos he notado de este criterio. De 6 imágenes, puedes argumentar que más de la mitad fallan este criterio, por dar un ejemplo, veamos esta imagen:

Un detalle importante sobre esta imagen: en ciertos puntos, esos círculos azules se solapan con el texto, creando puntos donde se puede dificultar la legibilidad para algunas personas con discapacidades visuales que, en teoría, podrá solucionarse con las herramientas que el usuario tenga a su disposición, pero no podría porque es una imagen de texto.

Estos últimos tres casos no solo son relativamente fácil de replicar con HTML y CSS, sino que son layouts bastante similares que de hecho pueden replicarse con la misma técnica.

Y estos casos son solamente hablando de imágenes, hay algo más que podemos mencionar y también tiene un uso extendido en la web, y eso es los SVG. Tiene varias ventajas sobre las imágenes, y una de ellas es que no se pixela, lo cual lo hace más amigable con magnificadores de pantalla, pero ¿realmente son buena alternativa en el contexto de este criterio? Veamos como ejemplo a nypost.com⁠ (Abre en una nueva pestaña) , en específico, veamos que hacen con su encabezado "Page Six"

En lugar de utilizar texto, usan un SVG para mostrar el título. Como mencioné anteriormente, una de las excepciones de este criterio es que "la imagen pueda ser configurada según los requerimientos del usuario", es decir, que permita alterar propiedades como el color, el tamaño o la tipografía del texto.

¿Este SVG permite modificar estas propiedades? En este caso usaron utilizaron un <path> para recrear el texto, así que no permite modificar la tipografía y el tamaño, pero un SVG que se haya manejado bien podría modificársele el color, veamos que pasa cuando uso el modo de alto contraste de Windows en este sitio.

No permite modificar el color de la fuente, así que este SVG no pasa este criterio de conformidad. ¿Hay maneras de usar SVGs de modo tal que se adecuen a este criterio? Lo hay, con la etiqueta text⁠ (Abre en una nueva pestaña) que permite agregar nodos de texto a un SVG, y estos nodos reciben cualquier cambio de propiedes de texto, por lo que usarlos entra en conformidad con este criterio.

Ahora, puede que pase este criterio, pero puede generar fallos en otros, como por ejemplo el criterio de conformidad 1.4.12 - Espaciado de texto⁠ (Abre en una nueva pestaña) , ya que si se aplica un espaciado de texto, puede solaparse o cortarse, lo cual puede dificultar la lectura, así que es importante tener todo esto en mente antes de considerar usarlos.

Hemos notado que este problema sigue pasando hoy en día, así que hablemos de qué podemos hacer para solucionarlo. Para ello es necesario hablar de uno de los lenguajes que forman la web y su potencial en darle cumplimiento a este criterio. Hablemos de CSS

Las posibilidades de CSS (Link permanente)

CSS ha evolucionado mucho en los últimos años y ahora tenemos muchas herramientas a nuestra disposición para crear básicamente cualquier layout que nos podamos imaginar. Esto abre muchas posibilidades para poder crear contenido que cumpla con este criterio.

Como mencioné anteriormente, la web era distinta antes, era más común usar imágenes para representar texto porque en varios casos, crear los layouts que estos diseños demandaban era prácticamente imposible con las herramientas del momento. Ahora tenemos muchas herramientas, y quiero ahondar en una en particular que es particularmente efectiva para este criterio: Hablo de CSS Grid.

CSS Grid Link permanente

CSS Grid permite crear una serie de filas y columnas en las que el desarrollador puede posicionar elementos dentro de esta. Esto ha abierto una gran ventana de posibilidades al momento de realizar layouts complejos y ciertamente es algo que nos ayuda a crear contenido que nos ayude a cumplir este criterio. Volvamos de nuevo al banner de Elder Mitsubishi y pongámonos como misión recrear este layout con CSS.

Lo primero que hice fue usar Figma para crear una grilla de columnas para saber mejor como posicionar los elementos, después de experimentar, llegué a la conclusión de que esto fue dividido en 11 columnas y fue distribuido de esta manera:

Con esa información, podemos replicar el layout. Empecemos con el markup:

<section>
  <div>
    <h1>Get Pre-Approved Now</h1>
    <ul>
      <li>No Social Required</li>
      <li>Instant Approval</li>
    </ul>
    <a href="#">Get pre-approved</a>
  </div>
  <img src="path/to/image.jpg" alt="" />
</section>

Ahora, podemos usar grid para posicionar los elementos de una manera que recree este layout. De estas 11 columnas, una está completamente vacía, de la 2 a la 5 tienen el texto y el call to action y el resto tienen la imagen del auto (sé que hay cierto overlap entre el texto y la imagen, pero no quiero complicar el ejemplo mucho) así que podemos dividir esto en tres columnas: una que mida 1/11, otra que mida 4/11 y otra que mida 6/11. Luego podemos usar grid para recrear este mismo layout y posicionar nuestros elementos ahí

/* Makes the image gets contained in the box */
img {
  display: block;
  max-width: 100%;
}

section {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 4fr 6fr;
  gap: 1rem;
}

section div {
  grid-column: 2 / 3;
}

section img {
  grid-column: 3 / 4;
}

La gran ventaja de hacerlo con HTML y CSS es que podemos hacerlo responsive, usando media queries para hacer que siga viéndose bien en pantallas más pequeñas (lo que de paso ayuda a que la página pase el criterio de conformidad 1.4.10 - Reflow⁠ (Abre en una nueva pestaña) ). Refactoricemos un poco este CSS para hacer que se ajuste mejor.

section {
  display: grid;
  align-items: center;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  section {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1024px) {
  section {
    grid-template-columns: 1fr 4fr 6fr;
  }

  section div {
    grid-column: 2 / 3;
  }

  section img {
    grid-column: 3 / 4;
  }
}

Y así es como obtendríamos nuestro layout. Ahora, sería usar CSS para darle los estilos que se necesita. Voy a hacer una aproximación a esos estilos de ese banner que pueden ver en este CodePen

See the Pen Elder Mitsubishi layout by Cristian Diaz (@ItsCrisDiaz) on CodePen.

Hay ajustes que se pueden hacer para hacerlo aún más parecido al de la imagen con un manejo más granular de CSS grid, pero el punto es que en varias ocasiones este layout es replicable. Volvamos a los ejemplos de Almacenes Éxito y Grundsätzlich CDU, ya que estos manejan un layout bastante similar al de nuestro ejemplo, así que aprender como usar CSS grid genera ventajas en el contexto de este criterio de cumplimiento de la WCAG.

Hay layouts que parecen tricky, pero con buen uso de esta y otras herramientas de CSS pueden lograrse sin requerir usar imágenes en puntos donde no es necesario. Algo que he encontrado recientemente que me ha ayudado a entender mejor como usar CSS en la vida real es la serie de blogs de Reality Check de Andy Bell⁠ (Abre en una nueva pestaña) donde ve un diseño en Dribble y lo traduce a código.

Hay que tener en cuenta algo importante: usar CSS Grid para posicionar elementos es una gran herramienta, pero si no se usa adecuadamente puede generar problemas de accesibilidad, específicamente en dos puntos clave: orden de lectura / navegación y contraste.

Si colocas los elementos de forma tal que el orden de lectura no coincida con como los posicionaste en el DOM, puedes crear errores de accesibilidad en el criterio de conformidad 1.3.2 - Secuencia significativa⁠ (Abre en una nueva pestaña) , y si esto crea una navegación por teclado que no respete el orden visual, también crearía un problema bajo el criterio de conformidad 2.4.3 - Orden de foco⁠ (Abre en una nueva pestaña) así que es importante que el orden visual y el orden en el DOM sean tan similares como sean posible.

Y con respecto al contraste, si solapas elementos hay riesgo de que los colores se combinen de modo tal que generen problemas de contraste, así que eso es importante a considerar. Por suerte, Hannah Milan creo un artículo sobre el tema llamado Designing Accessible Text Over Images: Best Practices, Techniques, And Resources Parte 1⁠ (Abre en una nueva pestaña) y Parte 2⁠ (Abre en una nueva pestaña) donde habla sobre los distintos modos que hay para agregar texto sobre imágenes, que tener en cuenta y más recomendaciones al respecto. También está un artículo de Ahmad Shadeed llamado Handling Text Over Images in CSS⁠ (Abre en una nueva pestaña) que también da información bastante útil sobre el tema.

Creo que ya está claro que CSS Grid es una gran herramienta que nos permite crear contenido que cumpla con este criterio, pero ¿Qué más podemos hacer más con CSS? ¿Cuál es el límite? ¿Hasta qué punto es aceptable usar imágenes o SVG en la web en lugar de usar CSS?

Potencial y limitaciones Link permanente

Quiero hacer un pequeño experimento: observa estos títulos ¿Crees que es posible hacerlos con HTML y CSS?

Es muy probable que tu reacción haya sido decir que no es posible, así que sería mejor usar una imagen para esto, tal vez un SVG. Ciertamente esa fue mi reacción inicial, pero ¡Si es posible de recrear! Esto es parte de lo que Temani Afif, un desarrollador Front-end experto en CSS habla en su artículo Responsive Multi-Line Ribbon Shapes Parte 1⁠ (Abre en una nueva pestaña) y Parte 2⁠ (Abre en una nueva pestaña) en el que usa propiedades como background-image y clip-path de una manera creativa para lograr este efecto.

Y seguramente si empezamos a indagar en la web vamos a encontrar ejemplos fascinantes de lo que se puede hacer con HTML y CSS para usar texto cuando normalmente usarías una imagen. Mi punto aquí no es decir que si ves este patrón si o si tengas que hacerlo con CSS o si no va a ser un fallo del criterio de conformidad 1.4.5. Lo que quiero decir con esto es que explorar propiedades de CSS de esta manera nos da una mejor idea de qué y qué no es posible con HTML y CSS solo, lo que abre más posibilidades de crear contenido accesible.

Pero aun con todo, tenemos que dibujar la línea en algún punto, y esto es algo que como auditor puede costar, porque depende de varios factores, como las capacidades técnicas del equipo o la tecnología que usan. Por dar un ejemplo, sí, puedes recrear el layout de Elder Mitsubishi con HTML y CSS sin mayor problema, pero ¿Qué pasa si usas un CMS que no te permite modificar el CSS tanto como les gustaría y están obligados a usar una imagen?

Volvamos un momento a los títulos de antes, si yo estuviera auditando un sitio que haya decidido usar esto como imagen, no lo fallaría bajo el criterio 1.4.5, simplemente porque requiere un nivel de habilidad técnica que no es común de ver. En el mejor de los casos, podría sugerir que usaran un SVG que use <text> para renderizar el texto, porque permitiría más control por parte del usuario y aun así estaría limitado a las habilidades técnicas del equipo.

¿Saben por qué es común encontrar fallos de este criterio en el e-mail marketing? Porque hoy en día todavía estamos limitados a lo que se puede hacer en temas de layouts en emails, todavía teniendo que recurrir a tablas para crear layouts medianamente complejos (principalmente por el soporte a Microsoft Outlook) así que hasta cierto punto se puede entender que usen imágenes tanto, pero igual hay que dibujar la línea en algún punto. Volvamos al post de Ivana sobre los emails, puedo entender que el título sea una imagen, pero ¿Es necesario que el texto lo sea? ¿O los botones? No, por supuesto que no.

Así que en resumen, yo considero que hay dos factores a considerar sobre este criterio:

• Las capacidades de CSS para crear layouts de una forma realista y que el desarrollador promedio pueda realizar. Por ejemplo, el caso de Elder Mitsubishi, pude recrear este layout sin mucho problema, por lo que yo reportaría un fallo bajo este criterio si viera algo similar, y.
• Las herramientas con las que cuenta el equipo de desarrollo. Supongamos que manejan un CMS y no pueden modificar tanto el CSS como quisieras, así que lo que haría sería considerar alternativas sobre lo que es posible hacer con las herramientas que posee el equipo para determinar si es o no un fallo en este criterio.

¿Y si se llega a la conclusión de que no es posible reemplazar una imagen de texto con HTML y CSS? En ese caso, lo mejor que puedes hacer es asegurar que la imagen cumpla con los criterios de accesibilidad necesarios, como asegurarse que el texto tenga el contraste adecuado, que la imagen tenga un texto alternativo que describa adecuadamente el contenido de la imagen.

Para terminar (Link permanente)

El criterio de Imágenes de Texto es un criterio que sigue siendo relevante, y con las herramientas que tenemos hoy en día para el desarrollo web, crear contenido usando texto en vez de imágenes se vuelve cada vez más posible. Sin embargo, aún vamos a encontrar casos donde encontramos fallos de este criterio, y es importante aprender a determinar cuándo es posible recrear un elemento usando texto y cuándo es más conveniente dejarlo como imagen.

Trabajar como auditor de accesibilidad me ha hecho apreciar la profundidad y los matices que hay sobre los criterios de la WCAG, y espero poder haber extendido algo de lo que he podido apreciar sobre el tema en este artículo.