Blog
What Is An Alt Tag Or Alternative Tag?

What is an Alt Tag or Alternative Tag?

An alt tag, alternative tag or alt attribute is defined in a set of tags to allow you to provide a text equivalent for the object or image.

The alt tag is used by a screen reader software so that if a user is listening to the page instead of reading it, they can identify an image and interact with it if it is neccessary for page navigaton.

According to Wikipedia, “The alt attribute does not always have to literally describe the contents of the image. Keep in mind the purpose and context of the image and what would be useful to someone who cannot see it. The alt attribute is supposed to be an alternative for the image, usually stating its purpose. For example, an image of a warning sign should not have alt text “a triangle with a yellow background, black border and an exclamation mark”, but simply “Warning!”—unless, of course, the alt text’s purpose is to show what the warning symbol actually looks like.”

A visually impaired reader using a screen reader will be read the alt text in place of the image.  We encourage website owners to use alt tags on all of the images on a website in order to maximize the website’s accessibility

What are alt tags useful for? W3C  suggests the following: A text equivalent brings the following benefits to your web site and its visitors in the following common situations:

  • nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt tag set in its images, most of these browsers will display the description you gave instead of the images
  • some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what’s on your page
  • search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won’t miss important sections of your pages.

What should I put in my alt attribute? W3C also has these recommendations:

The generic rule for the content of the alt attribute is: use text that fulfills the same function as the image. Some more specific rules:

  • if the image is simply decorated text , put the text in the alt tag
  • if the image is used to create bullets in a list, a horizontal line, or other similar decoration, it is fine to have an empty alt attribute (e.g., alt=” “), but it is better to use things like list-style-image in CSS
  • if the image presents a lot of important information, try to summarize it in a short line for the alt attribute and add a longdesc link to a more detailed description

To learn more about alt tags / alt images, you can read: https://en.wikipedia.org/wiki/Alt_attribute or https://www.w3.org/QA/Tips/altAttribute

Back To Top