Skip to Content

Digital Accessibility

Example: Alt Text Steps in Action

There are steps you can follow when writing good alt text to help it clearly communicate the content of the image or video.

What would be good alt text for the image below?

The following is a common type of image found in the university's digital content: students engaged in an activity on campus. Read on to understand what good and bad alt text would be for this image, and how we analyzed the visual to write clear, descriptive alt text. 

  •  

    Good and Bad Alt Text for This Image

    There is no single answer for what this image's alt text should be, as long as you're following the guidelines. But your alt text for could be good or bad depending on how close it is to the examples provided.

    Bad Alt Text
    "image"
    "volleyball game"

    Better Alt Text but Needs Work
    Students playing volleyball on campus.

    Good, Descriptive Alt Text
    A group of students playing sand volleyball on a sunny day wearing warm weather clothes, surrounded by trees and campus buildings.

  • A group of students play sand volleyball on a sunny day in warm weather attire. A linked header below the image says Get in the Game with text below: Whether it's a quick workout at the Strom, a trip with the Surfing Club or a Saturday night at Williams-Brice Stadium, you'll find plenty of ways to get moving.
     

 

How We Got To Clear, Descriptive Alt Text

1. Examining the Image

What's happening in the example image above? Students are playing a particular sport, sand volleyball. They are on campus on a sunny day and they are dressed for warm weather. Because none of this information is available in the text surrounding the image on the page, you would include all of this information in your alt text. 

2. Considering the Visual Message

This image allows its audience, prospective students, to imagine themselves at the University of South Carolina. It conveys that the University of South Carolina is a warm, sunny place where students play sand volleyball, reminding us that the university is close to the beach.

This image also communicates that students at UofSC enjoy outdoor social activities for their exercise and that people at the university are friendly, welcoming and up for some healthy competition.

The image sends a message to its audience about what it's like to be a student at the university that is not available in its accompanying text. Your alt text should communicate that same message in words.

3. Excluding "Image of"

This image is a photo, the most commonly used image type online. There is no reason to say "A photo of" or "An image of" at the beginning of your alt text.

4. Including All Text

If the "Get in the Game" text here were part of the image and not live text on the screen, you would have a couple of options to make the image accessible.

Remove the text from the image and make it live text on the screen instead.

This is the recommended approach because it allows a screen reader to read your copy like any other text. You would still write alt text for the visual itself.

Include all of the text plus your description of the visual itself in your alt text. 

You should take this approach only if number 1 is not an option (as it's not in the example on this screen, for instance). This option is a lot more work for you and harder for those using screen readers to listen to. It should only be used when absolutely unavoidable.

The alt text for the image with its surrounding text would read something like: 

"A group of students playing sand volleyball on a sunny day wearing warm weather clothes, surrounded by trees and campus buildings. A heading below reads "Get in the Game" followed by text: Whether it's a quick workout at the Strom, a trip with the Surfing Club or a Saturday night at Williams-Brice Stadium, you'll find plenty of ways to get moving." 

5. Determining if Meaning Comes from Layout

In this image, there is no complex layout that's impacting the meaning of the visual. You do not need to address this image's composition in its alt text. 

A bright green circle highlights the words "best practice"

Use proper punctuation and end your alt text with a period.

By using proper punctuation such as commas or periods, screen readers can describe the image using a more natural rhythm. Additionally, screen readers add a slight pause after a period that helps with readability.

 

Our Result

Clear, Descriptive Alt Text
A group of students playing sand volleyball on a sunny day wearing warm weather clothes, surrounded by trees and campus buildings.


 

More Alt Text Examples

Multiple images from across the university's website and descriptions that would be considered examples of clear alt text for each.

 


Challenge the conventional. Create the exceptional. No Limits.

©