En prensa, revistas y libros es muy común encontrarnos con imágenes, gráficos o fragmentos de código acompañados de una Leyenda (un texto explicativo de dicho elemento). Hasta la aparición de HTML5 no era posible dar ningún carácter semántico a este tipo de elementos, ya que por ejemplo para un motor de búsqueda una imagen y la leyenda que la acompaña no tienen relación alguna. Además, y desde el punto de vista de diseño, debemos usar elementos adicionales para conseguir que la leyenda nos quede ajustada al Elemento que queremos darle significado.
Las etiquetas figure y figcaption, vienen resolver estos problemas. En el aspecto semántico, al crear una figura que contiene una leyenda, este texto queda unido a dicha figura, aportándole un valor semántico. En cuanto a diseño, una leyenda se coloca bien arriba a la izquierda o abajo a la izquierda (según la situemos en el código) de la figura que hayamos creado, lo que simplifica el marcado HTML y también el CSS para lograr tal posicionamiento. Como todo son ventajas, ¿qué tal si las vemos un poco más a fondo?.
Las figuras son algo más que imágenes
El uso más común del elemento figure es con las imágenes (sobre todo acompañadas de una leyenda con figcaption), pero no es la única forma de usar este elemento.
Podemos usar el elemento figure para una imagen con o sin leyenda, para un fragmento de código, en un vídeo relacionado con el contenido o también en una cita. También debemos tener en cuenta que una figura puede contener más de un elemento, así podemos tener varias imágenes, varios vídeos o porqué no, imágenes y vídeos, siempre teniendo en cuenta que sólo podemos usar una leyenda, ya que esta se asocia a la figura que hemos creado.
No todos las imágenes tienen que ser figuras
Con lo que hemos visto hasta ahora podrías verte tentado en crear figuras con todas y cada una de la imágenes de tu web, pero no lo hagas, es un completo disparate. Un elemento figure, según la especificación de la W3C, representa una unidad de contenido, con una leyenda opcional, que si bien se relaciona con el flujo principal, su posición es independiente de este. Por ejemplo una imagen para ilustrar un texto, bien puede ir antes, después o incrustada dentro del mismo, y no cambia con ello su significado.
Por tanto, nunca se debe usar un elemento figure para elementos de navegación, bien sean imágenes o iconos, para logos o elementos gráficos de una cabecera, en definitiva, para ningún elemento cuya posición dentro del documento sea relevante.
¿Y qué pasa con la propiedad alt?
Puede parecer raro, pero no es la primera vez que me encuentro con una imagen sin su correspondiente alt por la sencilla razón de estar contenido dentro de una figura con su correspondiente leyenda. Es un error garrafal, primero porque alt es una propiedad obligatoria cuando usamos una etiqueta img según las especificaciones de la W3C y de WHATWG y segundo, porque en lo que respecta a accesibilidad, el atributo alt es una descripción de la imagen que se visualiza cuando esta no puede ser vista por el usuario.
Una leyenda es también un texto explicativo, pero en este caso de la figura (recuerda que una figura puede contener más de un elemento), y que si la figura contiene una única imagen, bien puede coincidir con el texto del atributo alt, aunque no es necesario que así sea. Hay que tener claro que son dos conceptos diferentes y que el uso de una leyenda no exime del uso de la etiqueta alt en la imagen o imágenes que usemos.
Uso de figure y figcaption
Como lo más sencillo es ver ejemplos de código, eso es lo que vamos a hacer. Voy a poner tres ejemplos, todos ellos basados en imágenes, aunque son perfectamente extrapolables a cualquier otro tipo de elemento.
Figure sin figcaption
Figure con figcaption
Disfrutando de la torre Eiffel en mis vacaciones"
Figure con varias imágenes
El elemento figcaption puede ir tanto al principio como al final de la figura, pero nunca entre los elementos que componen la figura.
Mis dos hijas, Lucía y Alba
This post first appeared on Hexagonal Alien, Un Blog Sobre CSS Y HTML Para Ali, please read the originial post: here
