Providing Alt Text To Images: An Overview

Alternative text or “Alt” text is text associated with an image that serves the same purpose and conveys the same essential information as the image.

For example, imagine a color photograph of planet Earth taken by NASA astronauts from their space craft in outer space that might appear in a document or on a web page. An appropriate alt text description for such an image might be “Photograph of planet Earth as seen from outer space.”

How Alt Text is Used

Alt text is required because it provides a text alternative for an image in case the user is unable to see the image for any number of reasons. In web pages, alt text is also used by search engines. Adding alt text can improve Search Engine Optimization (SEO) rankings for websites.

For web pages, the required alt attribute specifies alternative text that is dsplayed if the application is unable to load the image.

Without Alt Text, users will be presented with a missing graphic place holder when an image fails to download on a web page.

With Alt Text, the missing graphic place holder still appears and the alt text is displayed where the missing image was meant to appear.

Different browsers handle the display of Alt text for missing graphics in different ways. For example the following image shows how a missing graphic with alt text would be displayed in the Internet Explorer and Safari browsers.

In the Chrome browser the display of a missing graphic with alt text appears a little different but it still features a placeholder graphic and a display of the alt text.

Alt text is also used by Assistive Technology (AT) devices such as screen readers that are used by persons with visual disabilities. Screen reader users will hear the words “Photograph of planet Earth as seen from outer space” read aloud through their computer’s speakers or through headphones.

Alt text is not just a feature of HTML. For word processing, desktop publishing, and PDF files, alt text is also read by the screen reading applications used by blind and low vision users.

Ways to Add Alt Text to an Image

There are many ways to add alternative text to an image. The method you choose depends upon the document format which contains the image and whether you want the image file to include alt text as part of its file properties or as a meta data entry describing the image properties.

Different word processing and desktop publishing applications feature different methods for adding alt text. In some instances, the alt text can also be passed on to a derivative format generated from the source application. For example, the alt text applied to images in a Microsoft Word document will also appear as alt text for images in a PDF file generated from that Word document.

In addition to discussing various techniques for placing the alt text description in a location that is suitable to the format containing the image, this article also describes methods for attaching an alt text description to an image file. Attaching the alt text to the image file has the advantage of making the alt text a property of the image which authors can then locate and refer to for use in the documents and web pages in which they choose to display that image.

• You can use the file system to add alt text as a property to image files. This alt text will remain with the image file.
• Image editing programs can also add meta data to image files that can be used for alt text. Popular meta data formats for images such as EXIF, IPTC, and XMP provide data fields that can be used to store alt text that is appropriate for the accompanying image. By storing alt text as meta data, the alt text always travels with the image.

Adding Alt Text to Various Document Formats

In addition to discussing various techniques for placing the alt text description in a location that is suitable to the format containing the image, this article also describes methods for attaching an alt text description to an image file. Attaching the alt text to the image file has the advantage of making the alt text a property of the image which authors can then locate and refer to for use in the documents and web pages in which they choose to display that image.

• In HTML alt text is provided as a value to the alt attribute in the < img > element.
• In Microsoft Word, PowerPoint, and other Microsoft Office applications, alt text is placed in the alt text field of the format picture dialog.
• In OpenOffice Writer, the alt text is added to an image using the Picture dialog to enter the Alternative (Text Only) field in the Options tab.
• In Adobe InDesign files, the alt text is based upon values in the Object Export Options dialog.
• In PDF files, alt text is a property for objects tagged as figures and can be added a number of ways using Adobe Acrobat.

HTML

The markup for the <img> element would be similar to this example: <img src="images/earth.jpg" width="160" height="160" alt="Photograph of planet Earth as seen from outer space.">.

Sometimes, images do not convey any information, they are used as decorative elements or to organize the layout of a web page. The alt attribute is still required. The solution is to use it but give it no value by providing no text within the quotation marks: alt="".

In addition to its required use as an attribute in the < img > and < area > elements. The alt attribute is also required for the < input > element when the type="image" attribute is specified.

Microsoft Word

To add Alt Text to images in Microsoft Word, do the following:

• Select the image with a Right Mouse Button Click and choose “Format Picture” (Right Click and Type “o”).

  

• This brings up the Microsoft Word Format Picture Dialog. From the Format Picture Dialog, do the following:
  1. Select the Alt Text Category.
  2. Type the desired Alt Text in the field labelled “Description””.
  3. Select the Close Button when done.

OpenOffice Writer

To add Alt Text to images in OpenOffice Writer, do the following:

• Select the image with a Right Mouse Button Click and choose “Picture” (Right Click and Type “P”).

  

• This brings up the OpenOffice Picture Dialog. From the Picture Dialog, do the following:
  1. Select the Options Tab.
  2. Type the desired Alt Text in the field labelled “Alternative Text (Text Only).”
  3. Select the OK Button when done.

Adobe InDesign

To add alt text to images in Adobe Indesign that will appear in PDF files generated from the source, do the following:

• Select the image with the Selection Tool.
• If the image is contained within a graphic frame, select the frame with the Selection Tool
• Choose Object > Object Export Options from the InDesign Menu (You can also Right Mouse Click on the graphic frame to select Object Export Options).

  

  This brings up the Object Export Options dialog.

  1. Select the Alt Text Tab in the Object Export Options Dialog.
  2. Choose Custom from drop down list in the Alt Text Source Menu.
  3. Enter the description in the text field.
  4. Click Done.

  

