If you are uploading media on your website or on social media, you should be including alt text! Additionally, you want to be sure that you are following the best practices, thus ensuring your alt text is always optimized!
If you are unsure of what alt text is and why you should be using it, please consider reading our post, Alt Text: What It Is & Why You Should Be Using It.
Alt Text Best Practices
Here is a brief rundown of the best practices for your alt text! You can use this checklist as you begin writing your alt descriptions, as these are always going to be relevant!
- Add the right kind of alt text to the right kinds of images
- Be descriptive yet concise
- Avoid unnecessary words
- Aim to put the most important information at the beginning
- Use keywords, but not overwhelmingly so
- Use proper grammar for screen readers
- Linked images should convey the action
- Always review for errors
1) Add the right kind of alt text to the right kinds of images
An important item to note: you may have heard elsewhere that you do not want to put alt text on every single image. This is wrong! You do want alt text on every image; you just need to use the correct kind of alt text.
If an image is informative, add the alt text. If an image is adding value to a page and/or would hinder a page were it missing, add the alt text!
If an image is simply decorative and serves no real purpose, then you may have heard to not add the alt text. This can cause unnecessary confusion for users on the site using screen readers. That being said, leaving the alt text blank is actually not the best practice. In this scenario, you would want to use a “Null Alt Text”. When a screen reader comes across null alt text, it will completely skip over the image, without even announcing its presence to the user. If we completely skip adding an alt attribute, the screen reader will read the image’s file name, which could be even more distracting than regular alt text would have been.
2) Be descriptive yet concise
When writing alt descriptions, you will want to ensure that you remain in the realm of 125 characters. Most screen readers will stop reading at that point, which can cause confusion for users. Within these 125 characters, you will want to be descriptive! This does not necessarily mean describing exactly what is in the photo. Your alt text does not need to be an objective description of what is visually seen. It can convey nuances, details, and emotions if they are relevant to the user experience.
3) Avoid unnecessary words
This goes with keeping concise, but most specifically we are talking about the following words:
- Photo of…
- Image of…
- Graphic of…
- Etc.
The reasoning being that screen readers automatically announce an image as an image. So the alternative text on a photo of a jellyfish entered as, “A photo of a jellyfish” would be read by screen readers as, “Image A photo of a jellyfish.” Simply leave it at, “A jellyfish.”
4) Aim to put the most important information at the beginning
Once again in the realm of short and sweet: we do not need a novel per picture. Put the most relevant information at the beginning of your alt text to allow users to move on once they have the information they need.
5) Use keywords, but not overwhelmingly so
It is great to include a keyword you are wanting to rank for in some of your alt texts, especially when they are relevant to the particular photo. That does not mean that every other word on every alt description should be one of your keywords. This results in confused users, and confused search engines. Generally you only want to include the target keyword for your specific page/post/article and only if it is easily included in your alt text.
6) Use proper grammar for screen readers
As for any text, using punctuation in the text alternative makes the information easier to understand. In particular, remember to add space characters in the alt text when there is no space character between the image and adjacent text, to avoid having words running together when they are read by a screen reader.
If you use a null (empty) text alternative (alt=””) to hide decorative images, make sure that there is no space character in between the quotes. If a space character is present, the image may not be effectively hidden from assistive technologies. For instance, some screen readers will still announce the presence of an image if a space character is put between the quotes (Source).
7) Linked images should convey the action
When you have an image that is linked, it is best practice to convey the action that will be initiated (i.e. that it is linked and where it is linked to) rather than describing what is in the picture that is linked, as at that point it is not relevant.
8) Always review for errors
Always double check your alt text at the same level you would for the rest of the content on your site. Misspelled words in alt text can hurt the user experience and/or confuse search engines crawling your site.
Testing Your Alt Text with AI
With how readily available so many free AI tools are today it only makes sense to use it to your advantage! If you are unsure how well you have managed to describe your image, you try plugging your alt description into one a generator and see how close their rendering is to your original image! Linked below are a few that we have used on our team!
Microsoft 365 Free Image Generator
Written by Hailey A. Arntson
