Example: Alt Text Steps in Action
We'll walk you through an example of how to apply our step-by-step instructions for
writing alt text to a common type of website visual.
Our Example Alt Text
For context, the following photo features some students with disabilities who participated
in a photo shoot at USC. Assume that this image will be posted on our Digital Accessibility
website, where we provide resources on how to create accessible digital experiences.
This context can help you determine what information to include in your alt text.
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 could be good or bad depending on how
close it is to the examples provided.
Unhelpful Alt Text
Image of a golf cart
Better Alt Text, but Needs Work
Students riding in a golf cart on campus.
Clear, Descriptive Alt Text
Students with disabilities ride in a golf cart in front of the University of South
Carolina School of Music building.
How We Got To Clear, Descriptive Alt Text
- 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. A screen reader
will already tell the user that this is an image.
- Examining the Image closely
What's happening in the example image above? Students are riding in a golf cart. They
are on campus, specifically in front of the School of Music building. Given the context
that this photo will be presented on the Digital Accessibility website, it is relevant
to include that these students have disabilities.
- Checking if the image is linked
Linked images should have alt text that conveys the function of the link or where the link will
transport the user. Since this image is not linked, we can move on to our next step.
- Including Text in the Image
Since the name of the building is in the background of the image, we've included the
text "University of South Carolina School of Music" in our alt text.
- Determining if the Image is Complex
This is a basic photo of students on campus. It is not an infographic, chart, diagram,
or any other type of complex image; therefore, we only need to include alt text and not a long description.
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. Screen readers add a slight pause after a period
that helps with readability.
Check out more of our alt text examples, which demonstrate a greater variety of scenarios than the basic example illustrated here.