PDF (With Adobe Acrobat)

Images in tagged PDF files must also have alt text to make them usable by persons with visual impairments and to make them compliant with various accessibility standards and regulations.

Alt text that is added to images in Microsoft Word, Adobe InDesign, or OpenOffice Writer documents will be included in the PDF files that result when users export to tagged PDF from these authoring applications.

Sometimes it may be necessary to add or change alt text in a PDF file using Adobe Acrobat.

The Alternate Text Property of the <Figure> Tag

For items tagged as <Figure>, in the structure view, an Alternate Text property can be added to the tagged object.

1. Open the Tags panel in Acrobat. From the Acrobat menu, choose View > Show/Hide > Navigation Panes > Tags.
2. Select items that are tagged as <Figure>.
3. Right Mouse Click and select Properties.

   

   This displays the Object Properties Dialog.

   

4. As an optional step, consider entering a value in the Title field which will identify which image the particular <Figure> object is associated with in the Tags panel.
5. Select the Tag tab in the Object Properties Dialog.
6. Enter the Alt Text description in the Alternate Text field of the Object Properties Dialog.
7. Select Close.

Let Acrobat Scan Figures for Alternate Text

Adobe Acrobat versions X and above can scan tagged PDF files looking for figures and display a dialog that displays any alt text associated with the figure.

This dialog can also be used to enter missing alt text or edit existing alt text associated with the figure.

To have Adobe Acrobat review and set alternate text for figures in the PDF file, do the following:

• Display the Accessibility Tools panel by choosing View > Tools > Accessibility from the Acrobat menu.
• Select the Set Alternate Text tool. A dialog will appear indicating Acrobat will detect figures in the document and display associated alternate text.
• Select the OK button. The Set Alternate Text dialog appears.

  

  1. A right and left arrow move you forward or backward from one figure to the next
  2. A check box for Decorative figures is available to indicate images that do not require alt text, so called “artifacts”
  3. A text box displays any alt text currently associated with the figure. It is in this text box you provide any missing alt text, or edit exiting alt text if necessary.
  4. Use the right arrow to move forward through the document until all the figures have been verified. When done, select the Save and Close button.

Attaching the Alt Text to the Image

Tired of retyping the same alt text for an image you use all the time? Perhaps you’re constantly racking your brain in an effort to come up with just the right alt text and you can’t remember that brilliant description you came up with when you used the image in a PowerPoint presentation.

Wouldn’t it be great if the Alt text could travel with the image and all an author would have to do is locate the alt text attached to that image and put it in the proper location for the word processor, desktop publishing application, PDF file or web page thatís now displaying the image?

The thing is, the one constant in all of this happens to be the image itself! It hasn’t changed whether it’s placed in a Word document, Web Page, InDesign publication, or PDF file. In most instances, the alt text that worked in the PowerPoint presentation also applies to the image when it is displayed in a Web page or PDF file.

As it turns out, it is possible to attach alt text to an image. That alt text can then be located, copied and pasted into the appropriate location as determined by the document format type which contains the image .

Windows File System

You can add a description to an image file in Microsoft Windows by doing the following:

1. Right click on the image file icon and select “Properties”

   

   This brings up the File Properties dialog.

2. In the File Properties dialog, select the Details tab and type a description of the image in the Subject field.

   

Macintosh File System

You can add a description to an image file in MAC OS by doing the following:

1. Click on the image file icon and select “Get Info”. This brings up the File Information dialog.
2. Type a suitable alternative description for the image in the Comments field.

   

Image Editing Programs That Can Store Alt Text with the Image

Adobe Photoshop, Illustrator, and Fireworks

Image editing programs from Adobe Systems feature a File Information dialog that will allow you to add a description of the image. The screen shots below show the addition of an image description using Adobe Photoshop as an example.

1. From the Adobe image editing program menu, select File > File Info. This brings up the File Info dialog.

   

1. Highlight the Basic Category and enter alt text in the Description field. This will also place an entry into the Description field of the IPTC Content category. IPTC stands for International Press Telecommunications Council, the IPTC sets administrative, descriptive, and copyright information standards for images.

   

GIMP

GIMP is an open source image manipulation program. GIMP is an acronym for GNU Image Manipulation Program. GIMP performs such tasks as photo retouching, image composition and image authoring. It is a freely distributed piece of software available from the GIMP download site.

Using GIMP, there are two options for adding alternative text to an image file.

GIMP Option 1: Adding a Comment using the image properties dialog

1. Select Image > Image Properties from the GIMP menu. This brings up the GIMP Image Properties dialog.

1. From the GIMP Image Properties Dialog select the Comment tab.
2. Enter the alt text description in the Comment area

GIMP Option 2: Adding a meta data description using the image file properties dialog

1. Select File > Properties from the GIMP menu.

   

2. Select the Description Tab of the Image Properties Dialog.
3. Enter an Image Title and an Image Description in the matching fields of the Description Tab options.

   

Section 508, Universal Accessibility