Can the alt attribute for an img tag be empty?

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 :confused:

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.

ok then fair enough

cheers :smiley:

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.

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="".

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?

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

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

Please, people, it’s an alt attribute, not an <alt> tag. :-/

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

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. :stuck_out_tongue:

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

I know it is an attribute rather than “tag” but I was still half asleep when I wrote it :stuck_out_tongue:

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

Hahaha, I swear it gets better everyday tommy.

Examples of Attributes -


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

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. :slight_smile:

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.

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.

I think you should not empty