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 word (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…
By Harry Roberts on Saturday, June 18th, 2011 in Web Development. Tags: Accessibility, Images, UX | 8 Comments »
+
Adam said on 18 June, 2011 at 8:22 pm
That’s interesting that Firefox allows for the ::after selector on images–as far as I understood it, ::after and ::before were undefined on self-closing elements.
Jules said on 19 June, 2011 at 2:08 am
Interesting!
I currently (but, perhaps, no longer) use a statement for the captions on the images on my blog. Never thought about altering the alt text.
Rochester said on 19 June, 2011 at 5:10 am
Haven’t tried but I’m quite sure you could put content: “(image)” to the img tag itself (so you don’t need to rely on pseudo elements, you know).
[]’s
Rochester
Felipe said on 19 June, 2011 at 10:51 am
@Rochester : please don’t do that. Alt texts are heard by screen reader users and they would hear twice “image”, thus annoying them A LOT. ;)
A screen reader’ll say “image” when encountering an image tag then read the alt text (and tell there’s a longdesc attribute, maybe) and would say “parenthesis image parenthesis” (sth like that) again.
An alt text should tell the user all the information provided by an image (and area tag and input[type="image"] tag) in the most concise form. No more no less :)
Generated content in CSS (content, :before and :after) aren’t read by screen readers, that’s probably why Harry Roberts chose this solution.
That’s also why someone should never convey information via CSS, whether content, color-only or whatver; you’re never sure that CSS are on or perceived.
Sébastien Delorme said on 19 June, 2011 at 9:52 pm
Great idea Harry.
As Felipe stated, with this solution, screen readers (for example) are not polluted by this unnecessary content (they use the semantics of HTML tags to indicate the type of content).
stope said on 20 June, 2011 at 9:42 am
You can also style the ALT if the image is contained in a link – by styling the link. Should work in most modern browsers (obviously not including IE)¨…
Gaël Poupard said on 22 June, 2011 at 8:40 am
Also, did you know that Chrome & Safari won’t display the alt text if it cannot be writen on a single line..?
Julie said on 23 September, 2011 at 11:08 pm
@Felipe: VoiceOver on Mac OSX Snow Leopard reads CSS generated content.