WebAIR

(if no) Do you provide an additional long description (either in the text near the non-text content or a link to another location)? (LNK17)

Why is this important?

Although there is no limit on the length of an alt attribute, the text should still be kept succinct and clear. However, it may not always be possible to adequately convey the purpose of the image. The description may simply be too long, or it may require additional information, such as a link to further details. In such cases, it is important to provide that information somewhere else.

How to fix the problem

One possibility is to provide a description in a caption or in the text surrounding an image. Another possibility is to use the longdesc attribute of an image. This is a link to another location (such as another webpage) where a longer description is provided. Not all browsers and assistive technologies support the longdesc attribute and those that do often handle it in different ways. Furthermore, the longdesc attribute is currently not included in the HTML5 specification. Another alternative is to use the WAI-ARIA aria-describedby property. This allows you to provide additional information to a screen reader about an image.

Example

//longdesc - the attribute provides a link to another page where a longer description of the image is provided.
<img src="graph.jpg" alt="Sales figures" longdesc="salesfiguresexplained.html"/>

//WAI-ARIA aria-describedby - the attribute references the ID of a paragraph on the same page where a longer description of the image is provided.
<img src="graph.jpg" aria-describedby="sales_figures">

<p id="sales_figures">The company did particularly well this year, exceeding expectations. Product X perfomed particularly well increasing from 50% to 75% revenue. Product Y slightly improved on last year, increasing from 45% to 48%.</p>

Further Information

  1. http://www.w3.org/community/webed/wiki/Images_in_HTML
  2. http://webaim.org/techniques/alttext/
  3. http://accessibility.psu.edu/content/longdesc-excluded-html5