Writing Good ALT Tags

Alt tags (also known as Image Descriptions or alt text) are a very important for the accessibility of your webpage. Moz does a good job of explaining what alt tags are. Please take a moment to read up on what alt tags are and why they are important. Moz also provides some tips for how to write good ones.

There are many uses for alt tags. The most well-known ones are:

1. Screen readers will speak the alt tag of an image for users who cannot see.
2. If an image cannot be loaded due to some sort of network or IT error, the alt tag will display instead.
3. Alt tags boost search engine rankings and can help your website’s images display in Google search results.

Guidelines

We need to write meaningful Image Descriptions for any images that we put on our websites at Michigan Tech. Not only is it a legal requirement, but it is also the right thing to do. When writing alt tags, please keep these guidelines in mind (borrowed from WebAIM):

• Be accurate and equivalent in presenting the same content and function of the image.
  • Consider the context of the page. An image of researchers in a lab on a page about lab safety may have alt text of “Researchers wearing goggles, gloves, and lab coats working in a lab.” The exact same image on a page about the lab they are in may have alt text of “John Doe and his research assistants working in the Water Chemistry Lab.”
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • You do not need to describe everything in full detail. The user probably doesn’t care what color shirt the person is wearing, unless, of course, the purpose of the webpage is to sell that shirt or to promote wearing a certain color shirt for a cause.
  • For a photo of a person, just use their name. This would apply to personnel items, for example.
• DO NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Other tips include:

• A good rule of thumb is to keep alt text between 5 and 15 words
• Do not worry about keywords or SEO. Just focus on describing what is in the photo. SEO should be considered a side benefit and not the goal for writing good alts.
• The text should be neutral and informative.
• Avoid acronyms and symbols.
• Use proper capitalization, grammar, and punctuation, like you would in a sentence.

Diversity in Alt Text

While we certainly can give guidance, we think it’s important to note that much of the time, creating alt text is a little bit of an art form. You can ask many different people how they’d describe an image, or what they find important or relevant about an image and get many different answers. Consider the context, be respectful, and try not to make unintentionally biased assumptions, all while trying to keep the alt text concise. We know, it’s a challenge!

In many cases, things like gender, race, etc. are important to both those in the photo and/or those trying to understand the photo using assistive technology. Our audience will be from different backgrounds and each may prefer different information. Some SR (screen reader) users may sometimes feel there is too much info in alt text and it is like clutter or noise to them while others prefer additional information such as race, gender, physical descriptions, etc.  So we just need to consider both the context and the audience and make the best judgment calls we can.

Here are the two articles we recommend:

• Alternative text: race, gender, and physical descriptions
• Identity and Inclusion in Alt Text

Examples

Here are some good examples of Image Descriptions. Note the concept and/or function in each:

1. Graduate student taking notes during a class lecture.
2. Facilities Management staff member leading a safety inspection.
3. Chemistry students in lab safety gear, testing vials of liquid.
4. Aerial view of Michigan Tech’s campus.

Notes: In example #1, if it isn’t important that the student is a graduate student, you could simply say ‘Student’. For #2, if the user is already on the Facilities Management website, you could simply say “Staff member”. Same with #3; you could simply say “Students”. In #4, if it was important to mention that the campus was snowy in the photo, for instance if the website was about winter in the Keweenaw, you would say “Aerial view of Michigan Tech’s campus on a snowy winter day”.

Long Descriptions

If you need more than one sentence to explain the image, e.g. describing a diagram, you would need to include a full description in the text on the page near that image or on a separate page that is linked in the text. In the alt text, note something like, “Diagram described in text on the page.” Here are a couple live examples from a past Research Magazine.

Text in the Image

If there is any text in the image, it will pixelate when enlarged, so aside from a screen reader not being able to access the text, a user who zooms the page will also not be able to read the text. Both of these users would rely on the alt text to restate all of the text found in the image. Again, if the text is long, you can use the method described previously with the full description on the page. To avoid this duplication, instead of using an image of a poster on your webpage, recreate the content of that poster on the page itself.

CMS Use

In Michigan Tech’s Modern Campus CMS, there are a couple places you may come across the need for Image Descriptions. The first is the “Description” field when you are inserting an image onto your page or in a snippet. The second is in the “Image Description” field of the MultiEdit Content screen for both pages and personnel items.