Why you should care about the alt attribute on images

When you design applications with empathy, you are a happy developer if you don’t leave anyone behind.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee

Always add the alt attribute to non-decorative images. If a user cannot view images on a website, the alternative text provides information about the images.

Adding descriptive text in the alt attribute is also important to boost your website’s visibility on Google Search Engine as web crawlers use it to understand image content. Always add a full stop (.) at the end of the text to improve accessibility. To clearly understand the role of a full stop, try reading a sentence without punctuation marks.

Adding a description using alt

<img src="linkToImage.png" alt="A descriptive text." />

Decorative images should have an empty alt attribute:

<img src="heroImage.png" alt="" />