Images in Pilot

Provide alternative text for each photo, illustration, chart, graph, infographic, etc. Or make the image silent.

Why Alternative Text for Images Matters

A screen reader can’t interpret an image. It can tell you it has encountered an image, but can’t tell you what’s in the picture. So you must add your own description that a screen reader will speak when it encounters that image. That description is called “alternative text,” or “alt text” for short.

Tips for Alternative Text

Keep alt text short and think of how it will help someone listening to a screen reader.

For example, if you use an image of Wright State, “Wright State” will suffice for the alt text. Or you might use “Aerial view of Wright State,” if you need to be more specific. Don’t write out “image of Wright State.” Screen readers announce when they encounter an image. So it’s redundant to say it’s an image in the alt text. You might have reason to tell the listener that there’s a painting, sketch, or photograph. But “image” isn’t necessary.

Simple Images with Essential Information

If an image adds important information to a document, include text that conveys as close to the same message as possible. If a short sentence or two will get the point across, you can invisibly embed “alternative text” in the document.

Pilot will prompt you to enter alternative text each time you place an image on a page.

Complex Images

If you need more than about 120 characters to provide an adequate alternative, then also include a longer description in the document’s visible text. Charts and graphs often need longer descriptions.

Decorative Images

For some images, alternative text would not add meaning and might be redundant. These “decorative” images could include screen shots in a tutorial where the alt text wouldn’t add anything that’s not already in the main text.

Ask yourself if it would be a waste of time for someone with a screen reader to listen to a description of an image. If so, you can skip the alternative text. Instead, check the box that says, “This image is decorative.”

Fix an Image Already on the Page

Suppose you have an HTML page in Pilot that includes an image. You find that the image has neither alternative text nor the “null” alternative text you need for decorative images. That’s easy to fix.

  1. Click on the image to select it. (The image will darken and have handles at the corners.)
  2. Find the small toolbar that appears below the image.
  3. Click the icon farthest to the right on that toolbar.
  4. Type your alt text into the “Image Description” box.
  5. Click “OK.”

Further Reading

For more on writing alternative text, in-depth descriptions for complex images, and accessible math, see