Search code examples
htmlimageseoaccessibilityalt

Alt? Longdesc? Title? What goes where, especially for image-heavy sites?

So I've been trying to make my site as accessible as possible (for non-JavaScript users, web crawlers, screen readers, etc), and I hit a large snag.

The site I'm developing is very image heavy. (I draw stupid stuff in my spare time and the site is a sort of a "showcase".) Each page in the site has a single image (or multiple, if context is needed or the image is several panels) that is usually accompanied by a single caption underneath. So when I got to the point where I had to add accessibility options, I wasn't sure what to do. For example, let's say I had an image of a man eating an apple and the joke was there's a worm in it. So the first thing I did was add a ludicrously descriptive alt text since it was the only way to provide an "equivalent" for screen readers.

<img src="appleeat.png" alt="A man bites into an apple. As it turns out, there's a worm in it!">

This seemed okay at first, but then things went awry really quickly when I suddenly found myself needing to add alt text up to 300 characters (!!!) for the more elaborate jokes and images. Not only that, but apparently alt text isn't for descriptions anyway.

So I'm having these problems:

  1. Alt text is for equivalents, not descriptions. However, the only way to provide an equivalent in this case is to provide a description.
  2. longdesc seems to be more suited for this feat, but longdesc is not supported by any browser (at least, according to W3Schools) even though it does seem to be in the HTML5 specification.
  3. <figcaption> seems to be the way to go, but it ends up displaying text underneath the image in question, which is definitely not very appealing for my site, especially if I want to add additional captions and context in <p> tags or something.

So what do I do? What would I put, and where? I'm totally stumped on this, and frankly I'm not certain that making a site based entirely on images accessible to people who can't see very well is a good idea.

Solution

  • 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.