At first glance, writing good alt text seems like an easy task. However, more goes into writing good alt text than simply looking at an image and describing what you see. Here are four principles to writing good alt text.
Good alt text is contextually appropriate
This is one of the most important tips I can give about writing good alt text. It’s always valuable to think about how users with screen readers will interact with your content prior to writing your alt text. Not only should alt text be contextually
appropriate with the surrounding information, but it should also be contextually appropriate with the intent and meaning of the image. Let’s take a look at an example.
Consider the above image. If this image appeared in an article about real estate prices, the alt text might read something like: “A white and brown three storey house valued at $4,000,000”. Conversely, if the image appeared in an article about
landscaping might read something like: “A sparsely landscaped property uses flora to frame the entrance of the house”.
In both cases, the alt text adds to the message and context surrounding the image. If the alt text simply read “A house”, it wouldn’t provide any useful information or any contextual ties to the content in either case. Let’s look
at another example while keeping in mind how the information will be read out when using a screen-reader.
Let’s consider the image above. Let’s also imagine that this image appears in an article about how CAPTCHAs help to prevent spam email as a header image (meaning that the image appears above the text of the article).
If the alt text were to read “A woman with her hand outstretched”, this would appear meaningless in comparison with the context of the article. While this describes what is in the picture, someone interacting with the content via screen-reader
would wonder, “what does a person with an outstretched hand have to do with prevent spam email?” If the alt text were changed to “A woman raises her hand to form a stop gesture”, the meaning of the image in relation to the
content becomes much clearer.
A simple trick to help you write contextually appropriate alt text is to read your content and your alt text out loud (or to yourself). Many times people input alt text without thinking about the surrounding content. Considering how your content as a
whole will be read by screen-readers helps to identify the necessary steps to writing meaningful alt text.
Good alt text is user focused
Including keywords in alt text can be beneficial for SEO, but you should keep in mind the purpose of alt text when thinking about SEO. Alt text should be geared towards describing images to users, not maximizing the benefits for your SEO. This means that
jamming as many keywords (or “keyword stuffing”) into your alt text as possible is poor practice. In fact, doing so will hurt your search engine ranking as Google penalizes this practice as it considers this spam. The purpose of alt text
is to convey information about the image if the image itself were unseen by the user, not to optimize your SEO. Search engine algorithms take this fact into account when considering alt text and SEO.
Let’s take a brief look at a few examples of keyword stuffing as they might apply to the following image if it were to appear on product page of a clothing store.
Example 1: "tshirt tee shirt t-shirt tees shirt"
- This alt text would be a clear instance of keyword stuffing. The text would degrade the user experience for screen readers (as they’d hear meaningless variations of the phrase “t-shirt” 6 times) and would bring down search engine
rankings as well. This text is also not contextually appropriate as it has no tie to the rest of the content on the page.
Example 2: "This t-shirt is the very best quality t-shirt available for customers who are looking to purchase a t-shirt"
- This is another example of keyword stuffing. While it provides more meaningful information for users reading screen readers, it would still be recognized by search engines as keyword stuffing. Alexa.com has an excellent article about how to use keywords appropriately and how to maintain keyword density.
Example 3: "A ClothCo 100% cotton white t-shirt"
- This is well written alt text. This alt text uses the keyword just once in a succinct description of the image that also ties in well with the rest of the content on the site.
As a rule of thumb, keywords should be added to alt text if it makes sense. Writing confusing or grammatically incorrect alt text just to include a keyword is poor practice. If you’re finding it difficult to include a specific keyword in your alt
text, think about using semantic keywords or the most important parts of a long-tail keyword instead. Also, if you have multiple images on a page, you don’t need to include keywords in every single image - simply including it in at least one
will suffice.
Good alt text is efficient
Good alt text is neither too short nor too long. This is a tricky step to master, but with practice and thinking about how alt text will be presented, it becomes easier to write alt text of an appropriate length. Once again, thinking about your surrounding
content will help to indicate what is the most important information to include in your alt text. Generally speaking though, alt text should not exceed 125 characters as some screen-readers stop reading alt text after this point.
Good alt text is properly inputted
This one is kind of a no-brainer. Good alt text should be grammatically correct and be without misspellings. As well, escape characters should be used where necessary to avoid breaking the markup where the alt text appears.
This is particularly important for apostrophes and quotation marks. If you need to have an apostrophe or quotation marks in an image’s alt text or title, you should use escape characters to add in these characters rather that actually typing ‘
or “. The reason for this is when browsers parse alt text with an apostrophe or a quotation mark you get something like the HTML snippet below where the browser will read the apostrophe/quotation mark as the end of the alt/title attribute:
<img src="https://www.flywheelstrategic.com/images/default-source/blog-images/sidekick.png?sfvrsn=9df87861_3" alt="Remarketing is marketing" s="" perfect="" sidekick="" like="" dog="" to="" humankind="" -="" flywheel="" strategic'="" title="Dog in a person" backpack'="">
The escape character for apostrophes is: '
The escape character for quotation marks is: "
So in an example where you want the image title to be: Dog in a person’s backpack
You would enter: Dog in a person's backpack
Using escape characters will help you to keep your HTML valid across your site and your content.