How to Write Effective Alt Tags for Images?

Make your images read better with well-written alt tags. Are you ready to write for images?

Alt tags or alt attributes are “alternative text “ for an image. Alt tags help to describe the image and what the image is representing. When images are accompanied by well-written alt tags they help visually impaired users who use screen readers to understand the images. Alt tags also help in SEO (search engine optimization). Technology and screen readers cannot read an image without an alt tag/text. Users also need alt tag/text when they are using assistive technologies, or when the images are missing or turned off, alt tags also needed for translation purposes.

Images are used in context while creating the content. So no image is an exception to this. The key questions to ask before writing an alt tag/attribute is:

• Why is the image used? (function/purpose/context/goal)
• What is the message being communicated through an image?
• Who are the target users?
• What are the terms/ language used by them?

Once you have answers to these questions, writing alt tags for images is easy. For audios, you need to provide transcripts and for videos, you need to add captions and video descriptions to make it accessible to all.

What are the different types of images used on the web?

Images are categorized based on the purpose they serve. So it is important to know the use of an image and the context in which it is used. Images are broadly categorized under the following:

• Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The alt tag for this kind of an image should describe the essential information presented in the image.
• Decorative images: when images are used purely for decorative purposes, use a null text alternative (alt="") so that screen readers omit reading such images.
• Functional images: When icons or buttons are used as images, describe the function of the link or the button in the alt text. For example, a print button or a cancel button.
• Images of text: always avoid using images of text, like tables/graphs with a lot of content. if used, always provide the same words that are present in the image.
• Complex images: Images such as graphs or diagrams can be very difficult to understand. Provide the same content that is there on the image. Also, you can make use of long descriptions to explain the complex information with additional description.
• Groups of images: If many images are used to convey the same information, use the same alt tag descriptions for the entire group of images.
• Image maps: When groups of images are linked together and made clickable, the alt tag should describe the overall purpose and context of the image and provide the destination of the link.

Tips to write effective alt tags

Write descriptive alt tags

When you start to write alt tags, ensure it describes the image well and the description is useful to the users. A simple rule of thumb is, read the alt tag loud with closed eyes and check if it describes the image well. Provide sufficient information to describe the image well for a user who is visually impaired or uses a screen reader.

Keep alt tags short

Alt tags have a limit of 125 characters hence it is important for you to keep the alt tag brief while being descriptive. Do not write full sentences instead use long descriptions to provide additional details. Alt tag should provide enough detail for users and search engines to relate and understand the image.

Use relevant keywords

Using the keywords in alt tags is an effective way to help rank your website better in the search engines. When alt tags are used efficiently, it helps your website to show up in web search and in Google images. Make use of alt tags to include keywords but do it carefully, do not stuff keywords.

Keep your text meaningful

Alt tags need to be simple, clear, crisp and descriptive too. Make sure your alt tags are meaningful and follow punctuation and grammar. Always remember you are writing these tags primarily for users and later for search engines. Alt tags should read natural and be useful to users.

Be specific

Ensure your alt tags are accurate in describing the image, its function, purpose, and context. Your alt tag should represent the correct content and should be presented as succinctly as possible.

Do not include “image of,” “picture of,” “this is an image of ”etc. in your alt text.

Considering you have a character limit for alt tags, every word that you use in the alt tag should help a user understand the image. Do not use an image of, a picture of and waste your words. It is already known that your alt text is referring to an image, so there’s no need to specify it. Don’t forget, a well-written alt tag improves the accessibility of your website.

Use of empty alt tag for decorative images

Images are used for various reasons. Images are used to convey a context, a message, explain a function and also for decorative purposes. Always know the purpose of an image before writing an alt tag. What is the intent of an image? is the key question you should ask yourself first before writing the text for alt tags. If an image is used for decorative purpose only, then give an empty alt attribute. The decorative images should be handled in CSS and not on your HTML. Depending on the context and use of an image, make use of an empty alt tag. The empty alt attribute makes sure that screen readers skip the image.

Simple rules for alt tags:

Before writing alt tags:

• Know your users (their background/terminology used by them)
• Understand the context in which the image is used (user’s goal, information around the image, how an image fits in that page)
• Use consistent language (voice and tone- decide whether it should be functional, descriptive or emotional)

If an image contains:

• Text: Repeat the words in the alt text
• Visual information: Explain it
• Sensory information: Describe it
• Nothing important-Leave the alt tag empty, ignore it

What are the benefits of good alt tags?

If you are wondering why you need to care for alt tags, they are more than one reason to do so. Here is why you should care for them:

• Your website will be accessible to all
• Makes your website SEO friendly
• Enables your images to be found on search engines like Google

The power of alt text is immense when used correctly. It helps your website to do well in many ways and your website’s experience can delight the users as well as search engines. Now is your chance to make your picture worth more than a thousand words.