How to Write Good Alt Text for your Images

Hello, welcome to this tutorial!
Today, I'm going to be explaining how to use alt text for your images.

<img src="https://image_link" alt="image_attributes"/>

First of all, what is "Alt Text"?

Alt Text which is also known as Alt Attributes, are used within an HTML code to describe the appearance and function of an image on a page.

They describe the image to screen readers and other users. Also, when the user is experiencing a poor network that prevents the images from showing, alt attributes are shown instead to the users.

That was just a little introduction to Alt Text.

Back to How To Write Good Alt Text for your Images

1. Always use an Alt Text.

The Number 1 rule for every image on a website is to always have an alt attributes.

2. Use CAPS for abbreviations.

When writing Alt text that includes abbreviation, always use uppercase. For example : MIT, WHO, etc. They are pronounced letter by letter by screen readers.

3. Leave it blank, if the image is not relevant

If you don't want your image to be read by screen readers, that is the image is not relevant, you may use an empty string as the alt attribute.

<img src="https://image_link" alt=""/>

4. Don't use "image of" or "graphic of"

When writing an alt text for an image, avoid the use of "image of" or "graphic of", it will just be a repetition.
Let me explain better,

<img src="https://dog.jpg" alt="Image of a German Shepherd dog"/>

Screen readers read this code as, "Image of a German Shepherd dog image", but if written as:

<img src="https://dog.jpg" alt="German Shepherd dog"/>

It is read as "German Shepherd dog, image"

5. Be Accurate

Make sure your alt texts describes the image clearly or creates a picture of the image in the mind of your readers.

6. Be Succinct

Be brief and concise when describing your images.

Did you enjoy this blog post?

Follow me not to miss any, we can also hangout on Twitter my DM is widely open.