Alt? Longdesc? Title? What goes where, especially for image-heavy sites?
The alt
attribute is for alternative text, i.e. textual replacement for an image, so in the example, it is adequate if it reasonably tells the same story as the image. In reality, most images cannot have texts that are full “alternatives” or “replacements”; it’s usually a matter of capturing some of the most essential message, if possible.
An alt
text can be of any length. The statement that alt
texts should not be descriptions does not mean that it cannot be detailed if needed. The point is that there are too many descriptions that say something about an image without conveying its message (like “big red bullet” or “A man in a canoe”).
The longdesc
attribute is supported by some software but highly debated and not part of W3C HTML5 CR but being developed as an independent “extension”.
The figcaption
element is for captions presented along with an image. It does not address the issue of alternative text at all. It is meant to be presented to the user, whether he sees the image or not.
If you want to provide complex alternative text (where "complex" could mean: containing lists, tables, audio/video etc.), you could either use an img
element with a longdesc
attribute, or an object
element instead of img
.
longdesc
In HTML 4.01, longdesc
is part of the specification. In HTML5, it was removed, and is now developed as an HTML5 extension (but it’s currently only a Working Draft from 2013 Update: it became a W3C Recommendation).
Problem: You would either have to include the content on the same page, but then you shouldn’t visually hide it (as not only screen reader users may want to access this content). Or you would have to add separate pages for the content (but then search engines won’t relate this content to the image, i.e., you miss on ranking potential).
object
The object
element can be used for any kind of media. Its content is the fallback content, which allows you to use markup for the alternative text.
<object data="appleeat.png" type="image/png">
<!-- the alternative content goes here -->
<p>A man bites into an apple. As it turns out, there's a worm in it!</p>
</object>