Fallo Común F2 de WCAG 2.1: Uso incorrecto de cambios en la presentación del texto para transmitir información

Jano Llorca Lis

La accesibilidad web es crucial para garantizar que todas las personas puedan acceder a la información de manera clara y comprensible. Sin embargo, un error común es utilizar cambios visuales en el texto (como negritas, tamaño de fuente o colores) para transmitir significado sin usar el marcado semántico adecuado. Este problema incumple el Criterio de Conformidad 1.3.1 de WCAG 2.1 (Información y Relaciones), ya que los usuarios que dependen de tecnologías de asistencia no pueden interpretar correctamente la información presentada solo a través de cambios visuales.

En este artículo, exploraremos el Fallo F2, cómo afecta la accesibilidad y cómo solucionarlo con las mejores prácticas.

Acerca de este fallo

El Fallo F2 ocurre cuando un cambio en la apariencia del texto transmite información sin el uso del marcado semántico apropiado. Este error afecta a todas las tecnologías que soportan imágenes o marcado de presentación, ya que la información no estructurada correctamente no puede ser interpretada por lectores de pantalla u otras herramientas de asistencia.

El criterio 1.3.1 de WCAG 2.1 establece que la estructura y las relaciones entre el contenido deben estar programáticamente determinadas o disponibles en texto. Si solo se usan cambios visuales para transmitir significado, se impide que algunos usuarios accedan a esa información.

Este fallo se manifiesta en dos formas comunes:

Uso de CSS para dar formato a texto como encabezados sin el uso de etiquetas semánticas.
Uso de imágenes de texto sin proporcionar una alternativa adecuada en HTML.

Ejemplos

Ejemplo incorrecto 1: Uso de CSS para simular encabezados

