Texto alternativo con figure y figcaption

El término inglés figure se traduce en este contexto como figura o ilustración. Por otro lado caption es su leyenda. Por lo tanto el elemento <figure> está destinado a contener una ilustración con una leyenda en su elemento hijo <figcaption>. Es lo que en la prensa se denomina ilustración con pie de foto. Debemos usar estos nuevos elementos por su caracter semántico, no por su estilo visual. Así que tenemos que saber cuando le ponemos un pie de foto a una imagen.

Tal como expone la especificacion HTML5 <figure>, semánticamente es una parte de la página, opcionalmente con una leyenda, que es auto-contenida (como una frase completa) y es típicamente referenciada como una unidad en el resto de la página.

Continua exponiendo la especificación que una imagen con pie de foto sea una parte auto-contenida no significa necesariamente que sea independiente. Por ejemplo, una frase en un párrafo es auto-contenida; una imagen que es parte de una frase podría ser inapropiada para incluir en un elemento <figure>, pero una frase entera hecha de imágenes si podría serlo.

Todas las imágenes de una página no tendrían porque llevar necesariamente un pie de foto. Vea este ejemplo:

Ejemplo: Imágen no apta para <figure>

Este sitio Wextensible.com tiene como objetivo ofrecer el código fuente original de sus páginas. Ocasionalmente también se exponen partes del código en la pagina, pero en ese recurso encontrará la versión que actualmente se está usando en este sitio antes de salir del servidor, no como llega al navegador.

<img src="ejemplos/codigo-fuente.png" width="165" height="150"
alt="En la barra superior de las páginas de este sitio están las 
opciones de menú, donde una de ellas es la de 'Código' que nos 
lleva a una página para mostrar el código fuente." 
class="flota-izda borde" />
<p>Este sitio ...
</p>
        

Se trata de una imagen de información resumida. En ese ejemplo la imagen es parte del texto, complementando lo que se expone y tiene significado cuando se asocia con el texto. No se expone en el texto como se accede al código, pues la imagen es suficiente para entenderlo. Para los que no puedan verla se provee del texto alternativo. Si trasladamos la imagen a otra ubicación perdería significado.

Veámos ahora el uso de <figure> y <figcaption> con otro ejemplo:

Ejemplo: Uso de <figure>

Analizar el código fuente de las páginas web es una forma recomendable de aprender como otros hacen las cosas. Pero si las páginas están minimizadas (o minificadas) nos resultará díficil de leer, como se observa en la ilustración 32. Además si el servidor modifica contenidos el código resultante no será el verdadero código fuente. Por eso en este sitio Wextensible ofrezco la posibilidad de ver ese código tal como está almacenado en el servidor, tal como lo confeccioné y subí al sitio.

<figure role="group" id="ilust-32">
    <img src="ejemplos/codigo-fuente-minimizado.png" 
    width="255" height="148"
    alt="Código Fuente de una pagina web." class="borde" />
    <figcaption>
        Ilustración 32. Código fuente <strong>minimizado</strong> del buscador Google. La 
        eliminación de tabulaciones y saltos de línea que no son necesarios para renderizar una página 
        web dificultan la lectura del código.
    </figcaption>
</figure>
<p>Analizar el código fuente...
como se observa en la <a href="#ilust-32">ilustración 32</a>. 
Además si el servidor...
</p>
        

La especificación HTML5 aconseja que el elemento <figure> sea referenciado en el texto por su identificación como Figura 1, Ilustración 1 y términos similares. Incluso acompañando un vínculo que apunte a un identificador. Así al moverlos de sitio no afectarán al contenido principal, como sucedería si lo referenciáramos con la imagen anterior, siguiente imagen, adyacente, etc.

En este ejemplo podemos trasladar la ilustración a otra ubicación, como a un apéndice de ilustraciones. El texto no perderá significado pues hay un enlace que lleva a esa ilustración. Aportamos el atributo role="group" dado que el elemento <figure> no es ampliamente soportado por navegadores no visuales.

Proveemos de texto alternativo a la imagen que lo relaciona con el texto desde donde se referencia, en este caso estamos hablando del código fuente de una página web. En el <figcaption> exponemos lo que el usuario debe ver y entender de esa imagen, que el código fuente minimizado dificulta la lectura.

El elemento <figure> también es apto para imágenes complejas como diagramas, gráficas y fotografías que conlleven una extensa descripción. En este ejemplo lo usamos para un diagrama de flujo con un <figcaption> que contiene un enlace que nos lleva a una página con la descripción.

Ejemplo: Uso de <figure> para imágenes complejas

En la ilustración 12 podemos ver cómo renderiza una página web un navegador. El proceso en dos hilos para el HTML y el CSS hace que se bloqueen entre ellos cuando uno tiene que esperar por el otro. El objetivo es llegar al Layout y primer Pintado en el menor tiempo posible.

