What is Alt Text?

Alt text is a brief text description of an image that is read aloud to those using assistive technology to interact with digital content. Alt text also displays when an image doesn’t load on a page, such as when you have a slow internet connection. Alt text is meant to be a textual alternative for people who cannot see (for whatever reason) the image itself.

Writing Alt Text for Images

Describe what the image is contributing to the content of the page, typically by describing what you see. When writing alt text, think about the reason you are adding the image in the first place — that may help you identify the value the image is adding from a content perspective.

For charts and infographics, focus on a key interpretation of the data that an average person would be able to take away from looking at the graphic. For data-rich infographics, it can be helpful to pair that graphic with a table so that specific data points are still accessible to people using screen readers.

Tips for Writing Equivalent Alt Text

  • Be specific.
  • Be mindful of context.
  • Keep it short.
  • Aim for <125 characters.
  • Don’t include “picture of,” “image of,” etc.

Learn more about writing effective alt text

Alt Text vs. Captions

Alt text is different from captions (such as those available in the Aggie UX captioned media component). Alt text should provide information that would be available for a sighted person by simply looking at the image, whereas a caption can provide additional context.

Element Content
Image Texas A&M University mascot Reveille leads the Corps of Cadets marching through campus.
Caption Reveille, the highest ranking member of the Corps of Cadets, leads the Corps’ procession with her handler, Theodor Neal, the 2023-2024 Mascot Corporal.
Image Description / Alt Text Texas A&M University mascot Reveille leads the Corps of Cadets marching through campus.
Citation Texas A&M University Division of Marketing & Communications

Decorative Images

Not all images and graphics provide content — some are purely decorative. For example, borders, textures and other similar graphical elements don’t usually provide value as content (though they may help the design be more visually appealing).

For purely decorative elements, alt text is not required. In most accessible enterprise software and content management systems (CMSs), you can check a box to mark an image as decorative so a screen reader will skip it.

Don’t Use Images of Text

Don’t use images of text on your website except where absolutely necessary or for branding purposes, e.g., your logo. If images of text must be used, they must have a textual alternative that provides equivalent information.

The biggest offenders we tend to see on Texas A&M University websites include:

  • Flyers promoting events added as images
  • Graphics to promote events

The more words included in an image of text, the more difficult it is to provide an accessible alternative.

Why Can’t I Use Images of Text?

  • Text in an image cannot reflow or resize to be legible on small screens.
  • Images of text (JPGs, PNGs, etc.) cannot be enlarged without becoming blurry.
  • Screen readers cannot read content inside of an image and rely on the alt text, which is read as one run-on sentence.

Alt Text in Aggie UX

Our Aggie UX WordPress theme and Cascade templates provide ways to add alt text when uploading images to your site.

Aggie UX WordPress

In WordPress, you add alt text in the Alternative Text field in the Media Library. Aggie UX components and page headers will automatically use this as the alt text on the page.

Aggie UX Cascade

In Cascade, upload your images using the Images with alt text content type (Add Content > Images and Files > Image with alt text). Enter the image’s alt text in the description field.

Use Siteimprove to Find Issues with Images

Siteimprove can help you find accessibility issues related to images on your webpages, including images missing a text alternative.

Find and Address Issues with Images

To see if you have any of these issues on your site:

  1. Log in to Siteimprove.
  2. On the left side menu, open Accessibility > Issues.
  3. On the Issues table, set the filters to Element type: Images.
  4. Click on each issue to get more information about how to address the issue and see affected pages.
  5. Repeat this process on the Potential Issues (Accessibility > Potential Issues) page to review occurrences that need a human to review to see if they are issues.

Once you have identified the issue, go into your CMS to address the issue and publish your changes.

After the page has been republished with your changes, go back to Siteimprove to rescan that page to see if the issue has been resolved.

Get Access to Siteimprove

All Texas A&M website owners have the ability to monitor the accessibility (and quality assurance) of their sites using Siteimprove. Use Siteimprove to identify potential issues, learn how to address them and watch your scores over time. If you are responsible for a Texas A&M website, email web@tamu.edu with your name, NetID and the sites you are responsible for to get access.