How to Describe Images

Based on many questions by both staff and patrons this section contains some things to know when adding images to webpages and such, so that they will be accessible to all. The important thing to note is that as a general rule you should always describe images used on webpages. It helps those who don't use their eyes understand what is there and it also help web crawlers find and discover images. This makes sure that nothing is missed.

What is Alternative Text?

Alternative text provides a textual alternative to non-text content in web pages. Whenever you have an image or anything "non-text" that is present you should give a description. Careful consideration should be given in how to describe an image. For someone non-sighted this is their only means of knowing what is displaying.

Using Alternative Text

You should use it for three reasons

  1. It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  2. It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  3. It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

Just consider that computers and screen readers cannot analyze an image and determine what the image represents. Alternative or alt text provides the Content and Function of the images used.

Alternative text can be presented in two ways:

  1. Within the alt attribute of the img element.

  2. Within the context or surroundings of the image itself.

In most cases adding a description as "alt" text is all that is needed. But you can use text adjacent to the image or within the page containing the image to describe the image explicitly. In other words, sometimes text around the image may also describe the image. This may be redundant, but in keeping with best practice for use of images it is better to offer too much than too little information.

In some cases images have too much intricate detail to describe simply within "alt" text. In these cases you can use a link, known as a "D" link, to a separate page that contains the longer description of the image.

Using Long Description of Images

There are times when an image is so detailed that it may present too much information in a simple alternate text description. An example would be the State Seal of North Carolina, which is very detailed and requires at least a paragraph to describe. At these times it may make sense to offer a long description page (signified by a "D" link) to allow a non-sighted person a chance to study the image in more detail. This page would be a separate page that you would link to using the "D" link designation.

Here's an example of an image that would be appropriate for use with a "D" link. This generally represents the exception.

The great seal of the State of North Carolina. For full description see adjacent D link

Here is the text of the description page, or D link file, and what it would contain as detail about this image.

The Great Seal of The State of North Carolina

Placed upon the Great Seal Of North Carolina there is a representation of the figures of Liberty and Plenty. Liberty, first figure standing, her pole with cap on it in her left hand and a scroll with the word "Constitution" inscribed thereon in her right hand. Plenty, sitting down, her right arm half extended toward Liberty, three heads of grain in her right hand, and in her left the small end of her horn, the mouth of which is resting at her feet, and the contents of the horn rolling out. The background on the seal contains a depiction of mountains running from left to right to the middle of the seal. A side view of a three-masted ship is located in the ocean and to the right of Plenty. The Latin words "Esse Quam Videri" are placed at the bottom around the perimeter as the State's motto and the date "20 May, 1775" is placed with our Coat of Arms.