Alternative Text

Last updated on October 6, 2022 at 9:38 am
Learn about how to add alternative text and why it is important.
This article is for:
All products

In this guide

↓ What is alternative text?

↓ Adding alt text

↓ Examples

What is alternative text?

Alternative text, most often called alt text, is a text description for images added within Drupal CMS. This text serves multiple purposes:

  • Search engines use alt text to help assess the purpose and content of a page.
  • If an image is unable to load, the browser will display the alt text in place of the image.
  • Screen readers are able to announce the alt text to users in order to provide them with the content and purpose of the image.

Adding alt text

Regardless of where you are adding your image, either within Media or within an individual node, the Alternative text field will appear after the image has been uploaded.

After uploading an image, the required alt text field will display to the right of the image preview.

This field includes help text and best practice guidance to help you write quality alt text for your image.  These best practices can be shown by using the Tips for Alternative text button trigger which will toggle the guidance open and closed.

Activating the "Tips for Alternative Text" button will expanded additional best practice guidance for writing good alt text.

Alt text is required and must be added to every image that is uploaded to the Drupal CMS. The alt text for images should aim to provide the same information within this content that the image is intended to convey visually.  For specific guidance, follow the VA content style guidelines for alt text.

Examples

Man talking to woman is an example of alt text that is not descriptive enough.
  • Example 1: Poor alt text
    • The alt text for this image is “man talking to woman”
    • This is an example of poor alt text as it does not provide enough contextual information for this image.
      • Why is the man talking to the woman? Where are they? Are they outside in a parking lot, in a car, in an office, etc.? The answers to these questions could change the context of the image.
      • Improved alt text could be “A man speaks to a female medical support assistant at a health facility reception desk.”
    Adding the word "photograph" is an example of redundant alt text.
    • Example 2: Poor alt text
      • The alt text for this image is “A photograph of Air Force Veteran Sammie Clay talking to her standard poodle guide dog, Sofie, during a visit to the Women's Health Clinic at the Washington DC VA Medical Center on August 9, 2022.”
      • This is an example of poor alt text as it uses the word “photograph” and add unnecessary details (e.g. date and place) making the overall length above the recommended length for best practices.
        • Improved alt text could be “Air Force Veteran Sammie Clay sits in a chair, wearing a mask and talks to her standard poodle guide dog, Sofie.”
    The alt text clearly describes the image and the main purpose.
    • Example 3: Good alt text
      • The alt text for this image is “On a sunny day, a child is applying sunscreen to the shoulder of a woman wearing a sleeveless shirt. Both the child and the woman are wearing sunhats.”
      • This is an example of good alt text. It is concise, describes the image within the context of the page, and does not use the file name nor any “imagery” wording.
    The alt text describes the setting and the important surroundings of the image.
    • Example 4: Good alt text
      • The alt text for this image is “World War II Veteran Rachel Torres smiles and sits in a chair holding a bouquet of orange, purple and pink flowers to celebrate her 101st birthday.”
      • This is an example of good alt text. It is concise, clearly describes the image within the context of the page, and does not use the file name nor any “imagery” wording.

    Related Articles

    Writing content for VA.gov

    Was this helpful?