Just flirting with the idea? At the end of this blog, you’ll be saying “yes” to alt text.

What is alt text?

Alt text is short for alternative text. It’s used to convey the meaning of non-text elements, such as images or buttons.

What does that really mean? Where does it come from?

What we think of as alt text is really an alt attribute behind the scenes in HTML code.

It became a hot topic of web accessibility in the US when the Rehabilitation Act was amended and Section 508 set standards for electronic and information technology. While Section 508 is specifically geared toward public access for federally-funded agencies, many privately-owned companies have dealt with web accessibility lawsuits based on a civil rights law—the Americans with Disabilities Act (ADA). Although not specifically including web accessibility, Title III (Public Accommodations) of the ADA has been used as a catalyst for change for websites ranging from entertainment, email, restaurants, and retail.

While alt text stemmed from web accessibility and coding, it’s a lot easier to access and more ubiquitous today. Most content management systems, desktop publishing platforms, eLearning authoring tools, and even social media sites have user-friendly alt text interfaces.

Why should I use alt text?

Alt text is vital for accessibility, but it’s beneficial for many reasons. Let’s focus on two main benefits beyond compliance:

  • Provides important information that can be communicated through screen readers and used on-screen when image links are broken
  • Improves search engine optimization (SEO) through topical relevance and targeted keywords

When do I need alt text?

It’s best practice to use alt text for anything that can be viewed electronically by an external audience, but not needed in personal documents or presentations that will only be shared synchronously.

In that case, do I need alt text for every image?

That’s kind of a trick question.

If an image is purely decorative and does not provide any useful information, then it’s best practice to null the image. Nulling an image is done differently depending on the platform—many are automatically set up to null an image if no specific alt text has been added. But it always results in appropriate communication—like a screen reader smoothly skipping over a decorative image.

So, not every image actually needs alt text, but each image should be addressed.

How do I write alt text?

You will get some conflicting results if you Google this question because writing effective alt text is largely based on context. For instance, it wouldn’t make sense for an icon being used as a save button to be described as a floppy disk.

Here are some commonalities, in addition to the importance of context:

Do

  • Be concise—only use as many words as needed to explain the specific importance

Don’t

  • Use “image of” or “picture of”
  • Be redundant, considering the surrounding text

 

Remember the save button? Ideally, you wouldn’t need to write alt text because “save” would also be written with the icon (and you don’t want to be redundant). If that’s not the case, you could simply use “save” for the alt text to be quick and accurate.

Who do I call for help?

Are you saying “yes” yet? Now you know the basics of what alt text is, where it comes from, why it’s important, who can use it, and how to write it.

While hugely beneficial, alt text can be a little time-consuming and tricky. If it’s something you’d rather keep casually acquainted with, just give the experts at McKinnon-Mulherin a ring!

Resources

We’ll be providing more advanced and specific examples in the future. Until then, check out the resources below: