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.
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.
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.
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.
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! 😊
Top comments (6)
Nice post Ayu, alt text was something I struggled with initially and was definitely guilty of using image or picture in my description.
I wonder if the level detail like 'white-shirt' is needed as the color of the shirt doesn't project what the image is actually about?
Hi Peter,
Thank you and also for reading! 😊
In this post, I made a general example.
For some cases, such as in photography platforms or product descriptions, this specific detail is necessary.
And in the example picture, the white shirt is one of standout elements for product description.
I personally sometimes looking for pictures with specific criterias, such as color, to match the theme of things that I'm working on.
So at the end, it depends on the context and the need of how you want to represent the image through the alt text to your audience.
That's my two cents :)
Great reply I see what you mean by context.
Bro everyone hates a11y and i18n, but we have to do it whatsoever.
I disagree, I don't hate it. I think it is very important to make the web accessible to everyone.
Bruh. I mean,
Everyone hates a11y and i18n, but we have to do it whatsoever because it's important to make the web accessible to everyone.
You know, everyone hates bugs and errors. But we have to fix those bugs because it's important to make the software not buggy.