<figure role="group" id="ilust-12">
    <img src="/como-se-hace/desbloquear-css/ejemplos/flujo-carga-web.png" width="216" height="290"
    alt="Diagrama de flujo del proceso de renderizado de una página web en un navegador." class="borde" />
    <figcaption>Ilustración 12. <a href="/como-se-hace/desbloquear-css/#render">El proceso de renderizado en 
    los navegadores</a></figcaption>
</figure>
<p>En la <a href="#ilust-12">ilustración 12</a> podemos ver...
</p>
        

El elemento <figure> también puede servir para otros contenidos. En este ejemplo lo usamos para listados de código.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>...</title>
    <meta name="description" content="..." />
    <style>...</style>
</head>
<body>...</body>
</html>
             

<p>En el <a href="#cod-4">código 4</a> vemos...</p>
<figure id="cod-4">
    <figcaption>Código 4. Estructura básica de un HTML</figcaption>
    <pre><code>
&lt;!DOCTYPE html&gt;
...
     </code></pre>
</figure>
        

Obligatoriedad de uso del atributo alt

En la especificación HTML5 comenta las líneas generales del uso el atributo alt. Expone que ese atributo, excepto donde se especifique otra cosa, debe ser siempre declarado y su valor debe ser no vacío para representar a la imagen. Sin embargo no expone en esas líneas generales que en algunos casos puede ser vacío e, incluso, en otros podría ni siquiera aparecer. Veámos si nos aclaramos.

En la especificación técnicas para crear textos alternativos útiles (último Working Draft del 23/10/2014) encontramos lo siguiente:

Circunstancias en las que no es apropiado usar un atributo alt="":

1. Una imagen está contenido en un elemento <figure> y tiene asociado una leyenda en su <figcaption>. Usando un alt vacío ocultará la imagen a algunos usuarios. Si una imagen tiene una leyenda necesita ser descubierta por los usuarios, en otro caso una leyenda estará presente sin referirse a nada para algunos usuarios.

Más abajo habla sobre el uso de figure y figcaption y su relación con el texto alternativo:

El contenido del <figcaption> podría ser un texto alternativo para la imagen, obviándose la necesidad de uso del atributo alt. Esto sería el caso sólo si el contenido de la leyenda fuera un texto alternativo adecuado para la imagen.

En el ejemplo, del que capturé una pantalla, se observa que se omite el atributo alt en la imagen:

O hay algo que se me escapa o es una clara contradicción. Si hacemos caso a la primera definición siempre habrá que poner un alt no vacío para que el usuario pueda relacionar una leyenda de un pie de foto con una imagen. Una forma sencilla de arreglarlo es poner una referencia de texto en el atributo alt y en la leyenda, como en este ejemplo usando la referencia de texto (Imagen 1):

Ejemplo: Imágenes en figure con una referencia de texto en alt y figcaption

<figure>
    <img src="ejemplos/webpagetest-1.png" width="221" height="99"
    alt="(Imagen 1)" />
    <figcaption>Capturas de pantalla realizadas en Webpagetest.com observándose 
    que a <var>0.7</var> segundos la página es visible (Imagen 1)</figcaption>
</figure>
        

Puede haber un caso para omitir el atributo, que es cuando no hay un texto alternativo disponible en el momento de la publicación. Esto puede suceder si un imagen es el único contenido de un <figure> con un único <figcaption> con contenido. Expone que podría ser el caso de fotografías subidas a un sitio por los usuarios, de tal forma que en el momento de la publicación no se dispone de texto alternativo. En la leyenda podría proveerse de algunos datos del archivo, como nombre y fecha de creación. Pero se omite el atributo alt para la imagen. Remarca la especificación lo siguiente:

Tales casos deben ser los mínimos posibles. Sí hay incluso la más ligera posibilidad de que el autor tenga la posibilidad de proveer un texto alternativo entonces no es aceptable omitir alt.

Ese párrafo es mas tajante dejando pocas posibilidades para no usar el atributo. En resumen, dudas que se presentan que habrá que ir resolviendo.

Imágenes con pie de foto sólo con HTML4.1

En este y el siguiente apartado veremos como configurar estilo para un componente de pie de foto. El siguiente ejemplo es uno que ya venía usando en este sitio usando sólo elementos <div>.

Ejemplo: CSS para un pie de foto con HTML4.1

Pestaña Recursos de Developer Tools con todas las imágenes de una página.

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim.

<div class="flota-izda foto-pie" style="width: 252px"><img
src="ejemplos/recursos-images.png" 
width="250" height="250" class="borde"
alt="" /><div>Pestaña Recursos de Developer Tools con todas las 
imágenes de una página.</div></div>
<p>Lorem ipsum...
</p>
        

