ALT tags (also known as Image Descriptions) are a very important feature involving all images on any given website. 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
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.
- 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.
- 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.
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 “Aerail view of Michigan Tech’s campus on a snowy winter day”.
In Michigan Tech’s Omni 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.