Fallo común Fallos comunes WCAG 2.2
F2Fallo del criterio de conformidad 1.3.1 debido a usar cambios en la presentación del texto para transmitir información sin usar el marcado o el texto apropiados
En resumen
Este fallo se produce cuando la estructura de un documento (por ejemplo, un encabezado) se indica solo con estilos visuales, como un párrafo en negrita y grande, o con una imagen de texto, sin el marcado semántico correspondiente. Las personas que usan lectores de pantalla u otras tecnologías de asistencia no perciben esa estructura. Compruébelo al revisar títulos, encabezados o cualquier texto destacado solo con CSS.
Ejemplo práctico
Es habitual en páginas informativas de ayuntamientos y en entradas de blog maquetadas desde el editor: los títulos de sección se escriben como párrafos con letra grande y en negrita, de modo que parecen encabezados pero no lo son.
Así no: Párrafos con aspecto de encabezado
Los títulos «Cita previa en el Registro General» y «Documentación necesaria» son elementos p con una clase CSS. Visualmente estructuran la página, pero un lector de pantalla los lee como texto normal: no aparecen en la lista de encabezados ni se puede saltar a ellos con la tecla H.
<style>
.titulo { font-size: 1.4rem; font-weight: bold; color: #412c56; margin: 0 0 .5rem; }
.subtitulo { font-size: 1.15rem; font-weight: bold; color: #412c56; margin: 1rem 0 .5rem; }
</style>
<p class="titulo">Cita previa en el Registro General</p>
<p>Solicite cita para presentar documentación en las oficinas municipales.</p>
<p class="subtitulo">Documentación necesaria</p>
<ul>
<li>DNI, NIE o pasaporte en vigor.</li>
<li>Formulario de solicitud firmado.</li>
</ul>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Encabezados reales con el mismo estilo
Se sustituyen los párrafos por h1 y h2 y se mantiene el aspecto con las mismas clases CSS. El diseño no cambia, pero ahora la estructura queda expuesta por software y se puede navegar por encabezados.
<style>
.titulo { font-size: 1.4rem; font-weight: bold; color: #412c56; margin: 0 0 .5rem; }
.subtitulo { font-size: 1.15rem; font-weight: bold; color: #412c56; margin: 1rem 0 .5rem; }
</style>
<h1 class="titulo">Cita previa en el Registro General</h1>
<p>Solicite cita para presentar documentación en las oficinas municipales.</p>
<h2 class="subtitulo">Documentación necesaria</h2>
<ul>
<li>DNI, NIE o pasaporte en vigor.</li>
<li>Formulario de solicitud firmado.</li>
</ul>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Títulos de sección escritos como
…
o con un div con clase h2 en lugar del elemento de encabezado. - Imágenes o banners con el texto «Nuestros servicios» que hacen de encabezado sin estar dentro de un h2 ni haber un encabezado real en texto.
- Bloques de título de constructores visuales de WordPress configurados con etiqueta div o p en lugar de h2 o h3.
- Encabezados que en la versión móvil se sustituyen por textos en negrita distintos de los de escritorio.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Todas las tecnologías que admiten imágenes o marcado de presentación.
Descripción
Este documento describe un fallo que se produce cuando un cambio en la apariencia del texto transmite un significado sin utilizar el marcado semántico apropiado. Este fallo también se aplica a las imágenes de texto que no están incluidas dentro del marcado semántico apropiado.
Ejemplos
Usar CSS para dar al elemento p el aspecto de un encabezado
El autor quería crear un encabezado, pero no le gustaba el aspecto del encabezado HTML predeterminado. Así que utilizó CSS para dar al elemento P el aspecto de un encabezado y lo llamó encabezado. Pero no utilizó el elemento de encabezado HTML correcto. Por tanto, la tecnología de asistencia no pudo distinguirlo como encabezado.
<style>
.heading1{
font-family: Times, serif;
font-size:200%;
font-weight:bold;
}
</style>
<p class="heading1">Introduction</p>
<p>This introduction provides detailed information about how to use this ...</p>En este caso, el enfoque correcto sería utilizar CSS para dar estilo al elemento h1 de HTML.
Imágenes de texto usadas como encabezados sin que las imágenes estén marcadas con etiquetas de encabezado
Chapter1.gif es una imagen con las palabras "Chapter One" («Capítulo uno») en una fuente Garamond de 20 píxeles. Esto es un fallo porque, como mínimo, el elemento img debería estar incluido dentro de un elemento de encabezado. Una solución mejor sería eliminar la imagen e incluir el texto dentro de un elemento de encabezado al que se le haya dado estilo con CSS.
<img src="Chapter1.gif" alt="Chapter One">
<p>Once upon a time in the land of the Web...</p>Pruebas
Procedimiento
-
Para las imágenes de texto:
- Comprobar si se utilizan imágenes de texto para transmitir información estructural del documento.
- Comprobar que se utiliza la estructura semántica adecuada (p. ej., encabezados HTML) junto con el texto para transmitir la información.
-
Para el texto con estilo que transmite información:
- Comprobar si hay texto con estilo que transmita información estructural.
- Comprobar que, además del estilo, se utiliza la estructura semántica adecuada junto con el texto para transmitir la información.
Resultados esperados
- Si, en cualquiera de las dos situaciones, la comprobación n.º 1 es verdadera y la comprobación n.º 2 es falsa, se da esta condición de fallo y el contenido falla este criterio de conformidad. Si la condición n.º 2 es verdadera, la condición de fallo no se aplica.
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F2 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
