Técnica HTML WCAG 2.2
H49Usar marcado semántico para marcar el texto enfatizado o especial
En resumen
Esta técnica pide usar los elementos HTML con significado (em, strong, blockquote, q, cite, sub, sup, code) en lugar de limitarse a cambiar el aspecto del texto con estilos. Así la información que transmite el énfasis, una cita o un superíndice queda disponible por software: los lectores de pantalla pueden anunciarla con otra entonación y los agentes de usuario presentarla de forma distinta. Beneficia a quien no percibe el formato visual.
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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. 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 H49 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.
