Guidelines to Writing Great and Effective Alt Text for Images

Uncertain questions (when, how, who, etc.) in crumpled sticky notes

Last week, we covered what Alt text (aka Alt tag, Alternative Text, Alternative Attribute) is and why it is important to write one to an uploaded image. You can read about that here.

A cartoon of blind woman with her guard dog
Web Accessibility and Alt Text. Image Credit: Yoast

So, you’ve uploaded an image, written the title, and then you moved on to the alt text field. You know that alt text improves SEO, provides context when images do not load on a page and communicates the image to a blind or low vision using a screen-reader. That’s all good but how does it do all that? Is there a skill to creating great alt text for images? Then you stare at the alt text field and think “What the heck I put here?” It is certainly not rocket science, but there are a few tips to creating great alt text for images which you need to follow…

Tips to Creating Great Alt Text for Uploaded Images

Simplicity is the Key. Don’t overthink it. It’s not poetry nor, as previously stated, rocket science. Generally, an alt text description doesn’t have to be more than a sentence. Master the art of saying a lot with a little.

Be descriptive yet terse. The main questions you should ask yourself when it comes to an alt tag is, “Why is this image used? What message it is supposed to convey?” Once you understand that, succinctly write it. It is just like tweeting. The difference between alt text and a tweet being you don’t need to include #hashtags or abrv8ns!

Utilize keywords to help your site rank better in search engines. It is a great strategy to use your site’s keywords in order to help your images rank. But be careful not to misuse your keywords as it could end up hurting your SEO instead of helping. Avoid keyword stuffing.

Consider the text surrounding the image. If you place images with alt text near the relevant text will help create coherency. The coherent experience will greatly aid non-visual users.

Additional Notes:  

Here are some special cases/instances you need to heed:

  • There’s no need to say “Photo / Image of…” because that’s inferred from the <image> tag.
  • Logos: Indicate the company name in the logo, like “DevotePress logo”. If the logo is used as a link to the home page, it can simply be “DevotePress Home”.
  • Images that contain information: If you have images that contain information, then you need to offer this information to the user in the alt-text of the image. Sometimes this is easy, e.g. a chart or graph will contain some information, or an image of text contains information. Unfortunately, this is not always straight forward. In some cases, you will need to use your judgment to decide if an image contains information or not. The essential question is, would the user miss something if you remove the image? If the user can’t see the image, they need to get the information in another way. The alt text should be a brief description of the information.
  • Decorative Images: If the image is not meaningful, is purely decorative or provides no context to the user, it may be left as blank (null), or alt=”” and the screen reader will ignore it.
  • Spacer Images: As the name suggests, spacer images are invisible images used to create spaces on webpages. They should always be assigned null alt text, or alt=””. This way most screen readers will completely ignore the image and won’t even announce its presence.
  • Bullets and icons: Bullets and icons should be treated in the same way as spacer images. Think about a list of items with a fancy bullet proceeding each item. If the alt text, “Bullet’ is assigned to each image then, “Image bullet” will be read aloud by screen readers before each list item, making it take that bit longer to work through the list.

In Summary

Well-written, relevant alt text provides valuable information about your blog to both your human visitors and search engine robots. It isn’t a difficult task. Keep it brief and to the point, and leave it blank on non-essential decorative images. Listening to a web page with a screen reader takes a lot longer than traditional methods, so don’t make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.

Hope you find these tips to creating great alt text helpful. Do you have any other tips? Please feel free to share with us below.

References:

Webcredible

9 Clouds

Phase2 Technology

WebAIM

Leave a Reply

Your email address will not be published. Required fields are marked *