img alt attribute for "decorative" images

Question

A question for the truly pedant

I was looking through Chrome's Developer Tool's elements tab when something caught my eye and prompted this question.

Though meaningful alt attributes on img tags are a necessary expectation for accessibility (<img src="/path/to/beauty.png"alt="Olivia Culpo won the Miss USA 2012 contest"/>), I have seen it often advised that the alt attribute of "spacer", or other "decorative" images should be given a blank value: <img src="/images/spacer.gif" alt=""/>

These questions are just for decorative images:

• What happens if I declare the alt attribute, but don't define it: <img src="/images/spacer.gif"alt/>
• Of the two options, which is optimal (and why)?

Answer 1

If you run <img src="..." alt /> through the validator, it throws an error. The alt attribute needs a value, even if it is null alt="". Usually when an image doesn't have an alt, some assistive technology announces the path to the image.

So <img src="..." alt /> is the same as <img src="..." />. Usually the word used is decorative vs trival, but it is probably the same idea. These type of images should have a null alt.

Answer 2

Both will pass W3C validation but according to recommendations in WCAG 2.0 the preferred method is to define the attribute as:

<img src="" alt="" />

See the following working note from the W3C.