For both SEO purposes and good web accessibility, alt text is important. Screen readers will read the alt text of an image to allow visually impaired users to understand the content better. It helps with SEO scores. It also serves as a backup in the case where the image did not load properly, it can be displayed in place of the image.
The most common content management systems (CMS) today make it easy to add alt text to images. For example, in Drupal, all image fields have an option to make alt text required so the user will have to enter one when uploading an image. Even when the user is uploading an image via a WYSIWYG editor, it can be set so that the alt text is required. This makes it easy for users to set an alt text as they are uploading images.
Good alt text vs bad alt text
Even with alt text being a required field for users to enter while uploading images, it doesn’t improve the site if the alt text is bad. For example, if the alt text is just “image” or “picture”, it doesn’t really do much for accessibility or SEO. This is why it is important to have good alt text.
Good alt text is a description of the image as specifically as possible. Gives a sense of the action in the image, and describes colours or directions when required to convey the meaning and context. Don’t start with “image of…” or “picture of…”, jump right into the description because most common screen readers will identify it as images already. In addition, it is pretty frustrating for the user, if the screen reader is reading "image of" multiple times.
There are certain situations where you don’t want to just have a descriptive alt text. For example, if you have an image of an upwards arrow that links to the contact us page, instead of having the alt text “an upwards arrow”, you can have the alt text as “go to contact us page”.
However, try to keep it relatively short. Most screen readers will cut off the alt text after 125 characters. So don’t write an entire back story for the image. This is where it sometimes creates a little bit of trouble as too little might not be enough but with too much text, you risk overwhelming your audience.
There are situations where an image should not have an alt text. If an image is purely decorative and does not really sever any purpose for conveying information, putting an empty alt text will let the screen reader know to skip this image. Make sure to still include an alt attribute because if no alt attribute, the reader will read the file name of the image instead and it can be confusing to the screen reader. Imagine browsing through the page and all you hear from the screen reader is “main-bg-green”.
Another thing to keep in mind when entering alt text is the use of keywords. We mentioned above that having no alt text on your images will take away points for your SEO, but better yet, you can provide a slight SEO boost on top of having alt text on your images by helping search engines understand your image content. Having words that are related to your website and your content in your alt text can have small improvements on your search ranking when users search for the right keywords.
If there is text included as part of an image, be sure to transcribe it as part of your description. This will help the user understand the context better, unless that means repeating the description, in that case, don't.
Do remember that at the end of the day, alt text is for humans to read, the main reason is still for accessibility, not to boost SEO. So don’t get carried away and start stuffing your alt text with unrelated keywords. That will actually do more harm than good.
Make sure to review for spelling errors. Typo in image alt text could hurt the user experience or confuse search engines while it indexes your website. You should always review alt text like you would any other content on a page.
The best way to test your alt text is to actually experience how screen readers work. Utilize the many built-in screen readers or download the most popular screen reader application and browse your website. Observe how it navigates and how the image alt text is being read out. This will give you a better understanding of what works well and what needs to be changed.