Accessible Technology

Images - ALT Tags

ALT tags (also known as alternative text, ALT text, or image descriptions), are an essential component of using images in any document or webpage at Michigan Tech. Moz does a good job of explaining  ALT tags. Please take a moment to learn about ALT tags and why they are important.

There are several uses for ALT tags. The most well-known are:

  1. Screen readers 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 displays instead
  3. ALT tags boost search engine rankings and can help a website's images display in Google search results

Guidelines

We need to write meaningful ALT tags for all the images we put into documents or onto 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 the image serves in your text
  • 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
  • Avoid the phrases "image of" or "graphic of" to describe an image. It is apparent to the user that the ALT tag is describing an image. If the image is conveying content, it is typically not necessary that the user know the image 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 the alt text. 

Other tips include:

  • A good rule of thumb is to keep ALT text digestible: between five and 10 words. If you exceed this, keep in mind that some screen readers only support 125 characters maximum.
    • Instead of using a very long ALT, use a brief ALT and also include a longer image caption (viewable by everyone) or link to a webpage with additional image content. Linking to an additional webpage is particularly useful to explain infographics.
  • Do not worry about keywords or Search Engine Optimization (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

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 No. 1, if it isn't important that the student is a graduate student, "student" would suffice. For No. 2, if the user is already on the facilities management website, you could simply say "staff member"; same with No. 3, you could simply say "students." In No. 4, if it is important to mention that the campus was snowy in the photo (for instance, if the website was about winter in the Keweenaw), a better ALT text would be "Aerial view of Michigan Tech's campus on a snowy winter day." In all cases, context is very important.

Code

<img src="blizzard.jpg" alt="Blizzard T. Husky" height="100" width="100" class="left" />

Learn More

To learn more about the principles of using alternative text:

Modern Campus CMS

In Michigan Tech's Modern Campus CMS, there are a couple of places where 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. It is important to enter proper ALT text in both situations.