Accessibility: How to Use Alt Text Properly

What Is Alt Text, and Why Is It Important?

Alt text, or “alternative text,” is a word or phrase associated with an image on a webpage. Since websites need to be accessible to all types of people, alt text is helpful to visually impaired users who use a screen-reader to process a web page. Alt text lets these users know what important images on the page contain. Far too often, across the web, alt text is misused, and that includes many pages on our websites.

In WordPress, alt text is entered in the Media Library:

**When Not to Use Alt Text**

Consider this image:

If you were adding this picture to your page, what alt text would you use? “students smiling”? “Liberty students on campus”? While those do indeed describe the photo, that information is not helpful to a screen-reader user. These users might even consider it to be annoying, time-wasting, and perhaps a little disruptive as they try to complete their goal on that page.

This photo is an example of a “decorative image” – only on the page to add aesthetic value for sighted users. It conveys no information that would benefit a screen-reader user. In this case, we would not enter alt text for this image so that screen-readers will not announce its presence. Just leave the alt text field blank in WordPress. We call this “empty alt text.” There are instances in which a decorative image must not have empty alt text – we’ll come back to that in the next section.

To Sum It Up

Do not enter alt text for decorative images – only for images that convey useful information.
Do not be redundant with alt text when the same information is nearby. Use empty text instead.

When Alt Text is Needed

Graphics

When an image on the page conveys information to a sighted user, a screen-reader user needs access to that information too. This might be a graphical illustration that contains text – perhaps promoting an event. Here’s an example:

Without alt text, screen-reader users would not be aware of this information (unless it is repeated in normal text elsewhere on the page.) Think about what alt text you would use for this image. There is a fair amount of information here, and while there is no limit to the alt text length, the text should be as concise as possible. After all, the more text there is, the longer it takes a screen-reader to announce it.

Perhaps you would enter simply the text that is visible: “Writing Lab – Monday-Thursday Noon-9 p.m. Friday Noon-5 p.m. JFL 261 Jerry Falwell Library Supported by CASAS”. Note though, a screen-reader does not interpret dashes and would announce “Monday Thursday noon nine P dot M dot Friday…”

Here’s a way to make it friendlier for screen-reader users: “Announcement: Writing Lab Open Monday through Thursday, Noon to 9 P M and Friday, Noon to 5 P M in room JFL 261.”

Images that Inform

When placing an image on a page, simply ask the question, “Is this image conveying information?” If the answer is “yes,” good alt text is needed.

There may be situations where a photo doesn’t have text, but its context is important to the page content. Example from Liberty housing:

Brick and concrete exterior of the 8-floor Residential Commons dorm

While this is just a building, a description may be of interest to a visually impaired prospective student. Possible alt text: “Brick and concrete exterior of the 8-floor Residential Commons dorm.”

Don’t begin your alt text with “Image of…” or “Graphic of…” – screen-reader users will be aware that the item being described is an image.

Beyond simple text in an image, other examples would include icons, logos, accreditation, and badges. However, there are also complex images, such as charts, graphs, and infographics, that may require special handling for description. If the image you want to use is complex with a lot of information, please contact the Web Content team (webcontent@liberty.edu) for help.

Linked Images

Now, back to decorative images. There is one case where a decorative image must have alt text: when that image is linked. If an image is linked, it cannot have empty alt text! Screen-readers would skip the link entirely. Instead, describe what the link points to, even if the image is decorative and contains no text. For example, if the image links to the “Tuition and Fees” page, just put “Tuition and Fees” in the alt text field. As with link text, avoid phrases like “Click to…” This applies to non-decorative images as well, such as a photo with text that says “Staff” – the alt text would then be simply “Staff.”