Skip to Content

Communications and Public Affairs


Alternative Text Guidelines

Alternative text, or alt text, uses words to describe an image to a site viewer who cannot see it.

All images on sc.edu require alt text. Image alt text should encapsulate what the image portrays to a sighted person if any of the following criteria are present:

  • Presents information that can’t be found in the rest of the text on the screen.
  • Helps the user gain better understanding of the content.
  • Contains a link (e.g., you click on the image and something happens).
  • Contains text that isn’t elsewhere on the page.

If an image is purely decorative or doesn’t add additional understanding, the alt text should be a single space, so a site reader knows to skip over it.

 

How to Write Effective Alternative Text

Good, helpful, useful alternative text presents the same information and function as the visual or image. Here are some helpful tips for writing alt text.

  • Describe the context of the image.

    Ask yourself: What is the image conveying to a sighted person? What is the spirit of the image? How would you relay that to someone who couldn’t see the image?

    Helpful Alt Text: Students playing volleyball at the Merle Norman sand volleyball court outside of the Strom.

    What It Conveys: This block is on a page about the UofSC student experience. Each block on the page has an image showing a part of the school, capturing one part of the spirit of being a student at UofSC. The above alt text is appropriate because the rest of the text on the page doesn’t mention that there is an outdoor volleyball court available for students on campus or where that volleyball court is located. Without saying these things in alt text, the information is only available by looking at the image.

  • Students playing volleyball at the Merle Norman sand volleyball court outside of the Strom
     

 

  • Avoid redundancy.

    Screen readers identify an image by reading “image” so don’t include “Image of” or “Visual of” as part of an image’s alt text.

    Helpful Alt Text: Student with a backpack riding a bicycle on the brick walkways of the UofSC Horseshoe, surrounded by trees and historic buildings.

    Redundant Alt Text: Photo of a student with a backpack riding a bicycle on the brick walkways of the UofSC Horseshoe, surrounded by trees and historic buildings.

  • Student with a backpack riding a bicycle on the brick walkways of the UofSC Horseshoe, surrounded by trees and historic buildings.
     

 

  • Present any text within the image itself.

    Screen readers cannot see text that is embedded as part of the image itself, so consider first removing the text from your images and relying on the systems within the CMS to convey the information. However, when that is unavoidable, your alt text needs to display all of the text from the image. 

    Helpful Alt Text: 2017 NCAA Women’s Basketball National Champs

    What It Conveys: Because the text here is part of the image, a screen reader cannot read it. The above alt text is appropriate because it matches the text that is in the image, making it possible to get that information if you cannot see the visual.

  • 2017 NCAA Women’s Basketball National Champs
     

 

  • Be descriptive but succinct.

    Convey the meaning of a visual in as few words and characters as possible while still providing the full viewing experience to those using screen readers.

    Helpful Alt Text: Group of students in life vests kayaking and canoeing on one of Columbia’s three rivers.

    Avoid Long-Winded Alt Text: Photo of a group of male and female students in life vests of different colors in kayaks and canoes, also of different colors, with yellow paddles in calm water on one of three Columbia’s rivers – either the Congaree River, the Saluda River, or the Broad River.

  •  Group of students in life vests kayaking and canoeing on one of Columbia’s three rivers.
     

 

  • If an image is merely decorative, make it skippable to site readers.

    If an image does not add any additional information to the page, you can put a single space in the alt text field, so a site reader knows to skip it.

    Helpful Alt Text: [alt text field left blank]

    Why You Could Leave it Blank: If the content on the page already mentions the social media accounts by name, then you don’t need to repeat them as alt text for an image like this.

  •  
Pro Tip

Null Alt Text

When you have determined that your image is purely decorative or redundant, you can indicate so by checking the decorative image checkbox in the insert/edit window of the CMS. This will provide the structure that screen readers need to skip the image altogether. Be sure to use this approach sparingly and not as the default alt text for all your images.