What is Alt Text?
What is alt text anyway?
Let's look at what it is, why it is important and how to write great alt text.
I will leave you with 5 tips for writing the perfect alt text.
Grab your favorite beverage, let's dive in.
What is Alt Text anyway?
Alt text describes images on your site and has three main uses on the web:
- Screen readers read aloud the alt text to describe the images on the page for accessibility.
- The browser will display the alt text when an image does not load.
- Search engines use the alt text to better understand the content so it's important for your SEO.
Alt text sometimes referred to as Alt tags is an HTML attribute on the img tag. For example, let's say we had this image on your site:
This is what it would look like in HTML.
<img src="/images/bee.jpg" alt="Healthy bee collecting pollen from sunflower">In the above example, the alt text has been set to “Healthy bee collecting pollen from sunflower”.
Why is Alt Text Important?
To understand why alt text is important, let's look at each of the three uses in more detail.
The first is by people who are blind or visually impaired. The alt text is a part of the web accessibility standard to describe images. Screen readers read aloud the contents of the alt text so they can understand what the image is about.
You should always write your alt text descriptions for this audience. This is the primary reason for alt text after all but it also has two other uses.
The browser will show the alt text when an image is missing. It will look something like this for our broken bee image:
You can see that there is a small image icon (to show that the image is missing) and the alt text.
So again it is people that are seeing the alt text.
For these two reasons alone you should adopt alt text and write them to describe the image. There is also an SEO benefit to using alt text as search engines will also look at it. Let's look at this next.
Alt text and SEO
Search engines will use the alt text to better understand the images on your site.
Let's pretend we are writing an article to target the keyword “Healthy Bee”. You have a popular beekeeping blog and you're working on the latest post.
The main image on our blog is of the bee photo:
We described the image as “Healthy bee collecting pollen from sunflower”.
When Google or Bing visits to read the web page it finds our bee image. It runs the image through image recognition technology to find out what the image is about. Here is what Bing's image recognition tech described the image as:
a close up of a flower
It's impressive that it can tell that the image is a close up of a flower but it has missed the bee in the middle of the image!
If you want your image to appear for the search term “Healthy Bee” then we need to give the search engines a helping hand.
The alt text:
“Healthy bee collecting pollen from sunflower”
This lets the search engines know that this image relates to bees. Not only that but it is a healthy bee collecting pollen from a sunflower. This is something that the image recognition technology cannot do yet.
With this example we have covered two things:
- We include the keyword and rank in image search engines
- The description is perfect for the image and accessibility users
Next, let's look at 5 top tips of writing great alt text.
How to write great alt text?
When writing a good alt text always keep web accessibility in mind. The alt text is there to provide information about the image to the blind and visually impaired. A browser or screen reader will use the alt text but it is a human that you are writing it for.
Let's look at 5 tips to writing great alt text.
1) Write the alt text as if you were describing it to a friend
Screen readers and computers are getting better at understanding images all the time. Yet, they don't always understand the context of an image or its significance. So make sure to write the alt text as if you were describing the image to a friend.
2) Keep it short
There is no official character length standard for alt text. Yet, there is a reference from W3 of a test failure if the character length is greater than 100.
They go on to say:
If the alt attribute value is greater than 100 characters (English) then either shorten the alt attribute value or confirm that current value is the shortest possible for the associated image.
For this reason, try to make your descriptions short and to the point.
3) Create unique descriptions for every image
When you are writing your alt text descriptions make sure to describe the image. If you have the same image then it is fine to have the same description.
Yet, often this is not the case so write a unique description for every image. This also helps with your image SEO. For example, Google will show your images for various search terms. Writing unique titles allows you to target a greater number of search terms.
4) Use your keywords if it describes the image
With the “Healthy bee” example we showed that it is a good idea to include your keyword on at least one of the images.
It does not have to be exactly the keyword it can start with the keyword like our example:
“Healthy bee collecting pollen from sunflower”
5) Don't do keyword stuffing
The last tip is to not overdo your keywords. Keep it natural and not forced. This is keyword stuffing:
“Healthy bee, bee health, healthy bees”
Don't do this!
The takeaway is to write unique, short, descriptive alt text. Do this for each image and naturally include your keyword on at least one of your images per page.
What are alt attributes and title attributes?
As well as the alt text attribute img also has a title attribute. This can be a bit confusing at first as you would think that the title does the same thing as alt.
Here is what the HTML would look like if we added Title tag to our bee image:
<img src="/images/bee.jpg" alt="Healthy bee collecting pollen from sunflower" title="Healthy bee collecting pollen from sunflower">The title is not used for SEO. Search engines do not read the title tag of an image, so why add it?
It uses it to show a tooltip. This is a little popover when you hover over an image. Try it on the image below, hover your mouse over the image and you should see a little popup with the image title:
Alt text and title text have different uses:
- Alt text - Screen readers use it to describe the image to the blind or visually impaired
- Alt text - Browser will display this text when an image is missing
- Alt text - Search engines use it to better understand the image
- Title text - Browser displays the title text on the tooltip
So it is good practice to have both attributes for the images on your site.
Wrapping Up, What is Alt Text?
We have learned that the alt text has three uses:
- For accessibility for screen readers and the visually impaired
- To categorize images on search engines
- The browser when the image link is missing
To write great alt text you should follow these 5 tips:
- Write the alt text as if you were describing it to a friend
- Keep it short
- Create unique descriptions for every image
- Use your keywords if it describes the image
- Don't do keyword stuffing
It is also a good idea to add both the alt and text attributes for your images so that you get a tooltip popup on the images.