Fallo común Fallos comunes WCAG 2.2
F43Fallo del criterio de conformidad 1.3.1 debido a usar marcado estructural de una forma que no representa las relaciones existentes en el contenido
En resumen
Este fallo se produce cuando se usan encabezados, citas en bloque, fieldset u otro marcado estructural solo para conseguir un efecto visual (letra grande, sangría, un borde), de modo que se anuncian relaciones que no existen en el contenido. Las personas que navegan con lector de pantalla se apoyan en esa estructura para orientarse, así que el marcado debe reflejar el significado real y la apariencia debe resolverse con CSS.
Ejemplo práctico
Aparece mucho en fichas de producto de tiendas online: se usa un encabezado para destacar una oferta o un blockquote para sangrar un aviso, solo porque esos elementos ya traen el tamaño o el margen deseados.
Así no: Encabezado y cita usados solo por su aspecto
«Envío gratis en 24 horas» está marcado como h4 y el aviso de garantía como blockquote, pero ni uno es el título de una sección ni el otro es una cita. Un lector de pantalla anuncia un encabezado de nivel 4 y una cita que no existen, y la lista de encabezados queda desordenada.
<h2>Cafetera italiana de acero</h2>
<h4>Envío gratis en 24 horas</h4>
<p>Cafetera de 6 tazas apta para todo tipo de cocinas, incluida la de inducción.</p>
<blockquote>Garantía de 3 años y devolución gratuita durante 30 días.</blockquote>
<h3>Características</h3>
<ul>
<li>Capacidad: 300 ml.</li>
<li>Material: acero inoxidable.</li>
</ul>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Párrafos con estilo para el efecto visual
El texto destacado y el aviso pasan a ser párrafos con una clase CSS que reproduce el aspecto. Los únicos encabezados que quedan son los que abren secciones reales, y el lector de pantalla ya no anuncia una cita inexistente.
<style>
.destacado { font-weight: bold; margin: 1rem 0; }
.sangria { margin: 1rem 40px; }
</style>
<h2>Cafetera italiana de acero</h2>
<p class="destacado">Envío gratis en 24 horas</p>
<p>Cafetera de 6 tazas apta para todo tipo de cocinas, incluida la de inducción.</p>
<p class="sangria">Garantía de 3 años y devolución gratuita durante 30 días.</p>
<h3>Características</h3>
<ul>
<li>Capacidad: 300 ml.</li>
<li>Material: acero inoxidable.</li>
</ul>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Precios, ofertas o datos de contacto marcados como h3-h6 para que salgan grandes o en negrita.
- blockquote usado para sangrar avisos legales o bloques de texto que no son citas.
- fieldset y legend usados para dibujar un recuadro con título alrededor de un texto que no es un grupo de campos.
- Encabezados vacíos o decorativos que los temas de WordPress insertan como separadores visuales.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
HTML
Descripción
El objetivo de esta técnica es describir un fallo que se produce cuando se usa marcado estructural para conseguir un efecto de presentación, pero ese marcado indica relaciones que no existen en el contenido. Esto desorienta a las personas que dependen de esas relaciones para navegar por el contenido o para entender la relación entre una parte del contenido y otra. Tenga en cuenta que el uso de tablas HTML para la maquetación no es un ejemplo de este fallo siempre que la tabla de maquetación no incluya marcado estructural indebido, como elementos <th> o <caption>.
Aunque el significado semántico de un elemento se expone por lo general a las tecnologías de asistencia, la función presentation de WAI-ARIA puede usarse para suprimir la semántica nativa de un elemento de modo que no se asigne a la API de accesibilidad. Establecer el atributo role de un elemento con el valor presentation puede evitar este fallo, ya que oculta al usuario la semántica de ese elemento.
Ejemplos
Un encabezado usado solo para conseguir un efecto visual
En este ejemplo se usa un elemento de encabezado para mostrar una dirección postal con una letra grande y en negrita. Sin embargo, la dirección no identifica una nueva sección del documento, por lo que no debería marcarse como encabezado.
<p>Interested in learning more? Write to us at</p>
<h4>3333 Third Avenue, Suite 300 · New York City</h4>
<p>And we'll send you the complete informational packet absolutely Free!</p>Uso de elementos de encabezado para conseguir un efecto de presentación
En este ejemplo, el marcado de encabezados se usa de dos formas distintas: para transmitir la estructura del documento y para crear efectos visuales. Los elementos h1 y h2 se usan correctamente para marcar el comienzo del documento en su conjunto y el comienzo del resumen. Sin embargo, los elementos h3 y h4 situados entre el título y el resumen se usan solo con fines visuales: para controlar las fuentes con las que se muestran los nombres de los autores y la fecha.
<h1>Study on the Use of Heading Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 ...</p>Uso de elementos blockquote para añadir
sangría
El siguiente ejemplo usa blockquote en un texto que no es una cita, para darle relevancia sangrándolo cuando se muestra en navegadores gráficos.
<p>After extensive study of the company website, the task force identified
the following common problem.</p>
<blockquote>
<p>The use of markup for presentational effects made web
pages confusing to screen reader users.</p>
</blockquote>
<p>The committee lists particular examples of the problems
introduced by this practice below.</p>Uso de los elementos fieldset y legend para poner un borde a un texto
<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>Pruebas
Procedimiento
- Comprobar que el significado semántico del elemento se expone a las tecnologías de asistencia y es apropiado para el contenido del elemento.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo.
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 F43 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.
