Fallo común WCAG 2.2
F2Títulos y estructura que solo se notan por el aspecto del texto
Nombre oficial en el W3C: Fallo 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 pocas palabras
Este error ocurre cuando un texto parece un título, una lista u otra parte de la estructura solo por su aspecto: letra grande, negrita o una imagen con texto. A la vista se entiende. Pero el navegador y los lectores de pantalla no lo reconocen, porque falta la etiqueta HTML adecuada, como h2 o ul.
Por qué es importante
Las personas ciegas usan el lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) para saltar de título en título. Así encuentran rápido la sección que buscan, como «Plazos» en una convocatoria.
Si los títulos son párrafos en negrita, el lector no los encuentra. La persona tiene que escuchar toda la página de principio a fin. Tampoco funcionan los índices automáticos ni el modo de lectura de algunos navegadores.
Cómo evitarlo
- Marque cada título con un encabezado, de
h1ah6, según su nivel. Después dele el aspecto que quiera con CSS. - Use listas reales (
ul,ol) para las enumeraciones, no guiones y saltos de línea. - Si un título es una imagen con texto, póngala dentro del encabezado con un
altigual al texto. Mejor aún, cámbiela por texto con estilo. - En WordPress y otros gestores, elija «Encabezado 2» o «Encabezado 3». No se limite a poner el texto en negrita y más grande.
- Revise los bloques de título de los maquetadores visuales. Algunos usan
divoppor defecto.
Ejemplo práctico
Pasa a menudo en páginas informativas de ayuntamientos y en entradas de blog hechas con el editor. Los títulos de sección se escriben como párrafos con letra grande y negrita. Parecen encabezados, pero no lo son.
Así no: Párrafos con aspecto de encabezado
«Cita previa en el Registro General» y «Documentación necesaria» son párrafos (p) con una clase CSS. A la vista ordenan la página. Pero el lector de pantalla los lee como texto normal. No salen en la lista de encabezados y no se puede saltar a ellos con la tecla H.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Encabezados reales con el mismo aspecto
Los párrafos pasan a ser h1 y h2, con las mismas clases CSS. El diseño no cambia. Ahora el navegador y los lectores de pantalla reconocen la estructura, y se puede navegar por encabezados.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Títulos de sección escritos como
<p><strong>…</strong></p>o como undivcon la clase «h2», en lugar del elemento de encabezado. - Imágenes o banners con el texto «Nuestros servicios» que hacen de encabezado. No están dentro de un
h2y no hay otro encabezado real en texto. - Bloques de título de los maquetadores visuales de WordPress configurados con la etiqueta
divop, en lugar deh2oh3. - Encabezados que en móvil se cambian por textos en negrita distintos de los de escritorio.
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 F2 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
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 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 F2 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.