El CSS del componente es genérico y debe servir para insertar pies de foto con imágenes de diferentes anchos en cualquier página. Por eso no declaramos el ancho para la leyenda, el elemento <div> interior, teniendo por defecto width: auto con lo que se adaptaría al ancho del texto de la leyenda.

[class~=foto-pie] div {
    font-size: 0.8em; 
    line-height: 1.2em;
    font-style: italic; 
    padding: 0.1em;
    color: navy;
    background-color: aliceblue;
    border: gray solid 1px;
}
    

Luego con estilo en línea al elemento exterior hacemos que el ancho de la leyenda se adapte al ancho de la imagen declarando style="width: 252px", sumando 2px al ancho de la imagen para incluir bordes. Esto del estilo en línea o local no es muy conveniente a efectos de optimizar la velocidad de carga de la página.

Una forma de evitarlo es usasndo la propiedad CSS display: table para el elemento exterior y display: table-caption para la leyenda.

Ejemplo: CSS para un pie de foto usando display: table y table-caption

Pestaña Recursos de Developer Tools con todas las imágenes de una página.

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim.

<div class="flota-izda piefoto"><img
src="ejemplos/recursos-images.png" 
width="250" height="250" class="borde"
alt="" /><div>Pestaña Recursos de Developer Tools con todas las 
imágenes de una página.</div></div>
<p>Lorem ipsum...
</p>
        

El elemento exterior de clase piefoto tiene este CSS:

.piefoto {
    display: table;
    margin: 0 0.2em 0.2em 0;
}
.piefoto div {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.8em;
    line-height: 1.2em;
    font-style: italic;
    padding: 0.1em;
    color: navy;
    background-color: aliceblue;
    border: gray solid 1px;
}
   

Imágenes con pie de foto usando figure

Para usar el nuevo elemento <figure> para un pie de foto con su leyenda en <figcaption> podemos usar el estilo último del apartado anterior.

Ejemplo: Imágenes con pie de foto usando figure

Las imágenes en la Web son elementos imprescindibles a la vez que suponen un importante consumo de recursos. Con las herramientas de desarrollo podemos analizarlas, tal como se observa en la Figura. Si queremos que un sitio se adapte a los dispositivos tanto en tamaños de pantalla como en optimización de la velocidad de carga, tenemos que gestionar las imágenes con HTML-5.1.

<div class="flota-izda"><figure class="foto-fig"><img 
    src="ejemplos/recursos-images.png"
    width="250" height="250" class="borde"
    alt="Figura" /><figcaption>
        <em class="ref-foto-fig">Figura</em>. 
        Pestaña Recursos de Developer Tools 
        con todas las imágenes de una página.
    </figcaption>
</figure></div>
<p>Las imágenes en la Web..., tal como se observa en 
la <em class="ref-foto-fig">Figura</em>. Si queremos...
</p>
        

El texto alternativo alt contiene la palabra Figura y, si es posible, un número de orden. Así podrá ser relacionada con la leyenda y el texto adyacente donde aparecerá también esa referencia. Más texto alternativo se agregará, si fuera el caso, antes o después de esa referencia en alt. El CSS necesario para todo esto es el siguiente:

article {
    counter-reset: contador-fig;
}
.foto-fig {
    display: table;
    margin: 0 auto;
    counter-increment: contador-fig;
}
.foto-fig figcaption {
    display: table-caption;
    caption-side: bottom;
    line-height: 1.2em;
    font-style: italic; 
    padding: 0.1em;
    border: gray dotted 1px;
    color: navy;
}
.ref-foto-fig:after {
    content: " "counter(contador-fig); 
}
    

Usaré un etiquetado Figura N, donde N es un número de orden de los pies de foto. El inconveniente es que hay que poner especial cuidado cuando la referenciemos en el texto o en el atributo alt. Si agregásemos un nuevo pie de foto en medio de otros tendríamos que volver a enumerar todas las siguientes referencias.

Solventaremos este problema con una automatización de las referencias usando un counter-reset en cada elemento <article>. Con un elemento <em class="refer-foto-fig">Figura</em> obtendremos la referencia automática, pues se agregará un número a continuación usando contenido generado con CSS. Pero la numeración en el atributo alt es más díficil de automatizar. Quizás usando JavaScript sería posible, pero es un exceso de carga no aconsejable.

Intentando al menos conservar las referencias en el texto, la leyenda y en alt usaremos la palabra Figura sin numeración en los tres sitios cuando redactemos el HTML. Luego el CSS generará el número en la leyenda y en el texto. Esto es porque hay que tener cuidado con el contenido generado con CSS desde el punto de vista de la accesibilidad. Si un navegador no visual desestima el contenido generado no aparecerá la numeración. Per al menos en los tres lugares adyacentes tendremos la misma palabra Figura, conservando así cierta integridad en las referencias.