Skip to Content

Digital Accessibility

Image Component Alt Text

The Image Component - Unit is a versatile way to add images to your unit site with an Image Description field for your alt text.

Example Image Components

A golf cart drives behind a bush with students laughing in the backseat.
Example 1: A golf cart drives behind a bush with students laughing in the backseat.

Since your image component can be used in so many different contexts, you should follow the general steps for writing effective alt text.

There isn't a way to mark your image as decorative in this component, so you will need to write alt text for your image. Ask yourself:

  • What is the purpose of the image on the page?
  • What information does the image convey?
  • Does the image contain text?
  • Is the image complex?

Our first example is a basic photo where you can write your image description as a single sentence that captures the main idea and subject of the image.

Our second example, however, is more complex. As a diagram with a lot of text in it, this complex image also requires a longer description.

Strategic Priorities triangle diagram.
Example 2: A triangle diagram with three sections that swirl into the center, University of South Carolina. The first section has the label Access and Transparency: reimagining the student experience and advancing post-graduate success. The second section has the label Inclusive Excellence: increasing research and scholarship to drive community and economic impact. The third section has the label Service and Integrity: transforming service delivery and promoting operational excellence.

However, alt text is not meant to be terribly long. In this example, our alt text (or image description) is simply "Strategic Priorities triangle diagram", which provides a concise description to supplement the longer description that we've included in the caption.

The caption is where we include the text embedded in the diagram so that we can keep the alt text brief. It is generally a best practice for complex images like charts, diagrams, and infographics to have both a short and a long description.

In the image component, the image description can be your short description and the caption can be your long description for complex images.

Adding & Replacing Alt Text

  1. Open the Edit Component dialog.
  2. Fill in the Image Description field with your alt text.
    Screenshot of the Edit Component - Image Component - Unit dialog. The image description field has the alt text: A golf cart drives behind a bush with students laughing in the backseat.
  3. If you are adding a complex image like a chart or diagram, add your longer description in the caption.

Challenge the conventional. Create the exceptional. No Limits.