Fallo común WCAG 2.2
F43Encabezados, citas y otras etiquetas usadas solo por su aspecto
Nombre oficial en el W3C: Fallo 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 pocas palabras
El error es usar una etiqueta con significado solo porque se ve como se quiere. Por ejemplo, un h4 para poner un texto en negrita o un blockquote para sangrar un párrafo. El lector de pantalla anuncia un encabezado o una cita que no existen. El aspecto debe darse con CSS.
Por qué es importante
Etiquetas como h1 a h6, blockquote, fieldset o th tienen un significado. El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) se lo comunica a la persona.
- Muchas personas ciegas se mueven por la página saltando de encabezado en encabezado. Un encabezado falso las lleva a un texto que no abre ninguna sección.
- Si un aviso se marca como cita, el lector dice «cita» y la persona cree que habla otra persona.
- La estructura que llega al lector deja de coincidir con la real. Cuesta más entender cómo se organiza el contenido.
Cómo evitarlo
- Elija cada etiqueta por lo que el contenido es, no por cómo se ve.
- Use encabezados solo para títulos de sección. Para destacar un precio, una oferta o una dirección, use un párrafo con una clase CSS.
- Use
blockquotesolo para citas. Para sangrar, usemarginopadding. - Use
fieldsetylegendsolo para agrupar campos de formulario. Para un recuadro con título, use CSS. - Si no puede cambiar una etiqueta heredada,
role="presentation"le quita su significado. Es un último recurso. - Las tablas de maquetación no son este fallo si no llevan
thnicaption. Aun así, hoy se maqueta 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. El motivo es que esas etiquetas 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. El lector de pantalla anuncia un encabezado de nivel 4 y una cita que no existen. Además, la lista de encabezados queda desordenada.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Párrafos con estilo para el efecto visual
El texto destacado y el aviso pasan a ser párrafos. Una clase CSS les da el mismo aspecto. Solo quedan los encabezados que abren secciones reales, y el lector ya no anuncia una cita inexistente.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>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 textos 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 algunos temas de WordPress insertan como separadores.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F43 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F43 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.