Working With Images in PHP - Part 1: Rotation
Topaz Simplify 3 Review
Happy Labor Day!
The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Page 1 of 2 Providing alternative text for images, a web accessibility cornerstone, is usually accomplished using the alt attribute. However, sometimes the amount of information that an image conveys is huge, much more than is useful in an alt attribute. For instance, charts, graphs, maps and diagrams can contain great amounts of information that would take several hundred words to adequately convey. While there's no limit on the amount of characters you can place in an alt attribute, they are meant to be kept very short to avoid burdening screen reader users with a ton of text to listen to (as well as small screen device users with images off who would have to scroll a huge amount to get past a single image). Another limitation of the alt attribute is that it can't contain additional (X)HTML markup, only regular text strings. This means if the text equivalent for your image is complex and would be best understood using, say, a list, there's no way to include proper list markup all within the alt attribute.
In this article, you'll learn how to get around these limitations of the alt attribute to provide appropriate alternative text for complex graphics. We'll first go over the proper use of the longdesc attribute, then discuss some alternative methods that can provide an even greater degree of accessibility.
Note: While this article does not deal directly with the alt attribute, it's a good idea to understand the principles behind writing proper alt text before reading this article. You can learn more about proper alt text at Debunking Alt Text Myths.
As part of the HTML 4 specification, the longdesc attribute of the img element has long been the official method for describing complex graphics through markup. Unlike the alt attribute, the longdesc attribute doesn't contain the text equivalent itself; rather, it contains a URL to a separate page containing the text equivalent. For example, you may have a photograph or diagram of a bike lane that you need to describe in detail. The HTML for your image may look like this:
<img src="bike-lane-diagram.gif" width="400" height="300"
alt="diagram of a proper bike lane"
longdesc="bike-lane-diagram_desc.html">
You can see that the image contains text in an alt attribute — all img elements should contain an alt attribute, empty or otherwise, even when the image is complex — but also a longdesc attribute pointing to another web page. The path used within the longdesc attribute follows the same conventions as paths used elsewhere in (X)HTML, so in this case it points to a file within the same directory as the img element. You can place the HTML description file anywhere you like and update the path in the longdesc accordingly, but it's a good idea to keep it in the same place as the image and with the same name so that you don't forget it exists and forget to update it if the image changes.
The content of the long description page, in this case bike-lane-diagram_desc.html, should be kept very simple to let the user get straight to the long description. You shouldn't place the description within your full site template, nor should you even put the site logo at the top of the page. Just include the description with the proper markup, plus a link back to the page where the user came from. Here's what bike-lane-diagram_desc.html might contain as its markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Long description for the diagram of a proper bike lane </title>
</head>
<body>
<h1>Long description for the diagram of a proper bike lane </h1>
<p>Bike lanes are typically 1.2 to 1.8 m (4 to 6 ft) in width and are designated by striping and/or signs. Bike lanes are usually marked along the right side of the roadway and should be designated to the left of parking or right-turn lanes.</p>
<p><a href="bikelanes.html#diagram">Back to the bike lane page</a></p>
</body>
</html>
Here's a screenshot of how this simple page looks:
The title and h1 on the page indicate to the user that this is a long description for the image they were just on. The description then follows. In this case, it's a single paragraph, but any HTML markup can be used as this is just an ordinary HTML page: headings, lists, tables, anything you need to make your description meaningful and accessible. After the description is a link allowing the user to return to the page they were just on. The link also jumps to a specific anchor on the page that should be placed immediately after the image that the user just accessed, so he or she can return to the exact spot they left off at and continue from there.
Note: The longdesc attribute does not need to be included on every image, only images that require more explanation than can be practically provided in the alt attribute. Depending on your site's content, you may never need to use it and your images will be perfectly accessible with just the alt attribute, but some sites will have use for the longdesc attribute again and again.
This is a fairly simple example of when longdesc might be necessary, but your graphics can get a lot more complex than this and require much more complex matching description pages. Here are a few other examples of times when longdesc may be needed:
Keywords
web accessibility, alt text, alternative text, long descriptions, longdesc attribute, text equivalents, charts, graphs, diagrams, complex graphics, photos, images, screen readers
