December 28, 2019

Image Alt Attribute – When should i use it

Image alt attributes are often confused for captions. Also, many website owners keep on asking whether these image alt attributes are necessary for their sites.

This article provides detailed answers to this question and more. We have also included information on the different types of image alt attributes, their uses, and a bonus section on the correct and wrong usage.

Let’s dive in!

What Is The Image Alt Attribute?

An image alt attribute (or alternative text) refers to words used to describe the content of an image.

As you already know, people with visual impairment rely on screen readers to read and interpret web content to a format they can understand. These screen readers use image alt texts to interpret the content on images. Thus, every image alt text must be sensible and easy to understand.

Image alt attributes also replace images that cannot be displayed either due to a poor internet connection or other site errors.

Are Image Alt Attributes required?

The importance of images is hard to argue. They ensure your content is visually appealing. Thus, readers are likely to spend more time on your page. The more time a reader spends on your site, the more they are likely to buy your products or services.

But, have you ever thought about what happens when the images on your site cannot be rendered to users due to a poor internet connection? Or, have you ever wondered how your content can be delivered to a wider audience to include people with visual impairment?

That is where image alt attributes come in. Image alt attributes have a whole lot of other benefits. Let’s have a look at the major ones.

  • Image alt attributes help to improve the rank of your site by search engine crawlers. Search engine crawlers cannot read and interpret images. They rely on alt texts to interpret and rank images according. A high ranking site is likely to attract more readers, which is one step towards making sales.
  • Alternative texts also give web users a brief description of the content of images that cannot be displayed due to network failure.
  • Alt texts boost the accessibility of a site by providing better user experience. You can now rest assured that the content on your site is accessible to all your readers.

Image Types

As a general rule of thumb, each image on your site should have its alt text. However, the image position and type of image alt attributes vary from one image to the other. Below are examples of the most common types of images.

Informational Images

Informational images refer to images that provide some information about a product or service. The alt text used for these types of images should pass the exact information that is in the image in a few words.

Decorative Images

Decorative images are those that convey no specific information. They are included purely for their aesthetic beauty.

The alt attribute for decorative images should be empty. This allows the screen reader to omit such images since they are meaningless to users with visual challenges.

Functional Images

Functional images are meant to trigger you to take action. They are also referred to as linked images.

The alternative text for these kinds of images should pass information regarding the action that will be triggered when the user clicks on the image. If the image alt attribute does not provide this information, screen readers will miss out on the purpose of these images.

Text Images

Text images should be avoided on your site as much as possible. But, in special cases where they cannot be avoided, use an image alt attribute that conveys the exact message as the text image. Ensure the alt text contains the exact words in your text image.

Complex Images

Complex images refer to charts, graphs, maps or other images that cannot be interpreted by merely looking at them.

For such images, the alternative text should be as comprehensive as possible. If the description of an image cannot be completed by using only a few sentences, then it should be provided by linking out the image to a more detailed definition.

Image Alt Text VS Image ARIA Role=”presentation”

ARIA is an acronym for Accessible Rich Internet Applications Suite. It defines a set of guidelines aimed at providing a better user experience, especially to people with vision challenges.

ARIA Roles main focus is to provide better access to content that is developed using technologies such as HTML, Ajax, JavaScript, etc.

It does not interfere with how elements appear in browsers. Its primary function is to improve the user experience for screen readers.

The ARIA role = “presentation” can be used instead of an empty alt text to hide decorative images from screen readers. However, not all screen readers support them. Thus, ensure all aria roles are paired with the empty alt text.

Other Image Attributes

There are other types of image attributes that should not be confused with alt texts. Here are the main two.

Longdesc Image Attribute

Longdesc is an image attribute that allows content creators to add a detailed explanation to images that require longer descriptions.

Title Text Attribute

The title attribute is used to give more information about an element. This additional info is displayed as a pop up when someone moves the mouse over the said image. Note that the title attribute is not displayed when the image cannot be displayed.

Correct and wrong usages of Image Alt Descriptions

For you to rip the full benefits of using alt descriptions there are few dos and don’ts that you should keep in mind.

Image alt attributes should be detailed, yet concise and straight to the point. Avoid being too wordy.

Alt text used for complex images should be linked to a detailed description of the complex image

Remember that an empty image alt attribute is usually skipped by screen readers. Thus, ensure all meaningful images in your site have an alternative text. Otherwise, they will be mistaken for decorative images.

If your image includes a link to another page, ensure you include details on what readers should expect in case they select that link.

The Bottom Line

Alt tags are alternative texts used to describe the contents of an image. They are used to provide a better reading experience for the blind. Additionally, in a case, for some reason, the image is inaccessible, the alt text is shown.

As seen above, image alt texts are a must-have for every site. They not only provide better content access to its users but also boost your site in search engine results.