Visit

Main Content Area

Images

How to Describe Images to Make Them More Accessible

There are several different types of images, and each one needs to be described on the web and within documents in different ways. 

Images that are described with alternative text (commonly known as alt text) can be read by screen readers and other assistive technology, which helps people with disabilities to access image content on websites and mobile apps. 

However, not all images can be adequately described with alt text. Keep reading for details about alt text best practices, types of images and creating longer image descriptions for complex images with text.

About Alt Text

Alt text describes visual elements on a webpage or document. Describing images with alt text gives context for people using screen readers so they can access that content.

In addition to images on HTML pages, alt text is also used to describe images that are found within the following content formats:

  • Documents
  • PDFs
  • Tables
  • Infographics

Writing Alt Text Descriptions for Images

alt-text
  1. Don't write "image/photo of" Because screen readers and other assistive devices already describe images as such, you don't need to preface alt text with "image of" or "photo of."
  2. Keep it brief — As a best practice, alt text descriptions should be 120 characters or less. This is usually one or two short sentences. Make sure to convey the meaning being expressed in the image.
  3. Use simple, descriptive language when writing alt text to give the reader a clear idea of what the image depicts.
    1. Close your eyes and think of the image and include information that you'd use to describe it.
  4. Keep it relevant — Limit the alt text description to relevant information; you don't have to include every single nuance of an image, just the main details of it to give context for its use.
    1. Consider the purpose of the image on the page. Include the relevant information it's being used to convey.


Describing different image types

  1. Image icons used to help label other information should have alt text descriptions. For example: an image icon of a telephone that is next to a telephone number. The alt text for this can be alt=”telephone”.
  2. Image icons that contain a succinct amount of information should be described with alt text. For example: an image of a medicine bottle cap with an icon that shows how to open the bottle. This would need alt text to describe the action of the icon in a short sentence.

Complex images of text that convey meaning

complex-text

Infographics, graphs, charts, maps or illustrations are complex images of text, which often contain detailed graphic imagery or charts. Use both alt text and a complex text description to describe all meaningful information within complex images of text. 

  • To create a complex text description, start by placing alt text on the image defining what it is and stating that a long description is adjacent to the image.
  • Also provide a long description adjacent to the image that conveys all of the information within the image of text. If this information already appears in the text, then it is not needed as a long description.
  • For PDFs of visually designed items like brochures or postcards, refer to the How To guide for PDFs.

Using Google Gemini to generate a long description for graphs, charts, infographics, illustrations, diagrams

  1. Go to Google Gemini at https://gemini.google.com/app
  2. Type in the text: "Describe this image."
  3. Also type in some background information that will help Gemini write an effective image description.
  4. Upload the image into the prompt window that you want to have described.
  5. Gemini can provide text that describes the image.
  6. Make sure to have a human check for text accuracy, proper context and any spelling errors.
  7. You may need to add your own text to what Gemini writes for you to create the best long description possible, but using Gemini can help get you started.

When you don't need a long description

If the main content where charts and graphs are displayed already has a text explanation that contains this information:

  1. What the image of text is about: the information that conveys meaning
  2. The context of how this image relates to the overall lesson
  3. All information that a student would be expected to know on an exam about this image

Then you don't need to provide an additional long description. The alt text for the image of text would need to say something like: “This is a chart about ____.  A description is in the main content.”