Técnica HTML WCAG 2.2
H49Usar etiquetas con significado para el texto destacado o especial
Nombre oficial en el W3C: Usar marcado semántico para marcar el texto enfatizado o especial
En pocas palabras
Cuando un texto tiene un sentido especial, debe marcarse con la etiqueta HTML que lo indica, no solo con estilos. Por ejemplo, strong para lo importante, em para el énfasis, blockquote para una cita o sup para un exponente. Así el significado no se pierde aunque cambie el aspecto.
Por qué es importante
Si un aviso solo está en rojo o en negrita con CSS, el significado depende de verlo. Al leer la página con un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla), con estilos propios o en modo lectura, ese matiz desaparece.
Con la etiqueta adecuada, el significado queda en el código. Algunos lectores de pantalla pueden anunciarlo o cambiar la entonación. Otros programas pueden mostrarlo de otra forma. Por ejemplo, «m²» escrito como m<sup>2</sup> se entiende como metros cuadrados.
Cómo se hace
- Use
<strong>para lo importante: «Plazo improrrogable». - Use
<em>para el énfasis que cambia el sentido de la frase. - Use
<blockquote>para citas largas,<q>para citas breves y<cite>para el título de una obra. - Use
<sup>y<sub>para exponentes y subíndices, y<code>para código informático. - No use estas etiquetas solo para cambiar el aspecto. Para eso está el CSS.
- Si la información es clave, dígala también con palabras: «Importante: …». No confíe solo en el formato.
Cómo comprobarlo
- Busque en la página textos destacados: negritas, cursivas, citas, exponentes.
- Con las herramientas del navegador (F12), compruebe si usan etiquetas con significado o solo estilos, como
<span class="rojo">. - Desactive los estilos de la página (por ejemplo, con el modo lectura) y confirme que el texto importante se sigue entendiendo.
- Revise que las etiquetas no se usan solo por su aspecto, como
<blockquote>para hacer sangría.
Ejemplo
Aviso de una convocatoria con el plazo marcado como importante y una superficie con exponente.
<p>
<strong>Importante:</strong> el plazo termina el 30 de noviembre.
</p>
<p>Superficie mínima del local: 50 m<sup>2</sup>.</p>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 H49 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 mostrar cómo puede usarse el marcado semántico para marcar el texto enfatizado o especial de modo que pueda determinarse por software. Usar marcado semántico para marcar el texto enfatizado o especial también aporta estructura al documento. Los agentes de usuario pueden entonces hacer perceptible esa estructura para el usuario, por ejemplo mediante una presentación visual distinta para los diferentes tipos de estructura o mediante una voz o un tono distintos en una presentación sonora.
La mayoría de los agentes de usuario distinguen visualmente el texto que se ha identificado con marcado semántico. Algunas tecnologías de asistencia proporcionan un mecanismo para determinar las características del contenido creado con un marcado semántico correcto.
Ejemplos
Consulte los ejemplos renderizados de texto semántico.
Usar los elementos em y strong
para enfatizar texto
Los elementos em y strong están
diseñados para indicar un énfasis estructural que puede representarse de distintas formas
(cambios en el estilo de la fuente, cambios en la inflexión de la voz, etc.).
... What she <em>really</em> meant to say was, "This is not OK,
it is <strong>excellent</strong>"! ...Usar el elemento blockquote para marcar citas largas de otra fuente
Este ejemplo también muestra el uso del elemento cite para indicar una referencia.
<p>The following is an excerpt from the <cite>The Story Of My Life</cite>
by Helen Keller:</p>
<blockquote>
<p>Even in the days before my teacher came, I used to feel along the square stiff
boxwood hedges, and, guided by the sense of smell, would find the first violets
and lilies. There, too, after a fit of temper, I went to find comfort and to hide
my hot face in the cool leaves and grass.</p>
</blockquote>Usar el elemento q para marcar una cita más corta de otra fuente
Las comillas no se añaden manualmente a la cita porque las añade el agente de usuario.
<p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world</q>.</p>Usar los elementos sup y sub para marcar superíndices y subíndices
Los elementos sup y sub deben usarse únicamente para marcar convenciones tipográficas con un significado concreto, no para una presentación tipográfica meramente estética.
<p>Henry won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>Usar el elemento code para marcar código
Este ejemplo muestra el uso del elemento code para dar énfasis visual a una regla CSS:
<code>
.trial {
background-image: url(30daytrial.jpg);
background-position: left top;
background-repeat: no-repeat;
padding-top: 68px;
}
</code>Pruebas
Procedimiento
- Examinar el contenido en busca de información que se transmita mediante variaciones en la presentación del texto.
- Comprobar que se ha usado el marcado semántico adecuado (como
em,strong,cite,blockquote,subysup) para marcar el texto que transmite información mediante variaciones en el texto.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
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 H49 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.