Menu

Images & Alt Text

 

Overview

People who can’t see images rely on alternative text (alt text) to understand images. Alt text is a short written description that explains what’s shown in the image. It works behind the scenes so screen readers or other assistive technology can share that information with users who are blind or visually impaired.

Good alt text is short and to the point — just enough to explain the main idea without adding unnecessary details.

Simple Images

Alt text is required to convey visual information to users of screen readers. It can also appear when images don’t load. 

Decorative Images

Images used purely for decoration do not need alt text and should be marked as decorative. Decorative images use an empty alt attribute (e.g., alt="") so screen readers can skip them, providing a smoother experience for users with disabilities. 

Complex Images

Complex images like graphs, charts or diagrams often contain too much information to be fully explained with just alt text. They should have brief alt text that identifies the basic properties of the image, followed by a long description that contains the essential text and information communicated by the image.

 

Writing Effective Alt Text

Writing effective alt text can feel tricky at first, but by following these steps to analyze your images and understand what they convey, it becomes much easier. Focus on what the image is showing and what’s important for users to know.

  • Don't begin with "Image of..." Screen readers already announce that something is an image, so you don’t need to start alt text with “image of” or “photo of.” However, it’s helpful to mention the type of image — like an illustration, headshot, infographic, collage, chart or diagram — so users get a clearer sense of what they’re “seeing.”
  • Avoid text within images (unless it's a logo). Screen readers can't read text on images, so any information within the image would be lost. If images of text must be used, the alternative description field in Modern Campus CMS should contain the same words as in the image. See Images section below for more information.
  • If the image is linked, write alt text that describes the link's purpose. Linked images should have alt text that conveys the function of the link or where the link will transport the user.
  • Always review auto-generated alt text for accuracy. Auto-generated alt text doesn’t consider context and may miss key visual details you want to highlight. For example, Microsoft products often create alt text automatically when you upload an image, but it’s best to replace this with your own description.
  • Use proper punctuation and end your alt text with a period. Using proper punctuation, like commas and periods, helps screen readers read alt text with a natural rhythm. Periods add a brief pause, making the description easier to follow.
 

Alt Text Examples

 

Logos

When writing alt text for logos, remember that their main purpose is to represent a brand and identify the company.

  • Using the word "logo" helps screen reader users understand the purpose of the image.
  • Since screen readers cannot directly access text in images, you should include important text in your alt text.
  • For logos, use the format: "[Organization name] logo." 

Example of correct Alt Text: Palm Beach State College logo.

Note: If the image is being used as a functional link to link to the College's website, its primary function is now navigation. In this case, a good alt text would be: “Palm Beach State College home page.”

 

Photographs

For photos, include key details like names, places or actions shown. Think about why you chose that image and what message you want it to share with your audience.

Remember that alt text is primarily for accessibility purposes, while photo captions can be added to give extra content or details when needed.

Alt Text Example: Group of college students talking and walking down a sidewalk on Palm Beach State College's Boca Raton campus.

 

Diagrams

For diagrams or images that show data, try to capture the main point in one or two sentences. If the image is more complex, you can add extra explanation on the page or include a link to the full data. 

Alt Text: A word cloud with computer science terms, largest to smallest: Computer Science, Scientific, Algorithms, Technology, Process, Solutions, Software and other smaller computer science terms.

 

Resources