is important for seo as well i believe
Personally, I think the majority of alt attributes should end up being empty. Depends on the type of site you have, but a LOT of images are only used for decoration, even if they are related to the content, it’s often just a photo to spice up the look of a page. It’s actually fairly rare (again, depending on the site) for a photo to be a part of the content, I find. Even then, a lot of diagrams have a caption, which negates the use of alt text anyway (you wouldn’t want a screen reader to read the same thing out twice…)
A lot of people get ‘text alternative’ mixed up with ‘description’, and they are not the same thing.
I would argue that the majority of alt attributes should be empty if they are being used properly.
Yes, that is all absolutely true. Any <img> element must have an alt attribute, but it can be empty (ie alt="") if that’s appropriate.
If the image contains information that people would benefit from seeing, you need to put some meaningful text in - but if the image is purely decorative, or is simply an icon illustrating the adjacent text, it’s best to leave it empty.
What you have to ask yourself is - if you were browsing the page without images (whether because you can’t see them, you have images turned off, or the image just doesn’t load properly), would you want to know (a) that there was an image there, and (b) what was in the image? If not, it’s fine to leave the attribute empty.
I agree.
Exactly!
I would recommend those of you who are unsure about how to use the alt attribute to read Must I have an ALT attribute for every image? in the HTML FAQ. Compare the four different scenarios where a particular image is used, and note how very different the text equivalent is in each case.
What about images that are for decoration only?
That’s what CSS is for. 
Yea, what are decorative presentational images doing in the structural mark-up 
So if you have a site with, say, 100,000 articles where each one has a decorative-ish picture associated with it, you recommend littering the CSS with 100,000 ID selectors and background-image rules?
Keeping decorative images as CSS backgrounds may be feasible for a relatively static and small site, but as soon as you’re using a CMS it becomes futile.
Take this page:
There are 2 images there (one of the pigs, one of the queue of vans) which aren’t part of the content, they are just decorative - an ‘aside’ to the article if you will. If the picture wasn’t there, the content would still be complete.
Are you arguing that those images should be css background images?
It simple isn’t as clear cut as ‘all decorative images should be in the css, all content related images should be <img> tags’, because there are images that fit into neither category.
In a lot of those cases it is probably at least worth considering moving the image to the CSS rather than keeping it in the HTML
Stormrider you are absolutely correct…
In a real world situation the only ‘decorative’ images that need to be set as background images are drop shadows, modules, etc…
It would be silly and add unnecessary weight to the css file to make all ‘decorative’ images background images… > Same thing Tommy said…
This brings up the same situation with graphic headings being inline opposed to background images…
<h2><img src="about.gif" width="130" height="14" alt="About" /></h2>
<h2 id="about">About</h2>
h2#about { background: url("about.gif") no-repeat; text-indent: -999em; }
Say there are 15,000 headings… Same thing occurs - unnecessary css weight…
After reading that resource you linked, I see that SitePoint’s homepage the images for each post in the Latest Blogs section would be better off with empty alt attributes. Specially since they all say “Image for <title of post>” right after the actual title of the post.
What do you think?
Edit: the same goes for the Editor’s Choice section that has duplicate information which could confuse/piss off visitors using a screen reader
I see 2 types of ‘decorative’ images here. One that are, as cooper.semantics mentioned, shadows, list item bullets, graphics of the website basically. Layout images, rounded corners, all the graphics that make up the site.
But also, you have images that are related to the content (although not part of it), which are also decorate - as in a lot of BBC News articles and many other similar sites, and I think these make up the majority of images on a lot of sites. These are decorative, but they aren’t background images - and so should have an empty alt attribute.
Where images are part of the content (eg a photograph illustrating a point made in the text, a chart or graph showing a trend etc), the alt text should be a text alternative - ie, roughly the same information could be got from reading the text as you would from looking at the image.
Do you see the distinction? Do you really believe that the second type of ‘decorative’ image I described belongs in the CSS? ie, Those 2 photos from the BBC link I pasted should be empty <div> tags with background image in the css set?
I see the distinction but there are a lot of people who get the two confused which is why I suggested that, where an image doesn’t need alt text for people who don’t see it to be able to understand the content without it, that the author really needs to work out which of those two categories of ‘decorative’ that the image is really in so as to make sure that those that really do belong in the CSS are put there. Too many people include those background images in the wrong place rather than making the distinction and moving those that are truly decorative and unrelated to the content into the CSS where they belong.
My interpretation is that if the spec says the attribute must be present, then it must also not be empty.
It would be pointless to require the attribute if it can just be empty. That’s like saying a fish needs a fish bowl to survive, but it doesn’t need to have any water in it.
I would argue that neither of those images (in the content) are decorative (well at least not in the sense we are talking about), they are intended to give representation to help portray an image. I only qualify decorative images as those which are simply provided to decorate the website as a design in opposition to acting as content visual aids and those kind of images which are specific to the site in opposition to enhancing the content should in my opinion be kept separate as they are highly unlikely to differentiate between every page, unless some serious convention breaking is going on (in terms of pages trying to maintain a core level of similarity between how the site is represented site wide).
That interpretation is incorrect.
Not in this case. The attribute is required because not all users (or user agents) can perceive images, so there needs to be a text equivalent. An image that doesn’t convey any relevant information (the image itself may still be relevant, but only as an image) in a particular context doesn’t have a text equivalent. Or, rather, the text equivalent is ‘nothing’.
Therefore, specifying alt="" for such an image is every bit as important as a non-empty text equivalent is for an image that does convey information. It’s an explicit statement that says, ‘this image does not convey any vital information’. By using an explicit, albeit empty, text equivalent the author signals that he/she knows what he/she is doing.
An omitted attribute, on the other hand, raises questions: is it deliberately omitted to imply there is no text equivalent, or is it an accidental oversight, or is the author completely clueless about markup, semantics and web standards?
Explicit is usually much better than implied.
No, it’s not. Is like saying that a fish bowl doesn’t need to have any fish in it to be a fish bowl. Yes, normally you’d have fish in it, but there’s no law against having an empty fish bowl around.
No, it isn’t at all. Putting the attribute there and leaving it empty is useful information - it tells a reader that there is no text alternative for this image. Leaving the attribute out all together leaves it as an ‘unknown’.
You have read one thing in the spec, and made up another rule out of that. It says the attribute is required, and then the following text:
Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt=“red ball” would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (“”)
So by assuming something from the spec, you have actually contradicted it. The spec says to use an empty alt attribute when appropriate.
Edit: What Tommy said!
OK, so you think those images should have alt text then? What should that alt text be?