Part of a Whole

My name is Nicolas Steenhout.
I speak, train, and consult about inclusion, accessibility and disability.

Listen to the A11y Rules Podcast.

Alt Attributes Can Be Tricky

I was looking at a site last night. Ok, I looked at a lot of sites yesterday, but had a specific look at one. They had done the “right” thing and declared an alt attribute to some images. But giving the site a whirl with images turned off, anyone could quickly see that their choice of alt text was not particularly helpful.

In this particular instance, they used headers (<h2>) appropriately, and delivered an image for each of several <h2>. After all, it’s common knowledge now (or should be) that you shouldn’t deliver images without an alternate text equivalent. This is not something to be done by rote, without thinking however. The alternate text is supposed to help explain images, if the image isn’t used just for decoration.

But they merely repeated the text of the <h2> in their alt attribute. Looking at the site with images turned off, or in a text-only browser such as Lynx, or using screenreading software, one suddenly receive the same text, twice in a row. In a visual browser with images turned off, you can sort of tell that there’s an image missing. But in text only or with screenreader, you just get a repetition of text, which doesn’t particularly make sense!

I’m not picking on these guys in particular, it’s an oft-made mistake.

These particular images did not really bring anything else than “eye-candy” to the page. They were not photos adding information to the article. They were simply graphics to make the page look better, which they did. In a situation like that, it would be best to deliver an empty alt attribute. Something like
<img src=”someimage.gif” alt=””>.
The advantage of that over not providing an alt attribute at all is that screenreaders will (most will anyway) simply know to ignore that image, whereas if there is no alt defined at all, it will speak the word “image”.

I’d go even further and suggest that perhaps a better way yet to deliver these “eye-candy” images might be to use background-images delivered through CSS, but that’s not a hard and fast rule.

The moral of this story is that even if you apply the right rules from a technical standpoint, you don’t always end up with an accessible site. The criteria is met: There is alternate text for the image, but the result is not helpful. If they had been given a chance to understand the criteria and what the real issues are, it is likely they would have done things differently.

5 thoughts on “Alt Attributes Can Be Tricky

  1. Dean holds his hand in the air and confesses: this is something that I have been guilty of in the past (and to a lesser extent perhaps still to this day).

    It was a commonly promoted SEO technique six or seven years ago – when crawlers such as Google were coming to prominence. I know I read about it and adopted the technique and I realise I never – until now – consciously made the decision to abandon the technique.

    This article is a handy reminder to those of us who are out of the habit – turn images off occasionally and see how your site looks and reads.

  2. Hey Dean! Keyword stuffing in the alt attribute was indeed common practice, but I think search engines have seen the light, and in the end, a site should be designed for human visitors, not bots :) Glad you’ve abandonned the technique :)

  3. I am of course guilty of this myself; But then it was always drummed into me that an Alt text was always required.

    But what you say makes complete sense, and I shall certainly treat Alt with a bit more respect :)

    Dean also makes a great suggestion about turning off images occasionally to test the site’s usability.

    Great article.

  4. Hullo Taz, Yes, alt attribute’s required, but it doesn’t mean it shouldn’t sometimes be empty ;)

    Glad you enjoyed the post.

  5. I completely agree that a lot of authors give far too many images “alt text”.

    The test I always use is “What would I want to be there if the image can’t be shown?” – it sounds so simple, but it does help me to think about whether an image really needs alt-ing.

    That’s particularly true when the image simply repeats or reiterates nearby text – unless it’s clickable and the text isn’t (which is a bad idea), it shouldn’t need alt text.

    Where I sometimes struggle is with illustrative photos. I feel they ought to be alt-ed so that anyone who could view images knows there is something there to look at, but how to phrase the text … should it be “Photo of [whatever]”? A lot of guidelines say that you shouldn’t include words like that, but do screen readers make it clear when they are reading alt text rather than normal text?

Comments are closed.