Scott O’Hara profundiza en el <figure> y <figcaption> elementos. Me encanta una buena inmersión profunda en HTML.
Los uso en casi todas las publicaciones de blog aquí sobre Programar Plusy, como sospechaba, básicamente lo he estado haciendo mal desde siempre. Mi pensamiento original fue que un figcaption fue tan bueno como el alt atributo. Generalmente lo uso para describir la imagen.
<figure>
<img src="https://css-tricks.com/how-do-you-figure/starry-night.jpg" alt="">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>Dejé intencionalmente el texto alternativo, porque el figcaption está diciendo lo que me gustaría decir en el alt texto y pensé que duplicarlo sería molesto (para un usuario de lector de pantalla) e innecesario. Scott dice que eso es malo, ya que el texto alternativo vacío hace que algunos lectores de pantalla no puedan descubrir la imagen y, como resultado, la figura no describe nada.
La respuesta correcta, creo, es hacer más trabajo:
<figure>
<img src="https://css-tricks.com/how-do-you-figure/starry-night.jpg" alt="An abstract painting with a weird squiggly tree thing in front of a swirling starry nighttime sky.">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>Es un buen objetivo y debería hacerlo mejor. Es solo la pereza lo que se interpone en el camino, y la pereza lo que me hace desear que hubiera un patrón que me permitiera escribir una descripción una vez que funcionó para ambos. Tal vez algo como Nino Ross Rodríguez acaba de compartir hoy, donde la inteligencia artificial puede tomar parte del impulso. Pero ese no es el punto aquí. El caso es que no puedes escribirlo una vez porque <figcaption> y alt hacer cosas diferentes.
Enlace directo →