From the early days of the internet, images have played a major role in how we experience websites. For people with visual impairment, a substitute exists in the form of alternate text.
The ALT attribute is a means to convey the information and context of any given image to a blind user. Unfortunately, ALT text isn't perfect. And the motivation for writing them isn't always for the right reasons (points to an SEO guy).
In this article, I will be writing from two perspectives. One as an Accessibility Website Analyst and the other as an owner of a Web Design business.
Let me start by wearing my Analyst hat first.
Writing ALT text for Accessibility
Before delving right in, we need to put ourselves in the shoes of a user that would find ALT text necessary.
For blind users, the way they experience a website is through the use of screen reader software (e.g. JAWS, NVDA ). To get the lay of the land they need to first listen to the entirety of the page's contents.
That means every single word on the page is readout. Starting from the menu links in the header right down to the copyright information in the footer.
I remember the first time I used a screen reader on a website, it was (no pun intended) an eye-opening experience.
The choices that I am accustomed to as a sighted user weren't available to me. That meant no navigating with a mouse or keyboard.
In time, with more exposure to the software, I began to understand the need for well-written ALT text.
Writing accessible ALT text isn't so easy for sighted users. We tend to do the obvious and describe what the image looks like.
So, what does good ALT text look like?
Well, to understand we need to know what ALT text sounds like to a vision impaired user.
Empty versus Absent ALT attribute
Before I continue, I want to point out the difference between an empty and an absent ALT attribute.
There are situations when an empty ALT attribute is perfectly alright.
<img src="filename.jpg" alt="" width="50" height="60">
An example is when an image is not part of a link or is primarily decorative in nature.
Another is when you can deduce meaning from the text that surrounds that image.
Images that are absent of an ALT attribute however, are never alright.
<img src="filename.jpg" width="50" height="60">
For now, keep in mind that every image must have an ALT attribute present, even if it's empty.
How software interprets Empty and Absent ALT attributes
So, what happens when there is an empty ALT attribute?
It depends. Most screen readers ignore the image and carry on reading the rest of the website. Not ideal, but acceptable.
But, what happens when an image is absent of an ALT attribute altogether?
Depending on the software, some announce "Blank" which isn't helpful for users.
Others will read out the file-name of the image. Imagine a file called "img_215465465.jpg". Now imagine a screen reader voicing that out loud. Not great is it?
How to write ALT text that is useful
Here are a few tips to help you write better accessible ALT text.
- Good ALT texts always convey context. Context provides further information beyond describing how the image looks. It contributes to the understanding of the content and what it represents.
- If the image is purely decorative then leave it blank. Empty ALT text is the stuff of nightmares for SEO professionals (more on that later). But let me emphasize this point again. If the image has no value other than aesthetics, then please leave the ALT attribute empty.
- Be accurate and succinct. You don't need to write a short novel. A few sentences that present the function or content of the image will suffice.
- Don't use phrases like "the graphic is" or "an image of". It is already clear to the user that an image is there.
- Avoid repetition. Don't state the same information verbatim from the text that surrounds the image.
- If the image contains text, and that text helps the readers understanding, then include it in the ALT attribute. It's not a crime to have images that contain words, but avoid creating images that has text if you can.
Writing ALT text for Search Engines - it's good for business
Before I continue with the rest of the article, I need to make a quick costume change (puts on a Business Owner hat). That's better, now where was I?
It seems the main reason why anyone bothers with ALT text these days isn't for accessibility. The answer always boils down to SEO and rankings.
But can you blame them?
Show me a business owner that doesn't want to rank well in search engine results for their given keywords. High rankings can bring in a wealth of traffic and leads.
Sure there are countless other ways out there to make money. But friends, the profits made from being on the first page, that’s something you want to work towards.
Why ALT text has an effect on SEO
So how does ALT text affect SEO and rankings?
Well, to see the effect we first need to understand how search engines gather information.
Let's use Google as an example. Google uses web crawlers to understand the content of billions of web pages on the internet. It then organizes what it gathers into its search index.
Let's think about this for a second. When a web crawler comes across an image how do they know what it is?
Well, the answer is, they don't know for certain. They can make an educated guess, but that's about it. The thing with web crawlers is, they are pretty much blind when it comes to images.
Yes, Google employs sophisticated computer vision algorithms to understand the image's subject matter. But the technology isn't 100% and crawlers still need human intervention to help tell them what the image is.
So what then, helps crawlers to understand what an image is all about? That's where ALT text comes into play.
ALT text helps crawlers to figure out the subject matter and what the image represents. That, in turn, helps Google to return a correct result when a user makes a query.
The connection between ALT text and rankings
So, what's Google understanding your image got to do with rankings? Here's a simplified explanation of what happens.
- If your image doesn't have ALT text, then you make it hard for crawlers to understand what it is.
- If crawlers can't understand what it is, then search engines can't use your image to answer a user's query.
- If search engines don't use your image for queries, then you lose out on potential traffic.
- If you don't have lots of traffic, then your website won't rise higher in rankings.
- If your website don’t rise in rankings, then you don’t make money and your children go to bed hungry (sad but true)
Makes sense? Let's continue.
How to write SEO-friendly ALT text.
So how do you write ALT text that is good for SEO? As it turns out, not much different from writing good accessible ALT text.
The only key difference is to include your keyword in the ALT text if you can. That's about it.
Let's make one thing clear.
Your rankings won't suddenly go up just because you decided to include keywords in your ALT text. But there is a chance it could go down if you misuse this strategy.
So here's what not to do.
Don't stuff keywords in ALT text. This is not an opportunity to put tons of relevant keywords in your image.
<img src="filename.jpg" alt="alt alt-text alternate-text text-alternate seo seo-alt-text alt text-for-seo" width="50" height="60">
Write descriptive ALT text and if possible include your keyword. Emphasis on if possible.
One last thing.
Don't be tempted to add ALT text to every single image on the page. Remember, it's perfectly fine to have empty ALT text (SEO guy has a heart attack). Especially if the image is for decoration and doesn't enhance the content for a user.
Striking a balance between SEO and Accessibility
As a business owner, I want my website to rank well. I will use every little strategy out there if it will give my web design agency a leg up.
But where do I draw the line?
Speaking for myself, I will approach writing ALT text from a mindset of being inclusive. From now on, I won't use ALT text hoping it will bring in traffic. I will include ALT text only when appropriate, and if there are clear benefits for the end-user.
Although, a keyword here or there won't hurt either (laughs maniacally). What do you want from me? I've got little mouths to feed.
Writing good descriptive ALT text can be difficult. But with practice and by following the tips above, we can make web content more accessible. Plus it could bring in some traffic. Win-win I say.
In all seriousness though, adding good ALT text should always be about your audience. Any benefits it gets from SEO should always be a secondary goal.