Tips For Writing Good Alt Text In HTML

Hello Fellow Codenewbies 👋,

Sometimes we forget or ignore writing an alt text.
One of the reasons I often hear is that we don't know what to write, skip it for later, and then forget to write it down. Or, we write something, but not descriptive enough.

I hope after reading this article, we will start to get more aware of alt text and know how to write a good one.

What is an alt text?

Alt text is an alternative text to describe an image.

<img src="pancake.png" alt="stack of strawberry pancakes on white table">

Imagine when we open a page and an image fails to render. Without a descriptive alt text, we will only see a broken image without knowing what image we are seeing.

https://codepen.io/adiati/pen/ExWNXjG

The importance of alt text

Accessibility

A descriptive alt text will help every internet user.
For people with visuals impairment, the screen readers will read the image's alt text for them.
And when an image fails to render, alt text will be the description of the broken image for everyone to read.

https://codepen.io/adiati/pen/eYvBRPo

SEO

An image with alt text will optimize the image SEO in particular, and the website in general. It will help our image to get discovered by search engines and get ranked.
We need to think about writing a good alt text so that our image and product can reach a bigger audience.

How to write a good alt text?

Short and descriptive
Don't use the word image, picture, or similar
No need to include dashes or underscores between every word

Let's take an example from this image. woman holding teacup Photo by Jarek Ceborski - Unsplash

⭐ Short and descriptive

A long descriptive alt text doesn't mean a good one.

<img src="woman-holding-teacup.jpg" alt="woman in white long-sleeve shirt sitting on a gray chair in a living room while holding a saucer and a teacup">

But also bear in mind, short alt text doesn't mean that we put a bunch of keywords as if we write hashtags. Doing this can make people, especially those who use screen readers, confuse. Search engines will also think that we have untrustworthy images and websites.

<img src="woman-holding-teacup.jpg" alt="woman hands long-sleeve shirt teacup chair">

✅ We need to write a short, specific, and descriptive alt text. Consider putting in the most important information in the image.

<img src="woman-holding-teacup.jpg" alt="woman in white long-sleeve shirt sitting and holding teacup">

⭐ Don't use the word image, picture, or similar

<img src="woman-holding-teacup.jpg" alt="picture of woman in white long-sleeve shirt sitting and holding teacup">

⭐ No need to include dashes or underscores between every word

<img src="woman-holding-teacup.jpg" alt="woman-in-white-long-sleeve-shirt-sitting-and-holding-teacup">

Not every image need alt text

An image with pure decoration purposes doesn't need alt text.
The best way is to add this image with CSS as the example below.

https://codepen.io/adiati/pen/dyvpgBb

Another alternative is to leave the alt text empty (null alt text). Most screen readers will skip reading an image with empty alt text.
When we don't provide alt text, some screen readers will read the image's file name. Thus, it is a good practice to name our file as a short description of the picture.

<img src="woman-holding-teacup.jpg" alt="">

Conclusion

Alt text is important for accessibility purposes and to optimize image SEO.
A good alt text:
- Short and descriptive.
- Not using the word image or similar.
- Not including dashes or underscores between every word.
Images with pure decoration purposes don't need alt text. We can add these images with CSS or leave a blank alt text.

Thank you for reading!
Last but not least, you can find me on Twitter. Let's connect! 😊

Tips For Writing Good Alt Text In HTML

Comments (2)

Tips Log

How To Build An Effective Developer Portfolio

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

What is an alt text?

The importance of alt text

Accessibility

SEO

How to write a good alt text?

⭐ Short and descriptive

⭐ Don't use the word image, picture, or similar

⭐ No need to include dashes or underscores between every word

Not every image need alt text

Conclusion

Command Palette

Comments (2)

Tips Log

How To Build An Effective Developer Portfolio

More from this blog

What is an alt text?

The importance of alt text

Accessibility

SEO

How to write a good alt text?

⭐ Short and descriptive

⭐ Don't use the word image, picture, or similar

⭐ No need to include dashes or underscores between every word

Not every image need alt text

Conclusion