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)

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Useful!

Collapse
 
arshadayvid profile image
David Asaolu

Glad, you found it useful! 😍🎉

Collapse
 
ashishk1331 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.

Collapse
 
prakh_r profile image
Prakhar Yadav

this was useful

Collapse
 
andruuuh_haze profile image
andruuuh_haze

thanks a lot.