The CUCAT logo. A cat with the stars of the Southern Cross on it over the letters CUCAT.

Alt tags and image captions


The handling of images and identifying the same to both sighted and blind users of a website is an important issue in web design. Images should never be used where text would do, for example using an image of words. However the web is a visual medium and the images can enhance a page and even make it more usable to print disabled (dyslexic) users who may also be employing technologies such as screen readers which are generally employed by the blind.

IPTC Captions

There is a little known, outside of the news publishing business, technology known as IPTC captioning that can be of considerable help the web designer in handling images and ensuring proper captioning of the same. Sponsored by the International Press Telecommunications Council, the IPTC captions can travel with a photograph or image and can then be extracted and placed into the proper image tags on a page. They are commonly used in pictures distributed by news agencies such as the Australian Associated Press (AAP).

Placing IPTC caption data in images

Many modern image processing applications such as Adobe Photoshop support image information in the IPTC format. In addition there is freeware and programing tools in PHP and Perl which support the adding of information.

Of particular interest to this discussion is the caption or description field and object name field. In this example I have used the object name as the value for the image alt tag and I have placed the caption under the image. Notice that the caption is no wider than the image itself. This was done by retrieving the image size in PHP and using those values to set the <div> size.

Snowball image
Jennings resident Cornelious Kilgore (cq), 10, center, tosses a snow ball into the air, as his friend Lakyra Pattin, 10, left, prepares for the next round of snowball throwing on Albia Terrace in Jennings, Mo., on March 4, 2008. Jason Fritz | Post-Dispatch

Advantages to embedded captions

IPTC captions offer several advantages to the web designer. They are embedded with the image itself and so travel with that image even when it is saved independently of the page on which it is displayed. They provide a level of quality control not found in standard web design practice of managing alt tags. There is a rich set of fields including such items as byline, headlines and even geographic data which can be included and accessed.

All of these can provide a wide range of information about the image to both blind and sighted readers.

PHP Code

Below is the PHP function to extract the IPTC caption. this function returns the HTML code to display with image with the alt tag and caption under the image. By placing the whole image in a <div> I have insured that a screen reader will read botht he alt tag and the caption under the image at the same time. This ties the image and it's caption together in the reading order.


function imgdisplay($imgname){
	$size = getimagesize("$imgname", $info);
	$w = $size[0];
	$h = $size[1];
	$stylew = $w . "px";
	if (isset($info["APP13"])) {
		$iptc = iptcparse($info["APP13"]);
		$caption = $iptc["2#120"][0];
		$caption = eregi_replace('Generated by .+ --', '', $caption);
		$imgalt = $iptc["2#005"][0] . "image";
		$thehtml = "<div style=\"width: $stylew; font-size: small;\">
			<img src=\"$imgname\" alt=\"$imgalt\" width=\"$w\" height=\"$h\" />
			<br/>$caption</div>";
	}
	return $thehtml;
}

The image is placed on the page with an embedded PHP code fragment <?php echo imgdisplay("testimg.jpg"); ?> which will cause the image to be displayed at the desired location with the appropriate tags for full accessibility.

Summery

Handling images on a web page correctly is important for both sighted and blind readers of the page. Using IPTC cation data can help to insure that images are properly documented so that all users will know what their content is and how it is displayed.

Greg Kearney, February 2008