Accessibility Recipes/Images

What to do and how?

Alt

This section is incomplete, but some guidance is provided on the Accessible HTML eBooks#Alt_text page.

Longdesc

If your image conveys something important that can't be adequately expressed in the alt attribute, then a longer description is needed. This doesn't happen very often.

The description (or the list of them if you have to describe several images) should probably go at the very end of the HTML file. (Traditionally they go in a separate file, but PG like us to keep our HTML all in one.) It's important to make clear that this is something added, not part of the original, so you might style it in the same way as you would style a Transcriber's Note, and/or put a sentence explaining that the descriptions have been added for the benefit of those using screenreaders. At the start of each description place a unique anchor <a name="foo" id="foo"></a>.

Writing the long description may not be easy. Some of the references below may help. It can contain any HTML you want: a simple paragraph, or a list or a table or whatever is needed.

In the image tag add the attribute longdesc="#foo". That should be enough on its own, but since many programs don't support longdesc it's a good idea to put an ordinary hyperlink below the image as well.

Here's an example (from etext:21341):

HTML	How it looks
<div class="figcenter"> <img src="images/diagram.png" alt="[Diagram showing the people who work for a newspaper.]" longdesc="#diagram_text" /> <p class="caption">[<a href="#diagram_text">Textual representation of diagram</a>.]</p> </div>	[Textual representation of diagram]
<div class="transnote"> <h4>Textual representation of the diagram on page 5.</h4> <ul> <li><a name="diagram_text" id="diagram_text"></a>General Manager <ul> <li>Business Manager <ul> <li>Advertising Manager <ul> <li>Liner Department</li> <li>Street Men</li> </ul> </li> <li>Circulation Manager <ul> <li>Newsboys</li> ...	Textual representation of the diagram on page 5. General Manager Business Manager Advertising Manager Liner Department Street Men Circulation Manager Newsboys ...

HTML

How it looks

<div class="figcenter">
<img src="images/diagram.png"
alt="[Diagram showing the people who work for a newspaper.]"
longdesc="#diagram_text" />
<p class="caption">[<a href="#diagram_text">Textual
representation of diagram</a>.]</p>
</div>

[Textual representation of diagram]

<div class="transnote">
<h4>Textual representation of the diagram on page 5.</h4>
<ul>
<li><a name="diagram_text" id="diagram_text"></a>General Manager
  <ul>
    <li>Business Manager
      <ul>
        <li>Advertising Manager
          <ul>
            <li>Liner Department</li>
            <li>Street Men</li>
          </ul>
        </li>
        <li>Circulation Manager
          <ul>
            <li>Newsboys</li>
...

Textual representation of the diagram on page 5.

General Manager
- Business Manager
  - Advertising Manager
    - Liner Department
    - Street Men
  - Circulation Manager
    - Newsboys

...

Background Images

Background images (that is, those invoked using the CSS background-image: url(images/foo.png); property) cannot have alt or longdesc attributes. So it is best not to use the background method for images that convey important content: use them only for "unimportant" images that are purely visual decoration. After all, not only blind users but anyone who has background image loading turned off or (usually) anyone who prints the book out will not see the background.

Why?

W3C:

WCAG 1, Checkpoint 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). (Priority 1)
Draft WCAG 2, Success criterion 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, braille, speech, symbols or simpler language ... All non-text content has a text alternative that presents equivalent information, except for the situations listed below. (Level A).
The "situations listed below" that are relevant for us are:
- Media, Test, Sensory: If non-text content is ... a test or exercise that must be presented in non-text format, or primarily intended to create a specific sensory experience, then text alternatives at least identify the non-text content with a descriptive text label.
  - Examples suggested are a spelling test, a musical performance or a work of art.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, or used only for visual formatting, or if it is not presented to users, then it is implemented such that it can be ignored by assistive technology.

Who benefits?

Blind people using screenreaders or Braille displays, people on slow connections who may have images turned off, anyone with the misfortune to acquire your HTML file without the images that go with it.

Drawbacks

Generally none. If you end up using long descriptions, then sighted readers may find them a little curious. If you really detest this, you could use a CSS trick to hide them.

Testing

Turn off images.

Accessibility Recipes/Images

Contents