Styling alt tags

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?

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Google photo

Je reageert onder je Google account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s