Semántica del texto: énfasis, citas, abreviaturas, fechas y figuras

Los landmarks y los encabezados que vimos en la lección anterior organizan la página en grandes bloques. Dentro de esos bloques está el texto, y HTML también tiene elementos para describirlo: énfasis, citas, abreviaturas, fechas, código, figuras, cambios en un documento. Algunos llegan a la persona usuaria de lector de pantalla y otros, en la práctica, no. Esta lección explica qué aporta cada uno, qué se anuncia de verdad y cuándo hay que reforzar el marcado con texto para no incumplir 1.3.1 Información y relaciones.

Qué llega y qué no llega al lector de pantalla

El navegador expone casi todos estos elementos en el árbol de accesibilidad. WAI-ARIA 1.2 (se abre en una ventana nueva) incluso añadió roles específicos para representarlos (emphasis, strong, blockquote, code, deletion, insertion, time, subscript, superscript). Pero que algo esté en el árbol no significa que se anuncie. Los lectores de pantalla deciden qué verbalizan y, con su configuración por defecto, los más usados (NVDA, JAWS, VoiceOver) normalmente no anuncian el énfasis, los tachados ni el texto resaltado. Sí suelen anunciar las listas, los encabezados, los enlaces, las tablas y, según la configuración, las citas en bloque y las figuras.

De ahí sale la regla práctica de toda la lección: usa el elemento semántico correcto, porque es lo que pide HTML y lo que aprovechan los navegadores, los lectores que sí lo anuncian, los modos de lectura y los traductores; pero si un significado es imprescindible para entender el contenido, exprésalo también con palabras.

Énfasis: strong, em, b e i

HTML distingue cuatro elementos que muchas veces se confunden. <strong> indica importancia («No envíes el original»). <em> indica énfasis que cambia el sentido («Yo no dije eso»). <b> llama la atención sobre un texto sin darle más importancia (palabras clave de un resumen, el nombre de un producto en una reseña). <i> marca una voz o modo distinto: términos técnicos, nombres científicos, pensamientos de un personaje o expresiones en otro idioma (que además llevan lang, como verás en la lección sobre título e idioma).

Elegir bien importa para los programas que procesan el texto y para quien configura su lector para anunciar el énfasis. Pero lo decisivo es no depender solo de él. Si la negrita transmite información que la persona necesita, esa información tiene que estar en el texto.

<p>Los campos en negrita son obligatorios.</p>
<label for="dni"><b>DNI</b></label>

Citas, abreviaturas y fechas

Citas

<blockquote> marca una cita larga en bloque; NVDA y JAWS pueden anunciar «cita» al entrar y «fuera de cita» al salir, de modo que la persona sabe dónde acaba la voz del autor citado. <q> marca una cita breve dentro de una frase y el navegador añade las comillas con CSS: no escribas comillas a mano dentro de <q> o aparecerán duplicadas. <cite> sirve para el título de una obra (un libro, una ley, una película), no para el nombre de la persona citada. No uses <blockquote> para sangrar texto que no es una cita: el lector anunciará una cita que no existe.

Abreviaturas y siglas

<abbr title="…"> permite asociar el desarrollo de una sigla, pero el title no aparece con el teclado ni en pantallas táctiles, y los lectores de pantalla no lo leen de forma fiable. La técnica robusta es la que ya conoces del curso de redacción: desarrollar la sigla en el texto la primera vez («el Servicio Público de Empleo Estatal (SEPE)») y, si quieres, envolverla además en <abbr>. El criterio específico es 3.1.4 Abreviaturas (AAA), pero una sigla que nadie entiende afecta a cualquier persona.

Fechas y horas

<time> aporta una versión legible por máquinas mediante datetime, útil para buscadores, calendarios y extensiones. El lector de pantalla lee el texto visible, así que ese texto debe ser inequívoco:

<p>Plazo de presentación: hasta el
  <time datetime="2025-06-30">30 de junio de 2025</time>.</p>

Escribir «30/06/25» dentro de <time> no lo hace más claro: el lector dirá «30 barra 06 barra 25».

Cambios, resaltados, índices y notas

<del> e <ins> representan texto eliminado y añadido (por ejemplo, en una versión revisada de unas bases o en un precio rebajado) y <mark> resalta texto relevante en un contexto, como los términos buscados en una página de resultados. Los tres se ven con claridad en pantalla y, con la configuración habitual, no se anuncian. El caso típico en comercio electrónico:

<!-- Incorrecto: se oye «30 € 20 €» -->
<p><del>30 €</del> 20 €</p>

<!-- Correcto: el significado está en el texto -->
<p><del>Antes: 30 €</del> <ins>Ahora: 20 €</ins></p>

Si el diseño no admite las palabras visibles, añádelas con un texto oculto visualmente mediante la clase CSS adecuada (lo verás en el curso de CSS) y comprueba el resultado con un lector.

<sup> y <sub> tampoco se anuncian: m<sup>2</sup> puede leerse «m 2». Para unidades, usa el carácter tipográfico («m²») o el texto («metros cuadrados»). Para las llamadas a notas al pie, usa un enlace con un nombre que se entienda fuera de contexto:

<p>La tasa se reduce un 50 %<sup><a href="#nota1" id="ref1" aria-label="Nota 1">1</a></sup>.</p>
…
<p id="nota1">1. Para familias numerosas. <a href="#ref1">Volver al texto</a></p>

El nombre «Nota 1» contiene el texto visible «1», así que cumple 2.5.3 Etiqueta en el nombre, y el enlace de vuelta evita que la persona pierda su posición.

Figuras, código y separadores

<figure> agrupa un contenido autónomo (una imagen, un gráfico, un fragmento de código, una cita destacada) con su pie en <figcaption>. El navegador usa el <figcaption> como nombre de la figura y los lectores anuncian «figura» al entrar. El pie no sustituye al alt de la imagen: el alt dice qué muestra la imagen y el pie la contextualiza («Figura 3. Evolución de las solicitudes, 2020-2024»). Si ambos dicen lo mismo, la persona lo oye dos veces; cómo escribir cada uno lo viste en el curso de imágenes.

Para código, <code> marca fragmentos, <pre> conserva espacios y saltos, <kbd> indica teclas que hay que pulsar y <samp> la salida de un programa. Cuidado con el arte ASCII o los diagramas hechos con caracteres dentro de <pre>: el lector los deletrea símbolo a símbolo. Si es un dibujo, trátalo como una imagen con su alternativa textual.

Por último, los separadores. <hr> representa un cambio de tema y se expone como separador. En cambio, los caracteres usados como separadores visuales («Inicio | Trámites | Contacto») se leen tal cual: «barra vertical». Si los enlaces forman un grupo, son una lista; el separador va en CSS. Y <br> sirve para saltos de línea con significado (una dirección postal, los versos de un poema), no para crear espacio ni para simular listas.

Resumen

• Usa cada elemento de texto por su significado (strong, em, blockquote, q, cite, abbr, time, figure), no por su aspecto.
• Con su configuración habitual, los lectores de pantalla no anuncian énfasis, tachados, resaltados ni superíndices: si el significado es imprescindible, ponlo en palabras (1.3.1).
• Desarrolla las siglas en el texto y escribe fechas inequívocas; title y datetime no se leen.
• figcaption da nombre a la figura, pero no sustituye al alt de la imagen.
• Nada de separadores con caracteres, blockquote para sangrar ni br para maquetar.