How to add alternate text to images?

Authors note: This is a re-published post due to an unavoidable technical issue.

In continuation to our post <alt> Campaign: Let’s make images on the web accessible, here are a few tips on how to add alternate text on different platforms.

In all platforms, ensure that your alternate text is meaningful.

Add alternate text in HTML Code

After writing image source, add <alt> attribute to include alternate text of the image. Example code:

For informative images: <img src=”place image source here” alt=”This is alternate text for given image”>

For active images: <a href=”link address”><img src=”Place image source here” alt=”This is alternate text for this image link”></a>

For decorative images:<img src=”Place image source here” alt=””> Leaving an empty alt attribute will ask screen readers to ignore that image. But if we do not use alt attribute at all, then screen reader would possibly pick relevant information such as image’s file name as alternate text and expose to the user which doesn’t makes sense.

For CSS rendered background images: If those are just for decorative purpose, no worries but if background images are informative, then bring them to foreground and provide a meaningful alternate text.

Add alternate text to social media

Most of the social platforms such as Facebook, Twitter, WhatsApp, Google+ etc., has an option to add description while uploading an image. Even if we are uploading an image album, there is an option to describe each image. All we need to do is to make sure to use this feature and describe those images we post. That not only helps our connects with disabilities but also someone who have knowledge about the location we are posting about etc.,

OK… let’s continue to make images accessible!