<!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>
        .heading1 {
            font-size: 200%;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="heading1">Introducción</p>
    <p>Este es el contenido introductorio del documento...</p>
</body>
</html>

🔴 Problema: El desarrollador usó un <p> con una clase CSS .heading1 para simular un encabezado visualmente, pero esto no proporciona información semántica al navegador ni a los lectores de pantalla. Como resultado, los usuarios que dependen de tecnologías de asistencia no podrán identificar correctamente la estructura del contenido.

Solución correcta: Usar etiquetas de encabezado adecuadas

<!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>
    <style>
        h1 {
            font-size: 200%;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Introducción</h1>
    <p>Este es el contenido introductorio del documento...</p>
</body>
</html>

✅ ¿Qué mejora?: Aquí, el desarrollador reemplazó el <p> por un <h1>, asegurando que el contenido sea interpretado correctamente como un encabezado por los lectores de pantalla y las herramientas de navegación. Además, el estilo visual sigue siendo personalizado mediante CSS, sin comprometer la accesibilidad.

Ejemplo incorrecto 2: Uso de imágenes de texto sin marcado semántico

<!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>
</head>
<body>
    <img src="chapter1.gif" alt="Capítulo Uno">
    <p>Érase una vez en el mundo del desarrollo web...</p>
</body>
</html>

🔴 Problema: El desarrollador utilizó una imagen que contiene texto en lugar de escribir el texto directamente en HTML. Aunque proporcionó un atributo alt, esto no es suficiente porque no refleja adecuadamente la estructura del documento. Los lectores de pantalla no podrán interpretar esta imagen como un encabezado ni ofrecer opciones de navegación adecuadas.

Solución correcta: Usar texto en HTML con CSS para estilizarlo

<!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>
    <style>
        h2 {
            font-size: 20px;
            font-family: 'Garamond', serif;
        }
    </style>
</head>
<body>
    <h2>Capítulo Uno</h2>
    <p>Érase una vez en el mundo del desarrollo web...</p>
</body>
</html>

✅ ¿Qué mejora?: En esta versión corregida, el texto ya no está contenido en una imagen, sino que se muestra directamente en HTML con la etiqueta <h2>. Esto garantiza que los usuarios de lectores de pantalla puedan identificar el título como un encabezado y navegar adecuadamente por el documento.

Ejemplo correcto: Solución ideal

<!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>Es importante leer los <strong>términos y condiciones</strong> antes de registrarse.</p>
</body>
</html>

✅ ¿Qué mejora?: En este caso, el desarrollador usó <strong> en lugar de aplicar solo estilos CSS para resaltar la importancia del texto. El uso correcto del énfasis semántico en el texto permite que los lectores de pantalla anuncien el texto con la debida entonación y énfasis, asegurando que la información sea interpretada correctamente.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar negritas (<b>) en lugar de <strong> para resaltar texto importante.
Usar cursiva (<i>) en lugar de <em> para indicar énfasis.
Utilizar <div> o <span> con estilos en lugar de elementos semánticos como <h1> - <h6>.
Incluir información importante dentro de una imagen sin una alternativa en texto.

Cómo evitar estos errores:

Utiliza etiquetas semánticas como <h1>, <strong>, <em> en lugar de depender de estilos CSS.
Si el diseño requiere una apariencia personalizada, aplica estilos CSS a elementos semánticos en lugar de reemplazarlos.
Proporciona alternativas textuales adecuadas para cualquier imagen que contenga información relevante.

Preguntas frecuentes sobre el fallo común F2

¿Por qué no es suficiente cambiar la apariencia del texto con CSS para indicar su importancia?

Los lectores de pantalla y otras tecnologías de asistencia no interpretan los cambios visuales aplicados con CSS como información estructural. Para que el contenido tenga un significado claro, se deben utilizar etiquetas semánticas como <h1> para encabezados o <strong> para énfasis.

¿Cuáles son los principales problemas de accesibilidad causados por imágenes de texto?

Las imágenes de texto no pueden ser interpretadas por los lectores de pantalla, a menos que tengan una alternativa textual adecuada. Además, los usuarios no pueden personalizar el tamaño o el estilo de la fuente según sus necesidades, lo que afecta la legibilidad.

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

Puedes utilizar herramientas como WAVE o axe DevTools para detectar el uso incorrecto de texto sin semántica. También puedes desactivar los estilos CSS con la Web Developer Toolbar para comprobar si la estructura sigue siendo comprensible sin los cambios visuales.

¿Existen situaciones en las que se pueda usar <b> o <i> en lugar de <strong> o <em>?

Sí, <b> y <i> se pueden usar cuando el propósito es puramente estilístico y no para transmitir significado. Sin embargo, si el texto tiene importancia semántica, es mejor utilizar <strong> para destacar información relevante y <em> para enfatizar términos clave.

¿Es accesible usar imágenes decorativas con texto?

Si el texto en la imagen es puramente decorativo y no tiene un propósito informativo, se debe marcar la imagen con alt="" para que los lectores de pantalla la ignoren. Pero si la imagen transmite información, es mejor reemplazarla con texto HTML o incluir una descripción adecuada en alt.

¿Qué otros errores de accesibilidad están relacionados con este fallo?

Otros errores comunes incluyen el Fallo F43 (uso incorrecto de color para transmitir información), el Fallo F87 (uso de imágenes en lugar de contenido estructurado) y el Fallo F73 (uso de texto flotante sin asociación semántica). Todos estos errores afectan la comprensión del contenido por parte de los usuarios con discapacidades.

Recursos relacionados

Pruebas y validación

Procedimiento

Para imágenes de texto:
- Verificar si se están utilizando imágenes de texto para mostrar información estructural.
- Comprobar si el texto en la imagen está correctamente marcado con una alternativa accesible en HTML.
Para texto estilizado con CSS:
- Revisar si se han usado p, div o span en lugar de etiquetas semánticas como h1-h6.
- Evaluar si el significado del contenido depende solo de la apariencia visual.
Usar herramientas de validación:
- WAVE para detectar fallos de semántica.
- axe DevTools para pruebas de accesibilidad automatizadas.
- Desactivar CSS usando Web Developer Toolbar para verificar si la estructura sigue siendo comprensible.

Resultados esperados

✅ Si las pruebas confirman que:

Todo encabezado visual está marcado correctamente con h1-h6.
No se está usando CSS solo para alterar la jerarquía visual del contenido.
Las imágenes de texto tienen una alternativa accesible o se han reemplazado por texto HTML.

Entonces, el contenido cumple con WCAG 2.1.

❌ Si alguno de los elementos anteriores no se cumple, el contenido falla el criterio 1.3.1 y debe corregirse.

Usar cambios visuales en el texto sin el marcado semántico adecuado puede afectar gravemente la accesibilidad de una página web. Para garantizar el cumplimiento de WCAG 2.1, es fundamental emplear etiquetas HTML apropiadas y no depender exclusivamente de estilos CSS para transmitir significado.

¡Asegúrate de que tu contenido sea accesible para todos! 🏆

¿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.