How To Write Great Alt Text For SEO
Web accessibility is a hugely important aspect of website creation and content. Not only does it greatly benefit those with disabilities, it can also be great for your search engine optimisation (SEO) too.
Globally, around 1 in 5 people have a disability. This equates to over one billion people! (Data provided by Humanity and Inclusion). Thankfully, there is a range of assistive technologies to assist with visual, audio, and physical obstacles when using the internet, but websites must be built properly for that technology to work.
Alt text on images is an important part of web accessibility, and a major player in helping more people easily access the internet, especially those with a visual impairment.
But what are the benefits of alt text? Do you need to use it? How do you write great alt text with SEO in mind? This article will explain all this and more. Firstly though…
What Is Alt Text?
Alt text, also known as alt attributes, alt description, and (incorrectly*) alt tags, is short for ‘alternative text’, and refers to text used within HTML code to provide an alternative means to convey information about an image on a page. Alt text can be read by "screen readers"; specialist assistive technology software used by those with visual impairments to navigate websites, and in the case of images, provides the user a better understanding of an image. Popular screen readers include NVDA and JAWS but most operating systems also have their own assistive technology built in such as Microsoft's "Narrator".
*The term “alt tags” is often used when referring to alt text, however, ”alt tags” don’t technically exist - in simple terms, a “tag” refers to certain elements in HTML code typically contained within <> brackets, such as the ‘<img>’ tag, <p> tag for paragraphs, <ol> tag for ordered lists, and so on. The "alt attribute" belongs to the <img> tag, and "alt text" is a value of the alt attribute. Therefore, an image may have an img tag, alt attribute and alt value defined as follows:
<img src="/image-path-goes-here.jpg" alt="A concise and helpful description of the image" />
We’ll primarily be using “alt text” and “alt attribute” in this article.
How Do I Find Out If An Image Has An Alt Attribute?
To see if an image has an alt attribute, right click on an image and click ‘Inspect’. In the HTML code, look for ‘alt=’; the text following this in quotation marks is the alt text.
Let’s look at this image of a bumblebee in this news piece:
As you can see, this image has the alt attribute “Bumblebee”. When a screen reader is reading a page, when it gets to this image, it will read out this alt attribute, giving the user more information. This in itself isn't a great alt attribute. For example, close your eyes and imagine someone had said you "Bumblebee". It's unlikely you would have pictured anything close to what this image actually shows and everyone reading this article will probably have imagined something different. Therefore, a better alternative description might be "A close up image of a Bubblebee with wings blurred in motion, clinging to the top of purple lavender flowers".
Try the same exercise again. Close your eyes and imagine someone providing you with the above description. Whilst it's still unlikely you'll imagine the image exactly as it's seen by the eye, everyone reading this now has a far better understanding of the visual information & context conveyed by the image, and as a result, will be mentally visualising images which are contextually very similar.
Benefits of Alt Attributes and Alt Text
So you know what an alt attribute is and how to find out if an image has one, but why is all this important? Here are some of the benefits of alt attributes:
1) Improved Accessibility
The primary benefit of alt attributes and alt text is that they increase the accessibility of your website for people with visual impairments and other disabilities. Including alt text means the assistive technology these users rely on, screen readers, can tell the user what is in an image. This means that users don’t miss out on important information or content which is displayed in a non-text format. A great example are special offer banners which are used all across the web. Many of them fail to meet accessibility guidelines, which brings us neatly onto...
2) Improved Legal Compliance
In some scenarios you may need to include alt text to avoid unintentionally discriminating against visually impaired users.
For example, if your business displays a special offer, but you only provide the information via a visual image (for example a graphic saying “10% off when you use the code 'ICanSeeThis' ”) and don’t provide the offer via an alternative, accessible means (such as via text elsewhere on the page, or using image alt text), then someone with a visual impairment and those using screen readers may not be aware of the offer. As a result, they could argue they are disadvantaged compared to other users, and therefore are being discriminated against.
This even applies to images that improve the experience of the written content by adding or improving context. Graphs can be an example of this.
Interestingly, however, not all images require alt text, and so we'll discuss both of these scenario's later in this article.
3) Improved SEO
As Beyond Your Brand’s SEO Strategist Extraordinaire, Kieran Thomas, puts it: “Google is, without doubt, your largest ‘visually impaired’ user”.
Google (and other search engines) crawls pages when indexing them, identifying what the content (both textual and visual) is about and considering where to rank them depending on how optimised they are. Whilst search engine image recognition has come a long way, search engines still welcome a helping hand from site owners and utilise the alt text provided to add to their understanding of an image.
If search engines can’t figure it out, or get it wrong, you could rank for unintended keywords or lose out on ranking for the words you want to rank for.
Alt text is a great way of ensuring search engines know exactly what your image is, as well as helping them understand the context of the page content itself.
In addition, "visual search" is becoming more popular; especially when shopping for products, holidays and so on. If you only focus on optimising for traditional "blue link" search results (the text based search results that we all know and love), then you're potentially missing out on a wealth of traffic and potential leads or sales from Google Images and more.
However, there's a reason we didn't start the benefits section by listing SEO first, and that's because too many site owners (and unfortunately, too many SEO companies) abuse alt text to spam and cram keywords onto a page. Thankfully we've provided some alt text best practices later in this article to help you create them the right way.
4) Improved User Experience for Visual Users
Alt text doesn’t just help visually impaired users and those using screen readers. If someone has something blocking images from appearing, or if the image loads too slowly, then the alt text will appear in its place. This allows the user to understand what the image would have been, perhaps improving the context of the rest of the page and improving the user experience.
Does Every Image Need An Alt Attribute?
Having said that it’s a great idea to use alt attributes, do all images require them?
You may have some images that are purely decorative and don’t add anything to the content on the page. If this is the case, you probably don’t need to assign them alt text, as this won’t necessarily improve the user experience and doesn’t need to be read by the screen reader. However, you should still provide them with what's known as a blank alt attribute. Simply put, you provide an alt attribute as normal, but with no value between the opening and closing quote marks. For example:
<img src="/" alt="" / >
That tells search readers and search engines that the image doesn't contain anything of any signiciant value and can ultimately be ignored.
So, should you just ignore these images when adding alt attributes? No! If an image doesn’t have an alt attribute, the screen reader might read whatever it can find, often the entire filename (including the https:// etc) , as this may be helpful to the user, but it rarely is, and it makes for a horrendous user experience.
Let’s take another look at the HTML code for the image of the bumblebee.
If the alt attribute wasn’t included, when coming across the image of the bumblebee, the screen reader may read out the long medley of text after ‘srcset’ (the set of filenames). As you can imagine, that would probably be very frustrating and not very helpful for the person using the screen reader.
If you have an image that adds nothing to the user and therefore doesn’t need reading out by the screen reader, ensure you add a blank alt attribute.
For those images that do need alt attributes, what is best practice and what should you avoid?
1) Include Them Where Appropriate
As mentioned above, it is best practice to include:
- alt attributes on all images,
- alt text for images which help provide context or information,
- blank alt attributes (alt=“”) for images that are purely decorative.
2) Don’t Spam Keywords
A benefit of using alt attributes is the SEO bonuses it brings, especially when including your keywords in the alt text, helping your page rank higher for that keyword.
However, don’t spam keywords.
Don’t just write a list of your keywords in the alt attributes in order to boost your rankings. Firstly, this isn’t helpful for the visually impaired user and could be frustrating having to listen to a string of keywords. Secondly, this may hinder, not help, your SEO. As with other parts of your content, Google and other search engines will recognise if you’re trying to spam keywords, and may punish your page accordingly.
Bad alt attribute example: alt=“bee, bumblebee, bee on flower, bee flapping wings, bee on purple flower, flying bee”
3) Use Helpful Descriptions
A weak description of an image in an alt-attribute probably won’t improve the user experience, negating the purpose of alt text in the first place and you may as well give it a blank alt attribute.
Try to use clear, accurate and descriptive descriptions to add the most value and do as much as you can to improve the context for the visually impaired user.
Bad alt attribute example: alt=“bee”
4) Keep It Concise
Having said that, try not to make the alt text too long, aiming for no longer than a sentence. There should be a limit of about 125 characters, being concise while providing enough detail for users and search engines to relate the image to the context of the page.
Bad alt attribute example: alt=“Looking at a black and yellow striped bumblebee from it's right side, with a white tail with its legs on a purple lavender flower flapping its wings with a green background”
5) Don’t Say ‘Image of…’
Don’t include ‘Image of…’ or ‘Picture of…’ in the alt attribute. The screen reader will know when it is reading an image’s alt text, and it offers nothing in terms of SEO.
Bad alt attribute example: alt=“an image of a bumblebee”
Considering these best practices, an appropriate alt attribute example for this image of a bee (assuming it is important to the context of the content) would be:
alt=“A bumblebee on a purple lavender flower”
6) Graphs ANd Complex Images
So, given we've said to keep alternative text to a sentance of ideally less than 125 characters, you may be wondering how you tackle complex images such as graphs? Well, a few years ago there used to be an attribute specifically for this called "longdesc" (which was short for "Long Description"). However, that's now been depreciated. Therefore, current best practices suggest either:
- discussing the graph within the article itself. For example, what is the graph showing? What insights can be gained? When done the right way, this adds value to all users regardless of their visual abilities, or
- providing a link to an alternative page which discusses the graph in more detail. This link can be provided just within the alt attribute, but we'd also recommend that you consider adding a clickable link (as alt attributes aren't clickable) either from within the page content itself, or potentially from within the <caption> tag.
Still confused by alt text and need more help?
Alt attributes are an important aspect of web accessibility, and are a key player in the effort towards a more inclusive internet for everyone. Not only that, it can give your SEO a boost, improving your rankings for your keywords.
Be sure to try to include them where necessary and follow our best practices.
If you’re not technically-minded and need help with your alt attributes (and more!), Beyond Your Brand can help. We’re experts in all things SEO - get in touch!