How to Add Alt Text to Images in WordPress

Images play an important role in website design. Without images, designs can be bland and boring to view.

So, how does a vision-impaired person view your website without being able to see images?

Have you thought about a Google bot or website crawler? How does it understand your page content?

Behind every image lies an often overlooked crucial element: alt text, which is a textual description of an image.

Every content image on your site should have alt text to ensure that every visitor gets the best possible user experience.

This article defines alt text and explains why it’s crucial for your website. It also shares some tips on crafting effective descriptions for your website images.

In addition, we will also show you how to add alt text to your images in WordPress, that is, from inside the media library and via popular page builder tools.

Let’s jump on it.

What is Alt Text?

Alt text is a HTML attribute of the image tag. It provides a description of an image’s content.

It serves as a substitute for the image when it cannot be displayed or accessed. The Alt attribute provides context and understanding of images to users who cannot view them visually.

Importance of Alt Text

• Accessibility: Alt text is essential for making your website accessible to everyone. It ensures people using screen readers can understand images.
• SEO Benefits: Search engines use alt text to help understand the content and relevance of images on a website. By providing descriptive alt text, you improve the visibility of your images in search. This boosts your site’s overall SEO.

What is good Alt Text?

Good alt text is a short but informative description of an image. It helps people understand what an image is all about, especially those who can’t see the image itself.

Here is a good example of alt text on an image.

From the above example, here are some qualities of good alt text:

• Clear and concise: The text addresses all objects and actions with a few words.
• Descriptive: It further describes the colour of the boots and flowers, the nature of the floor etc
• Keyword Relevance: For example, if this image appears in a “top 10 winter boots” blog post, this alt text potentially includes relevant keywords like “winter boots”.
• Contextual (Matches the Content): The alt text directly describes the image and is relevant to the surrounding content. This text would work for a “top 10 winter boots” blog post, but not for a flower blog.
• Accuracy: Describes the image content truthfully. It avoids misleading or irrelevant information.
• Natural language: The descriptive text is clear and natural. Avoid complex or technical words.

5 Tips on Writing Good Alt Text

Writing good alt text involves providing a concise yet descriptive summary of the image’s content. Below are 5 tips on how to create helpful alt text:

1. Describe the Who, Where, and What: Define the key elements, subjects, and actions represented in the image.
   • The Who: Is there a person in the image? Briefly describe them and their action.
   • The Where: Where is the image depicted? A beach, a conference room, or a specific location?
   • The What: What is the main subject of the image? Is it a product, a graph, or an action taking place?
2. Consider Context: How does the image relate to the surrounding content? Your alt text should explain what the image is about in relation to the web page/blog post.
3. 125 characters or less: Screen readers only read the first 125 characters of alt text. Keep your alt text short and concise.
4. Avoid redundancy: Don’t use phrases like “image of” or “screenshot of“; screen readers and search engine bots already know they are dealing with an image.
5. Avoid keyword stuffing: While incorporating relevant keywords is beneficial for SEO, avoid stuffing alt text with keywords. Search engine bots perceive this as spammy content.

Adding Alt Text in WordPress

Depending on your WordPress setup, you can add alt text to images in numerous ways. We’ll cover the most common four methods:

1. Adding alt text from Media Libray
2. Setting the alt text inside the Block Editor
3. Alt text in Elementor
4. Inside the Divi Image module.

1. Adding Alt Text inside the Media Library

Adding alt text in the Media Library works everywhere on your WordPress site. This method applies no matter which editor or page builder you use.

When you add alt text to an image from the media library, that description travels with the image. When you add an image to your website in a page editor, the alt text will automatically populate in the HTML.

To add alt text from the media library,

• Inside the WordPress dashboard, go to the Media Library.
• Click on an image to open the Attachment details dialog box.
• Find the “Alternative Text” field and add the image description.

When you use this method, your images will utilise this alt text wherever you place them on your website.

2. Setting Alt Text in the Block Editor

If you are using the Gutenberg Block Editor, you can add alt text to your images using the default image block.

In contrast to the previous approach, adding alt text via the image block only applies to that specific instance(block). Should you decide to use the same image elsewhere on your website, the alt text will not reflect.

To add alt text inside the Block Editor

• Select the image block inside the block editor.
• Locate the “Alternative Text” field via the Block settings.
• Fill in the image description.
• Click Update or Publish to save the changes.

3. Alt Text in Elementor

For Elementor, you can follow the steps below to set alt text for your images.

• Click on the image widget inside the Elementor editor.
• Navigate to the “Content” tab of the widget.
• Click on the image to launch the Attachment Details dialog box we saw in method 1.
• Add the image description in the Alternative Text field.
• Close the dialog to return to the editor.
• Update to save the changes.

Under this method, the alt text is also added via Attachment details. This implies that its description will accompany the image wherever you use it on the site.

4. Inside the Divi Image Module.

For sites using Divi, you can use the Image module to set the alt text using the following steps.

• Select the image module to which you want to add alt text inside the Divi Builder.
• Switch to the “Advanced” settings tab.
• Locate the “Image Alternative Text” field and enter your alt text.
• Save the changes to apply the alt text to the image.

Alt text added in Divi’s Image Module only applies to that specific instance of the image ( and its module). If you use the same image elsewhere on your site, you need to add its alt text again.

The future of Alt Text: AI assistance is here

Adding alt text can be time-consuming, especially for websites with many images. Thankfully, the future of alt text is looking bright with the emergence of AI-powered tools.

AI tools can interpret images and generate alt-text suggestions. These will save time and effort.

Here are some popular AI tools that can help you with alt text creation:

• Ahrefs AI Image Alt Text Generator: This free tool allows you to upload your image and receive multiple alt text suggestions with different tones (casual, formal).
• AltText.ai: This tool also uses AI to generate alt text automatically. It offers integration with platforms, such as WordPress, which makes adding alt text to your site easy.

Final thoughts

After reading this guide you can better understand the role of image alt text. We covered specific WordPress use case’s for editing alt text. Finally you understood how Good alt text will improve accessibility and SEO for your website.

If you need help with alt text or SEO for your website reach out to the team at MRK WP.

Frequently Asked Questions