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:
- Screen readers will speak the alt tag of an image for users who cannot see.
- If an image cannot be loaded due to some sort of network or IT error, the alt tag will display instead.
- 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.
Examples
Here are some good examples of Image Descriptions. Note the concept and/or function in each:
- Graduate student taking notes during a class lecture.
- Facilities Management staff member leading a safety inspection.
- Chemistry students in lab safety gear, testing vials of liquid.
- 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.
- To the Moon—and Beyond: The alt text for the W5 mission diagram is “Key components of the rover are shown, full description in the image caption.” and the description is in the caption below the image.
- Sequence of Events: The alt text for the Venn diagram is “Venn diagram, described in the page linked from the caption.” Since the caption does not explicitly describe the entire diagram, the full description is provided on a separate page and linked to from the caption.
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.