Técnica Técnicas generales WCAG 2.2
G115Marcar la estructura con las etiquetas que corresponden a su significado
Nombre oficial en el W3C: Usar elementos semánticos para marcar la estructura
En pocas palabras
Cada parte de una página debe marcarse con la etiqueta que dice lo que es: encabezado, párrafo, lista, tabla, cita o texto enfatizado. No se elige por su aspecto, sino por su significado. Así el navegador y los lectores de pantalla pueden reconocer la estructura que se ve.
Por qué es importante
Una persona que ve la página distingue los títulos y las listas por su tamaño o su forma. Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) solo los distingue si el código los marca.
Con buena estructura, la persona puede saltar de encabezado en encabezado o saber que una lista tiene cinco elementos. Si todo es <div> con estilos, la página se oye como un bloque de texto continuo.
Cómo se hace
- Marque los títulos con
<h1>a<h6>, siguiendo su jerarquía. - Use
<p>para los párrafos y<ul>,<ol>o<dl>para las listas. - Use
<table>con<th>solo para datos en tabla, no para maquetar. - Dentro del texto, use
<em>o<strong>para el énfasis,<blockquote>o<q>para las citas y<abbr>para las abreviaturas. - Cambie el aspecto con CSS, no eligiendo una etiqueta por cómo se ve.
Cómo comprobarlo
- Desactive los estilos de la página (por ejemplo, con una extensión del navegador) y compruebe que la estructura se sigue entendiendo.
- Revise el código con las herramientas del navegador (tecla F12): títulos, listas y tablas deben usar sus etiquetas.
- Use una extensión que muestre los encabezados y compruebe que coinciden con los títulos visibles.
- Con un lector de pantalla, recorra la página por encabezados y por listas.
Ejemplo
Fragmento de una noticia municipal marcado según el significado de cada parte.
<h2>Nuevo horario de la biblioteca</h2>
<p>Desde el 1 de octubre, la biblioteca abre <strong>también los sábados</strong>.</p>
<h3>Horario</h3>
<ul>
<li>De lunes a viernes: de 9:00 a 20:00</li>
<li>Sábados: de 10:00 a 14:00</li>
</ul>
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 G115 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
Lenguajes de marcado, incluido HTML
Descripción
El objetivo de esta técnica es marcar la estructura del contenido web utilizando los elementos semánticos apropiados. En otras palabras, los elementos se utilizan según su significado, no por la forma en que se muestran visualmente.
Utilizar los elementos semánticos apropiados garantiza que la estructura esté disponible para el agente de usuario. Esto implica indicar explícitamente la función que tienen las distintas unidades en la comprensión del significado del contenido. De este modo puede indicarse la naturaleza de un fragmento de contenido como párrafo, encabezado, texto enfatizado, tabla, etc. En algunos casos también deben indicarse las relaciones entre unidades de contenido, como entre encabezados y subencabezados o entre las celdas de una tabla. El agente de usuario puede entonces hacer perceptible la estructura para el usuario, por ejemplo utilizando una presentación visual distinta para los distintos tipos de estructura o utilizando una voz o un tono diferentes en una presentación sonora.
En HTML, por ejemplo, los elementos de nivel de frase como em, abbr y cite añaden información semántica dentro de las oraciones, marcando el texto enfatizado e identificando abreviaturas y citas, respectivamente. MathML, un lenguaje de marcado diseñado para mantener distinciones importantes entre estructura y presentación en matemáticas, incluye un marcado especial de «presentación» para las notaciones complejas que se utilizan para representar ideas matemáticas, así como un marcado de «contenido» (semántico) para las propias ideas matemáticas.
Ejemplos
Enlazar a otra página
Un párrafo contiene un hiperenlace a otra página. El hiperenlace se marca utilizando el elemento a.
<p>Do you want to try our new tool yourself? A free demonstration
version is available in our <a href="download.html">download section</a>
</p>
Usar cite y blockquote para hacer referencia a un libro y a una cita extraída de él
Una página sobre la historia del matrimonio utiliza como ejemplo una cita de la novela de Jane Austen Orgullo y prejuicio. La referencia al libro se marca utilizando el elemento cite y la cita en sí se marca utilizando el elemento blockquote.
<p>Marriage was considered a logical step for a bachelor, as can be seen in the
first chapter of the novel <cite>Pride and Prejudice</cite>:</p>
<blockquote>
<p>It is a truth universally acknowledged, that a single man in
possession of a good fortune, must be in want of a wife.</p>
<p>However little known the feelings or views of such a man may
be on his first entering a neighbourhood, this truth is so well
fixed in the minds of the surrounding families, that he is considered
the rightful property of some one or other of their daughters.</p>
</blockquote>
Usar el elemento strong para enfatizar texto importante
Un manual de automóvil explica cómo arrancar el motor. Las instrucciones incluyen una advertencia para asegurarse de que la marcha está en punto muerto. El autor considera que la advertencia es tan importante que debe enfatizarse, por lo que la advertencia se marca utilizando el elemento strong.
<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear is in neutral</strong>
Next, turn the key in the ignition. The engine should start.</p>
Usar los elementos em y strong para enfatizar texto
<p>What the user <em>really</em> meant to say was,
<q>This is not ok, it is <strong>excellent</strong>!</q>
</p>
Usar resaltado y color de fondo para identificar visual y semánticamente información importante
<style>
.vocab {
background-color:cyan;
font-style:normal;
}
</style>
...
<p>New vocabulary words are emphasized and highlighted with a cyan background.</p>
<p>The <em class="vocab">scathing</em> review of the play seemed a bit too harsh.</p>
Pruebas
Procedimiento
- Comprobar si hay partes del contenido que tienen una función semántica.
- Para cada parte que tenga una función semántica, si existe en la tecnología el marcado semántico correspondiente, comprobar que el contenido se ha marcado utilizando ese marcado semántico.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
- HTML Living Standard
- HTML - Phrasing content (contenido de nivel de frase)
- Mathematical Markup Language (MathML)
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G115 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.