18 June, 2011

Written by on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

1. The code

I tweeted a tip the other day whereby you add text styles to images so that their alt text is differentiated if images, for whatever reason, cannot be loaded.

The tweet sparked more interest than I expected so I thought I would give the technique a more thorough writeup. The CSS is incredibly simple but it’s just one of those things that can make a lot of difference to someone’s UX.

The thinking is that by applying text-styles to images you can affect their alt text and how that appears if the image fails to load. This can help users realise there’s something different about a piece of content and that it’s perhaps not directly a part of the current text.

A lot of people weren’t aware this would or does work but if you think about it, any alt text you’ve ever seen will have been the same face, colour and style as the rest of the page. alt text (and therefore images) can be styled!

The code

I started doing this a long, long time ago but for some reason completely forgot about it until I started developing inuit.css.

I tend to always apply italics to the text and oftentimes a text colour. Italics is fairly failsafe as figures and asides etc are often set in italics.

Text colours can be more troublesome as it could be misconstrued as being a link, so use this wisely and avoid using the same colour as your links appear in.

Another fairly progressive (but potentially unstable) addition is to use the :after pseudo-element to append the text ‘(image)’ onto the alt text. This only seems to work in Firefox (4).

The code, in full, is simply:

img{
    font-style:italic;
    color:#c00;
}

/**
 * In Firefox we can insert the string ‘(image)’ into the alt text of an image that hasn’t loaded.
 */
img:after   { content:" (image)"; }
img::after  { content:" (image)"; } /* New CSS3 standard notation */

So there we have it, a simple, tiny addition to make your users’ experience a little more polished and complete…