As we know all too well, we can’t specify borders as percentages. This is a major annoyance if you’re working (or attempting to work) large borders into a responsive design. It may not be all that difficult with images, it turns out.

Instead of applying something like this:

img{
  max-width:100%;
  border:5px solid red;
}

Simply use:

img{
  max-width:98%;
  padding:1%; /* A percentage that, when doubled and added to the above, makes 100%. */
  background:red; /* Color of the faux border. */
}

Demo

I made a jsFiddle and here is its output.

Now this does seem ridiculously obvious but a quick bit of Googling (other search engines are available) yielded nothing similar. Apologies is someone’s beaten me to this and I’m retreading old ground.

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…

When not to use it

You should never not use an alt attribute, rather leave it empty, thus: alt=""

The only time you can really get away with not having a complete alt attribute is if the image holds no context or information that the user needs to be aware of. This is usually the case when the image is purely decorational, though it may be argued that the image should therefore be added through CSS in the spirit of separating style and content. By that token it is fairly safe to say that there should never be an instance in which you leave an alt attribute empty.

You’re using it, but not quite right…

The next best scenario is that you are using images correctly, for their correct purpose and are using alt attributes, but they don’t really do as much as they should. A lot of the time I come across images that have less than ideal alt attributes.

Image sourced via Google Images—original author unknown.

One example might be the above image of a car. This, while technically correct, is not ideal: <img src="/img/car.jpg" alt="Car" />. All this tells the user is ‘Car’. It doesn’t say whether it’s a picture with the word car in it, or whether it’s a picture of a car. A much better alt attribute would be alt="A photograph of an abandoned car" (as used in my code).

Other poor uses

Another real-world example of poor alt attribute usage is actually on CNN’s website. On their home page today (26 January, 2010) they have a series of headlines with accompanying images. The code for such a pairing looks like this:

<img height="68" border="0" width="120" alt="Haiti's swanky club →
now home to misery" src="http://i.cdn.turner.com/cnn/2010/WORLD/ →
americas/01/26/haiti.camp/tzvids.haiti.aid.cnn.jpg"> →
… Haiti's swanky club now home to misery

This is wrong on two counts:

1. A screenreader will read out to the user Haiti’s swanky club now home to misery … Haiti’s swanky club now home to misery. Every image/headline pairing on the page is laid out like this, meaning in every instance a user using a screenreader will hear the headline twice. This will surely soon get annoying.
2. Secondly, the image was actually of earthquake survivors holding a large bag, nothing to do with clubs and, unfortunately, far from swanky.

Using the attribute properly

On the BBC’s home page however (on the same date) they are using alt attributes perfectly. They have an image of a woman wearing a veil, alongside the article’s headline France report back face veil ban. The image’s alt attribute: alt="A woman wears a full-length veil in Lyon, 25 January".

The biggest no-no of all

One thing which consistently winds me up is the ridiculously bad practice of stuffing alt attributes with keywords. alt attributes are an accessibility feature, end of. They are not a way of slipping in keywords out of sight, and any attempt to do so is irresponsible and incredibly bad practice. The only time ‘keywords’ may be validly placed in alt attributes is if it’s explicitly related to the image; for example: <img src="/img/product.jpg" alt="A photograph of Mike's Carpets' ProClean™ carpet cleaner" />.

How to do it properly

Writing proper alt text is incredibly simple, yet a little more time consuming than the ‘Car’ cop-out. All you need to do is write out in full exactly what the image shows. If it’s an elephant giving a donkey a piggy-back don’t be lazy and use alt="Elephant and a donkey". Instead, write out alt="A photograph of an African elephant giving a donkey a piggy back across a swamp".

Also, for any pages that use similar images repeatedly but are slightly different to one another, make sure your alt attributes reflect these differences. A good example would be my portfolio page. Instead of using alt="Screenshot" over and over again I used text like alt="Screenshot of Suzanna Haworth’s website" and alt="Screenshot of RAAMaudio UK Ltd." etc.

This is one of the most basic aspects of web development, but one that too many people are still getting wrong.