El lenguaje html no dispone de todas las etiquetas que desearíamos. Esto nos suele hacer darle unas cuantas vueltas de cabeza a la forma de marcar ciertos elementos que no disponen de una etiqueta específica, como pueden ser los poemas.

Hasta ahora siempre he utilizando párrafos y saltos de línea para separar los versos, aunque ultimamente me pregunto si no sería más correcto utilizar la etiqueta <pre> (texto preformateado).

En la especificación de HTML 4.01 del w3c, precísamente se usa un poema como ejemplo de texto preformateado. Es un caso en el que el espacio en blanco, o mejor dicho, la separación en líneas, es importante, luego la etiqueta <pre> posiblemente sea la más adecuada para este fin dado que la etiqueta <br> simplemente marca un salto de línea sin aportar más significado al elemento al que se aplica.

El problema de ambas opciones es que su propia semántica es relativa a la presentación visual. El texto preformateado indica un formato visual, al igual que el salto de línea un retorno de carro, por lo que, los agentes de usuario no visuales pueden ignorar los espacios en estas etiquetas, que es lo que hacen, supongo, corréctamente de forma intencionada o por casualidad… .

Después de probar varios códigos para poemas, aplicando en algunos casos estilos aurales como span.pause-after{ 500ms;}, con resultados decepcionantes en los tres lectores de pantalla usados (JAWS, NVDA y Thunder Screenreader), comprobé que el único elemento eficaz es un signo de puntuación como el punto y coma para separar los versos.

Lo que distingue la poesía de la prosa, basicamente es que está escrita en verso. La escritura en verso implica que la lectura del texto va a tener pausas entre cada verso. Visualmente esto se consigue mediante la escritura de cada verso en una línea, pero, a pesar de que los versos no se separen en su escritura con signos de puntuación, para una persona invidente que no pueda apreciar esta separación de líneas visualmente, estos signos de puntuación se hacen necesarios.

Lo ideal sería generar ese signo de puntuación con css mediante una declaración como span:after{content: “;”}, de manera que el punto y coma no estuviera en nuestro código html. De momento esta técnica también es ignorada por lectores de pantalla, al menos los que yo he probado.

Aunque no es una solución del todo perfecta, me quedo con la opción de escribir los poemas, o mejor dicho las estrofas en etiquetas <pre> utilizando un punto y coma al final de cada verso que se ocultará a los agentes de usuario visuales mediante un indentado o posición absoluta negativa. También sería de gran utilidad un texto o encabezado que preceda al poema indicando de qué se trata.

Ejemplo de código:

<h2>Poema</h2>
<pre>
Y un inútil acto de osadía<span class="indentado">;</span>
Antes de que baje el telón<span class="indentado">;</span>
Llorar otra causa perdida<span class="indentado">;</span>
Desde el podio de la rendición<span class="indentado">;</span>
</pre>

En xhtml 2.0 se añade el elemento <l> (línea) que será mucho más apropiado para marcar poemas. Sólo nos queda esperar que los lectores de pantalla lo interpreten corréctamente.