houbi.com / blog

Would it be possible to style the alternative text that is displayed when an image does not load ( This is particularly useful for newsletters, as the default for most mail packages is to NOT display the images right away). My first reaction was: nah, this can’t be done. Second: uhm, let’s try. Third: well have you evah.

Turns out that by setting the text properties (style:text-align, color, font-size ..) of an image, which normally don’t have an effect as the thing IS an image, the alt-text of the image inherits these properties and thus shows up when the image doesn’t load.

That way in our latest vdab magezine-newsletter, we managed to style the head in such a way that the header still comes across well, and the decorative images are hidden ( color: white for those ones ). And that way, the mail still manages to look reasonably nice when opened at first. And it is super-accessible in the same go.

With images loaded:	Without them:

Related, on the subject of alt-tags, read this accessibility blog entry: Should alt text be used to paint a thousand words?