CMS Tip: Use ALT Text to Describe What’s Happening in an Image

Posted on 10/28/2016 3:35:26 PM

This is part of a series of tips for web maintainers. The Web Team posts hints and tips about the CMS, MyIUP, IUP Mobile, and the interactive map each week.

Whenever you add an image, be sure to include effective ALT text. It’s essential for keeping our site accessible to everyone, and can help us rank higher in searches.

ALT text is short for “textual alternative.” This text is presented to anyone or anything who can’t see a photo or graphic. That means both visually impaired users and search engines use ALT text to understand what is in an image.

For technical details on how to add ALT text, see the Web Team’s how-to on using the inspector to add ALT text. This post will cover writing effective ALT text and why it’s important.

Effective ALT Text:

  • Describes what you see in the image rather than assigning it a label (see the career fair example below)
  • Does not need to be in complete sentences
  • Includes visually descriptive details for those with vision impairments
  • Includes a keyword or two when possible (to help with searches)
  • Is always true (ex: don’t assign a major to someone if you don’t know it)

Example 1

Student reading a book during an English Education class

Not so good:

A student in class

OK:

Student reading a book during class

This is easier to visualize for those with vision impairment.

Better:

Student reading a book during an English Education class

This text includes keywords. Majors and departments are often searched and are good to include when you know them. The university photographer usually includes the name of the department or major in a photo’s file name.

Example 2

Students wearing suits talk to employers at the IUP Accounting Day career fair.

Not so good:

The career fair

This is a more like a label than a description of the scene.

OK:

Students visit a career fair

Better:

Students wearing suits talk to employers at the IUP Accounting Day career fair.

ALT Text Is Needed for Accessibility

Our website needs to be accessible to everyone, and ALT text is one of the major tools we have. When someone with vision impairment uses a screen reader to hear a web page read aloud, the ALT text is read along with the page’s regular text. This makes it possible for them to understand what is represented in the images so they can participate equally on our website.

Also, when anyone using the website cannot load a photo for some reason (like a slow cell connection) or turns off images, the ALT text will appear for those images.

ALT Text Helps People Find Our Site

Well-written ALT text helps people find our site. Search engines crawl websites looking for a variety of things, including titles, menus, clean content, best style practices, keywords, and other elements. They use these factors to determine which sites will rank high in a search. Good ALT text can make a difference.

—Marilyn Kukula