Fallo Común F3 de WCAG 2.1: Uso incorrecto de CSS para incluir imágenes que transmiten información importante

Jano Llorca Lis

La accesibilidad web es fundamental para garantizar que todos los usuarios, incluidos aquellos con discapacidades visuales, puedan acceder a la información de manera efectiva. Un error común en el desarrollo web es utilizar CSS para incluir imágenes que transmiten información importante, en lugar de integrarlas correctamente en el HTML con alternativas textuales.

Este problema está documentado como el Fallo Común F3 en las WCAG 2.1, específicamente incumpliendo el Criterio de Conformidad 1.1.1 (Contenido no textual). En este artículo, exploraremos en detalle este fallo, su impacto en la accesibilidad y cómo corregirlo adecuadamente.

Acerca de este fallo

El Fallo F3 ocurre cuando se usan imágenes de fondo definidas en CSS (background-image) para mostrar contenido informativo. Este método impide proporcionar una alternativa textual accesible, afectando a usuarios que utilizan lectores de pantalla o modos de alto contraste en los sistemas operativos.

¿Por qué es un problema de accesibilidad?

Los lectores de pantalla no pueden interpretar imágenes de fondo agregadas con CSS.
Los usuarios que activan modos de alto contraste pueden perder la información si el sistema oculta los fondos.
No es posible proporcionar un atributo alt en imágenes de fondo, lo que hace que la información sea inaccesible.

Ejemplos

Ejemplo incorrecto 1: Usar `background-image` en CSS para mostrar información importante

El siguiente código muestra una tasa de interés con una imagen incluida como fondo de un párrafo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Incorrecto</title>
    <style>
        #bestinterest {
            padding-left: 200px;
            background: transparent url('TopRate.png') no-repeat top left;
        }
    </style>
</head>
<body>
    <p id="bestinterest">¿Dónde más encontrarías una mejor tasa de interés?</p>
</body>
</html>

Problema: La imagen contiene información crucial («19.3% APR Típico Variable»), pero al estar definida como fondo en CSS, no puede ser interpretada por lectores de pantalla.

Solución correcta: Usar `<img>` con `alt` en HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Correcto</title>
</head>
<body>
    <p>¿Dónde más encontrarías una mejor tasa de interés?</p>
    <img src="TopRate.png" alt="19.3% APR Típico Variable">
</body>
</html>

🔴 Problema: Ahora, la imagen se muestra con una etiqueta <img> y un alt descriptivo, permitiendo que los lectores de pantalla la interpreten correctamente.

Ejemplo incorrecto 2: Uso de `background-image` para iconos informativos

En este ejemplo, una librería usa imágenes de fondo para indicar el estado de un libro.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Incorrecto</title>
    <style>
        .book {
            padding-left: 20px;
        }
        .new {
            background: url('new.png') no-repeat left center;
        }
        .outstock {
            background: url('outstock.png') no-repeat left center;
        }
    </style>
</head>
<body>
    <ul>
        <li class="book new">Libro nuevo</li>
        <li class="book outstock">Libro agotado</li>
    </ul>
</body>
</html>

🔴 Problema: Los iconos no son accesibles para usuarios con lectores de pantalla o configuraciones de alto contraste.

Solución correcta: Usar imágenes en HTML con `alt`

<ul>
    <li><img src="new.png" alt="Nuevo"> Libro nuevo</li>
    <li><img src="outstock.png" alt="Agotado"> Libro agotado</li>
</ul>

✅ ¿Qué mejora?: Los íconos ahora están dentro de etiquetas <img> con texto alternativo, asegurando que la información sea accesible.

Errores comunes y cómo evitarlos

Errores Frecuentes:

Usar background-image en CSS para mostrar información relevante.
No proporcionar alternativas de texto en HTML.
Confiar en estilos visuales sin verificar la accesibilidad.

Cómo evitar estos errores:

Usar imágenes en <img> con alt descriptivo en lugar de background-image.
Probar el sitio con lectores de pantalla y en modo de alto contraste.
Usar herramientas como WAVE y axe DevTools para detectar problemas de accesibilidad.

Preguntas frecuentes sobre el fallo común F3

¿Por qué no se deben usar imágenes en background-image para transmitir información importante?

Las imágenes de fondo definidas en CSS no pueden tener atributos alt, lo que impide que los lectores de pantalla las interpreten. Además, pueden desaparecer en modos de alto contraste, haciendo que la información se pierda para algunos usuarios.

¿Es aceptable usar background-image para imágenes decorativas?

Sí, siempre que la imagen no contenga información relevante. Si la imagen es puramente decorativa, se recomienda gestionarla con CSS para evitar ruido innecesario en lectores de pantalla.

¿Cómo afecta este problema a los usuarios con discapacidad?

Los usuarios con lectores de pantalla no pueden acceder a la información contenida en imágenes de fondo.
Los usuarios que activan modos de alto contraste pueden perder las imágenes si se eliminan los fondos.
Las personas con baja visión pueden no notar imágenes sin una alternativa accesible.

¿Cómo puedo verificar si mi sitio web tiene este problema?

Desactiva CSS en tu navegador y revisa si alguna información importante desaparece.
Usa herramientas como WAVE o axe DevTools para detectar imágenes sin alternativas textuales.
Activa el modo de alto contraste en tu sistema operativo para comprobar si la información sigue siendo visible.

¿Cuál es la solución correcta para hacer accesibles las imágenes que contienen información clave?

En lugar de usar background-image, debes usar una etiqueta <img> con un atributo alt descriptivo, asegurando que la información sea accesible para todos los usuarios.

¿Qué otros fallos de accesibilidad están relacionados con este problema?

Fallo F30: No proporcionar un texto alternativo para imágenes informativas.
F65: Usar imágenes de texto sin proporcionar alternativas en HTML.
F38: No etiquetar correctamente imágenes que transmiten información.

Recursos relacionados

Pruebas y Validación

Procedimiento

Revisar todas las imágenes agregadas con background-image en CSS.
Identificar si contienen información importante.
Verificar si existe una alternativa accesible en HTML (<img> con alt).

Resultados Esperados

✅ Si la imagen no transmite información relevante, su uso en CSS es aceptable.
✅ Si la imagen contiene información clave, debe haber una alternativa en HTML.
❌ Si no hay alternativa accesible, el contenido falla el Criterio 1.1.1 de WCAG 2.1.

El uso de background-image en CSS para mostrar información relevante es una mala práctica de accesibilidad. Para garantizar que todos los usuarios puedan acceder al contenido, es crucial usar imágenes en HTML con texto alternativo adecuado.

¡Mejora la accesibilidad de tu web aplicando buenas prácticas de desarrollo! 🚀

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.