I assume that you know what is an “alt text”, but just in case you don’t know, let us clear this first: alt text is a very short description that programmers type in the HTML that describes the image. The web browser understands that the website wants to place an image because in the HTML code there is an image tag that has mainly two attributes: the alt text and where the image is placed on the internet). The alt text is put as an attribute in the image tag of a website. Also, it allows search engines to understand what content is in your website so it can show it to people who are looking for specific images.

But, why is alt text important?

The alt text (a.k.a. alternate text and alt code) is displayed in the case that the image couldn’t be shown (e.g. the image route was wrong). But, most importantly, it serves as aid to the visually impaired. When the screen reader goes through the website, it can describe the image that appears by reading the alt code. If it weren’t there, the screen reader can’t know what appears on the image.

Take this, for example:

hec website with broken images and no alt text

Here, whoever was in charge of the HEC website (https://www.hec.ca), didn’t put an alternative text for the images on the homepage. In this case, the image route was incorrect (I changed it) and it can be seen that the browser shows a tiny light blue box with a question mark. If it were to have an alternative text, it would appear on the side of it.

Some content management systems show you a warning when you upload an image that “alternative text is not found”. It’s not mandatory, but it is useful if you want to have better SEO and rank higher on search engines.

In conclusion, having an alternative text is going to:

  • Have a better ranking on search engines
  • Show some text in case the web browser can’t find the media
  • Help the visually impaired understand your website

Just remember to do it!