Can the alt attribute for an img tag be empty?

[Mounty]

I believe the img tag requires the alt attribute to validate the markup, but is alt allowed to be an empty string?

My validation tool seems to think it's ok, but I always thought it was required incase the image was missing

[AlexDawson]

It can be empty, but you should always try to provide alternative text unless you have a seriously good reason not to do so. Be warned that by excluding a complete alt tag, visually impaired users will be unable to know that you have a picture in that placement.

[Mounty]

ok then fair enough


cheers

[felgall]

Usually an emtyp alt attribute indicates that the image is purely decorative and ought to be added by the CSS rather than the HTML. Those in the HTML are usually there to convey some information and that information would need to go in the alt attribute for those who don't see the image.

[AutisticCuckoo]

The alt attribute provides the text equivalent (alternative) for an image. In other words, it should convey the same information as the image does (in that context).

If an image doesn't convey any relevant information in a particular context, the text equivalent should be empty. Thus, alt="".

[Stomme poes]

Be warned that by excluding a complete alt tag, visually impaired users will be unable to know that you have a picture in that placement

They would know it's there if they have a screen reader. It'll say "graphic".

On a current site I've found myself using alt="" quite a lot. The reason being, background images can't be floated, where the text wraps around it, but the images are definitely decoration. Are there any good tricks for moving these things into the CSS?

[AutisticCuckoo]

Are there any good tricks for moving these things into the CSS?

Not really. You could have an empty floated div and set the image as a background on that, but what would be the point?

[simon14593]

In a nutshell, alt tags are not important for validation, however, they are very important for both accessibilty and SEO.

[AutisticCuckoo]

Please, people, it's an alt attribute, not an <alt> tag.

[simon14593]

Please, people, it's an alt attribute, not an <alt> tag.

LOL. Good point. Alt attribute was what I meant.

[AutisticCuckoo]

My comment wasn't directed to you personally, Simon. Too many people use the same misnomer, even people who allegedly are professionals. It's as if a medical doctor would refer to the heart as a gland.

[AlexDawson]

It's as if a medical doctor would refer to the heart as a gland.

Well mine swells and excreets stuff every second of every day!

I know it is an attribute rather than "tag" but I was still half asleep when I wrote it

[Dan Schulz]

They would know it's there if they have a screen reader. It'll say "graphic".

On a current site I've found myself using alt="" quite a lot. The reason being, background images can't be floated, where the text wraps around it, but the images are definitely decoration. Are there any good tricks for moving these things into the CSS?

I use empty SPANs for that on the rare occasions I actually need to use them.

[Blake Tallos]

Please, people, it's an alt attribute, not an <alt> tag.

Hahaha, I swear it gets better everyday tommy.

Examples of Attributes -

Alt,align,abbr,cellpadding,cellspacing,height,id,label,href,onblur,onclick,onload,onmousedown,onmousemove,

Good point though. It really is important to learn the differences because if we didn't what would be though point right?

[devbanana]

They would know it's there if they have a screen reader. It'll say "graphic".

Not at all true if the alt attribute is empty. It will say nothing.

[AutisticCuckoo]

Not at all true if the alt attribute is empty. It will say nothing.

Yes, but the question was how screen readers handle an omitted (i.e., missing, not existing-but-empty) alt attribute.

[devbanana]

Yes, but the question was how screen readers handle an omitted (i.e., missing, not existing-but-empty) alt attribute.

Same as if it is empty. I thought someone believed it would say something when encountering an image if it had an empty alt attribute. But whether it is empty or non-existent altogether, it will be as though the image is not there.

[AutisticCuckoo]

I've heard a screen reader (may have been Window-Eyes, not sure) that would spell out the image URL (after saying the word 'image') in the absence of an alt attribute. That was a few years ago, though, so perhaps newer versions ignore it.

[devbanana]

I've heard a screen reader (may have been Window-Eyes, not sure) that would spell out the image URL (after saying the word 'image') in the absence of an alt attribute. That was a few years ago, though, so perhaps newer versions ignore it.

In JAWS (which is what I use), it has an option to do that, but by default it reads the alt attribute and ignores it otherwise.

The only time it'll read the URL is if the image is within a link. But if someone neglected to put in an alt attribute, it is often the case that the image has a cryptic name as well, so it reveals no more information about the target of the link.

For instance, on this page, the five links after the logo have no alt attributes, so I hear something like this:

Link graphic ss/sapphiresteel_pagegfx_r2_c4 On mouse over
Link graphic ss/sapphiresteel_pagegfx_r2_c5 On mouse over
Link graphic ss/sapphiresteel_pagegfx_r2_c7 On mouse over
Link graphic ss/sapphiresteel_pagegfx_r2_c9 On mouse over
Link graphic ss/sapphiresteel_pagegfx_r2_c11 On mouse over

Luckily, not all of their links are like that.

[kikykuang]

I think you should not empty

[Blue Sky]

is important for seo as well i believe

[Stormrider]

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.

[Stevie D]

I believe the img tag requires the alt attribute to validate the markup, but is alt allowed to be an empty string?

My validation tool seems to think it's ok, but I always thought it was required incase the image was missing

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.

http://reference.sitepoint.com/html/img/alt

[AutisticCuckoo]

Personally, I think the majority of alt attributes should end up being empty.

I agree.

A lot of people get 'text alternative' mixed up with 'description', and they are not the same thing.

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.

[Stormrider]

I think if it is being emptied, there should always an alternative for text for the benefits of the reader.

What about images that are for decoration only?