User:Laurawisewell/Scrap Paper

From DPWiki
Jump to navigation Jump to search

Images

What to do and how?

Alt

Basics:

  • The syntax is <img src="images/foo.png" alt="Hedgehog." />.
  • All <img> tags must have an alt attribute, but it can and often should be empty, see below.
  • Text including special characters (either raw or as entities) can go in the alt, but no HTML.
  • The alt should be short.
    • While theoretically up to 1024 characters is valid, most guidelines recommend no more than about 60, so really one line max.
    • If images are absent or off, the browser will try to fit the alt into the space allowed for the image, and may truncate it.
  • It's good to use normal prose and include punctuation (as this gives appropriate voice pauses).
  • Don't say "Image of ...". The browser or screenreader will tell the user that it's an image.
    • Similarly, just alt="Illustration." is an appalling alt text.

Empty alt: (alt="" with no spaces.) Don't be afraid to use empty alt! Imagine reading the book over the phone, or on the radio. Would you mention the picture? Use empty alt in the following situations:

  • Images where the caption or nearby body text is enough.
    • Don't repeat the caption in the alt. Nobody wants to hear it twice.
  • Spacer images you're using for layout.
  • Purely decorative images.
    • This includes artwork such as fancy chapter headers
    • And pictures which, while relevant to the text, are there to look pleasant rather than to add information.
    • Unless you feel such an image still needs to be conveyed as part of preserving the book; in which case you may want to describe it in the alt.

When you use empty alt, a visual browser will probably display an empty box, but a screenreader will probably omit all mention of the image, as if it simply wasn't there. (For this reason, an image that is also a hyperlink must not have empty alt.)

Images of text
If it's very short (such as a heading in a special font) just use the text in the alt and put HTML tags around the image as if it were text. See example below. If it's long, you'll need to look at using longdesc.
Sliced images
If you end up having to slice an odd-shaped image, put the alt only in one of the slices (don't repeat it or "share it out").
Images that are links
Fancy list bullets
You're unlikely to meet a book that has fancy images as list bullets, but if you do, check out the CSS list-style-image property. If that won't do (e.g. you need some alternative text for screenreaders) then use an appropriate word with punctuation to separate it from the item text.

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>
Newspaper tree-diagram.png
[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)
  • WCAG 1, Checkpoint 3.1 When an appropriate markup language exists, use markup rather than images to convey information.

For example, use MathML to mark up mathematical equations, and style sheets to format text and control layout. Also, avoid using images to represent text -- use text and style sheets instead. (Priority 2)

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

Further Reading

ToC & LoI

There aren't usually too many issues with Tables of Contents, Lists of Illustrations, and Indexes. It's only when we encounter something complicated that we need to keep accessibility in mind.

What to do and how?

The good news is: for an ordinary ToC it really doesn't matter whether you use a table or a list. For less ordinary ToCs:

  • A list is better if
    • there is hierarchy (chapters, sections, subsections)
    • the entries start with numbers—especially roman ones.
  • A table is better if
    • there are more than two columns
    • its complicated in some other weird way.

If you're really unlucky and both apply (!) then putting a list inside a table cell might be the way to go.

Why?

W3C:

Who benefits?

Drawbacks

Testing

Further Reading