DEV Community

Cover image for How to Write Good Alt Text for your Images
David Asaolu
David Asaolu

Posted on


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"/>
Enter fullscreen mode Exit fullscreen mode

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=""/>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

ayabouchiha profile image
Aya Bouchiha


arshadayvid profile image
David Asaolu

Glad, you found it useful! 😍🎉

hugekontrast profile image
Ashish Khare😎

We never write good alt text for images, we have to write precise heading with minimum words' use which accurately define image's content.

prakh_r profile image
Prakhar Yadav

this was useful

andruuuh_haze profile image

thanks a lot.

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