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

Question

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.

Virile

Great first question, by the way. Welcome to Stack Overflow! – Underground

@PaulD.Waite : Thanks! And thanks to all of you for this generous Rep-ing! Wow! – Virile

Answer 1

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.

Ouster

And as you say in your page, it might be appropriate to link to more detailed equivalent content. I’m not sure if that would be the right way to go for this chap’s site though. – Underground

@PaulD.Waite, right, links can be the right way. This really depends on the content and structure of the page. Before doing much work on the texts and the association of texts with images, the ideas should be tested, in a simple but realistic setting, at least conceptually simulating a person who uses the page without images. – Ouster

Well great, you all scared me. These are all really good answers. I'm scared to accept just one!... and pressing enter saves a comment in SO so this is all going on one line I guess! I'm going to select this one as "accepted" since it describes the different tags in nice detail, but I'll leave comments on the others to show my PoV. Hopefully someone in the future will have a similar question and this will be here to help them to decide what to do! – Virile

@Orangestar: “Hopefully someone in the future will have a similar question and this will be here to help them to decide what to do!” That’s the idea! And don’t be scared — the best answer should be accepted, just like you’ve done here. – Underground

Answer 2

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>

Prehistoric

This is probably what I'm going to do for my specific case. I didn't know you could still use images in <object>! (Well, I mean, obviously you can since it's directed by MIME-type, but I figured it was depreciated or not recommended or something.) Providing good content where other content can't be displayed is exactly what I was going for for this site. Thanks! – Virile

Since this answer was provided, longdesc has been marked obsolete in HTML 5.2 and "must not be used by authors". – Spenser

@KiviShapiro: This only means that the attribute is not part of the HTML 5.2 spec itself. With w3.org/TR/html-longdesc, longdesc became an HTML extension, wich makes it conformant to use in HTML 5.2. – Prehistoric

Answer 3

Here’s some discussion of alt text that might apply to your situation:

• http://webaim.org/techniques/alttext/#context.

Although I agree with @Jukka that long alt text isn’t a problem in itself. It’s true that “alt text isn't for descriptions”, but only because alt text is for equivalent content. If the equivalent content to a particular image is a description of it, then that’s fine.

It’s just that for lots of images used on the web, that’s not true. For example, the best alt text for the Stack Overflow logo at the top of this page wouldn’t be

The Stack Overflow logo: an abstract in-tray overflowing with paper, followed by the word “stack”, and in bold, the word “overflow”

It would just be “Stack Overflow”, because that provides an equivalent experience for a partially-sighted person (i.e. it tells them which website they’re on).

But if your images are cartoons, I guess writing alt text for them is a bit like doing audio descriptions for movies. You need to be more descriptive if you want to provide an equivalent experience. It’s certainly a challenge, especially if you don’t have experience, or partially-sighted users to discuss it with.

Joe Clark, in his book “Building Accessible Websites”, discussed describing images:

• http://joeclark.org/book/sashay/serialization/Chapter06.html#h2-2290

And even providing alt text for comic strips, although his example is for dialogue-heavy strips, and I’m not sure what sort of experience it provides in today’s screen readers:

• http://joeclark.org/book/sashay/serialization/Chapter06.html#h2-4240

Underground

Great links! I'll definitely have to look at this book later. Thanks for the tips, too! – Virile

Answer 4

Most people now use a figcaption as a caption under an image in an article, or for a short image description, like so...

<figure aria-labelledby="myimage1" >
    <img id="image1" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
    <figcaption id="myimage1">This is My Image Caption!</cite></figcaption>
</figure>

However....since you are associating a larger description with your image, and it is not needing a caption, try this...

<div role="img" aria-labelledby="myimage2">
  <img id="image2" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
  <p id="myimage2">Larger description of my image...</p>
</div>

This is also compatible with WAI-ARIA accessibility standards, which will read and associate your container "div" and your "p" description with the image. Notice the new attribute, role=img. Since the div, unlike figure, is not normally associated with an image, this helps the screen reader identify the div container as part of the image.

ADDITIONAL

Note that the alt attribute should be a text replacement for an image if the image never appears, a user agent cannot read images, or the image is slow to download. I like to show this info in a grey background image box in case a image breaks and a user needs to know what is missing. Its designed to tell a user what the image represents in a simple, short text string.

The title attribute on images is an important rollover box that gives additional image information, image map feedback, or where it would link to when the image is a clickable hyperlink. Some designers frown on the title attribute but I use it all the time in a lot of my HTML to add rich info to all my interactive and visual elements.

Mariejeanne

Answer 5

I think adding in descriptive text in a <figcaption> is a good idea. There is of course the problem with browser support, this should be able to be addressed with CSS:

figcaption { display: block; }

You could then hide this text by default figcaption { display: none; } and include a link somewhere that will refresh the page with the captions displayed through an alternative style - figcaption { display: block; }

This option then eliminates the need for javascript solutions and only gives captions to those that specifically request them.

You could maybe set this up with a little bit of php:

<head>
    <style type="text/css">
        <?php if(isset($_GET['CaptionDisplay']))
            {
                echo 'figcaption { display: block; }';
            }else{
                echo 'figcaption { display: none; }';
            }
        ?>
    </style>
</head>

HTML Link - <a href="example.php?CaptionDisplay=true">Show captions</a>

This is completely off the top of my head :) Let me know if I can better explain anything.

Bloodletting

Answer 6

I think "equivalent experience" is kind of subjective, and I can attest from experience that many accessibility guidelines, while well-intentioned, aren't correct. For a screen reader user, just seeing the Stack Overflow alt tag logo wouldn't provide an equivalent experience to a sighted user. You should always describe any alt tags properly. I don't think having a longer alt text is necessarily bad, but if it gets too unwieldy, you could build a separate section in plain text. Thank you for taking the time to make your site accessible. Screen reader users do appreciate inclusive design and the thought-out descriptions.

Culex